BOOKING

显示标签为“HTML”的博文。显示所有博文
显示标签为“HTML”的博文。显示所有博文

2013年2月11日星期一

HTML表单(Forms)


HTML表单(Forms)HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。
举个简单的例子,一个让用户输入姓名的HTML表单(Form)。示例代码如下:
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名:
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>

演示示例
学习HTML表单(Form)最关键要掌握的有三个要点:
表单控件(Form Controls)
Action
Method
先说表单控件(Form Controls),通过HTML表单的各种控件,用户可以输入文字信息,或者从选项中选择,以及做提交的操作。比如上面的例句里,input type= "text"就是一个表单控件,表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理,表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp
至于method,表示了发送表单信息的方式。method有两个值:get和post。get的方式是将表单控件的name/value信息经过 编码之后,通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送,你在地址栏看不到表单的提交信息。那什么时候用get, 什么时候用post呢?一般是这样来判断的,如果只是为取得和显示数据,用get;一旦涉及数据的保存和更新,那么建议用post。
HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有:
表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)

表单控件(Form Control):单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息,比如用户姓名。例句如下:
<input type="text" name="yourname">

演示示例
表单控件(Form Control):复选框(input type="checkbox")
复选框允许用户在一组选项里,选择多个。示例代码:
<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>

演示示例
用checked表示缺省已选的选项。
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>

演示示例
表单控件(Form Control):单选框(input type="radio")
使用单选框,让用户在一组选项里只能选择一个。示例代码:
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>

演示示例
用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>

演示示例
表单控件(Form Control):下拉框(select)
下拉框(Select)既可以用做单选,也可以用做复选。单选例句如下:
<select name="fruit" >
  <option value="apple">苹果
  <option value="orange">桔子
  <option value="mango">芒果
</select>

演示示例
如果要变成复选,加muiltiple即可。用户用Ctrl来实现多选。例句:
<select name="fruit" multiple>

演示示例
用户还可以用size属性来改变下拉框(Select)的大小。
演示示例
表单控件(Form Control):多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下:
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度,rows表示textarea的高度。
演示示例
表单控件(Form Control):密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入,比如密码。因为用户输入的时候,显示的不是输入的内容,而是黑点符号。。例句如下:
<input type="password" name="yourpw">
演示示例
表单控件(Form Control):提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下:
<input type="submit" value="提交">
演示示例
表单控件(Form Control):图片提交(input type="image")
input type=image 相当于 input type=submit,不同的是,input type=image 以一个图片作为表单的提交按钮,其中 src 属性表示图片的路径。
<input type="image" src ="images/icons/go.gif"
alt = "提交" NAME="imgsubmit">

演示示例

HTML 语法大全

ml语法大全
标签 , 属性名称 , 简介  <! - - ... - -> 注解
 <!> 跑马灯
 <marquee>...</marquee>普通卷动
 <marquee behavior=slide>...</marquee>滑动
 <marquee behavior=scroll>...</marquee>预设卷动
 <marquee behavior=alternate>...</marquee>来回卷动
 <marquee direction=down>...</marquee>向下卷动
 <marquee direction=up>...</marquee>向上卷动
 <marquee direction=right></marquee>向右卷动
 <marquee direction='left'></marquee>向左卷动
 <marquee loop=2>...</marquee>卷动次数
 <marquee width=180>...</marquee>设定宽度
 <marquee height=30>...</marquee>设定高度
 <marquee bgcolor=ff0000>...</marquee>设定背景颜色
 <marquee scrollamount=30>...</marquee>设定卷动距离
 <marquee scrolldelay=300>...</marquee>设定卷动时间
 <!>字体效果
 <h1>...</h1>标题字(最大)
 <h6>...</h6>标题字(最小)
 <b>...</b>粗体字
 <strong>...</strong>粗体字(强调)
 <i>...</i>斜体字
 <em>...</em>斜体字(强调)
 <dfn>...</dfn>斜体字(表示定义)
 <u>...</u>底线
 <ins>...</ins>底线(表示插入文字)
 <strike>...</strike>横线
 <s>...</s>删除线
 <del>...</del>删除线(表示删除)
 <kbd>...</kbd>键盘文字
 <tt>...</tt> 打字体
 <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
 <plaintext>...</plaintext>固定宽度字体(不执行标记符号)
 <listing>...</listing> 固定宽度小字体
 <font color=00ff00>...</font>字体颜色
 <font size=1>...</font>最小字体
 <font style ='font-size:100 px'>...</font>无限增大
 <!>区断标记
 <hr>水平线
 <hr size='9'>水平线(设定大小)
 <hr width='80%'>水平线(设定宽度)
 <hr color='ff0000'>水平线(设定颜色)
 <br>(换行)
 <nobr>...</nobr>水域(不换行)
 <p>...</p>水域(段落)
 <center>...</center>置中
 <!>连结格式
 <base href=位址>(预设好连结路径)
 <a href=位址></a>外部连结
 <a href=位址target='_blank'></a>外部连结(另开新视窗)
 <a href=位址target='_top'></a>外部连结(全视窗连结)
 <a href=位址target='页框名'></a>外部连结(在指定页框连结)
 <!>贴图/音乐
 <img src=图片位址>贴图
 <img src=图片位址width='180'>设定图片宽度
 <img src=图片位址height='30'>设定图片高度
 <img src=图片位址alt='提示文字'>设定图片提示文字
 <img src=图片位址' border='1'>设定图片边框
 <bgsound src=mid音乐档位址>背景音乐设定
 <!>表格语法
 <table aling=left>...</table>表格位置,置左
 <table aling=center>...</table>表格位置,置中
 <table background=图片路径>...</table>背景图片的url=就是路径网址
 <table border=边框大小>...</table>设定表格边框大小(使用数字)
 <table bgcolor=颜色码>...</table>设定表格的背景颜色
 <table borderclor=颜色码>...</table>设定表格边框的颜色
 <table borderclordark=颜色码>...</table>设定表格暗边框的颜色
 <table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
 <table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
 <table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
 <table cols=参数>...</table>指定表格的栏数
 <table frame=参数>...</table>设定表格外框线的显示方式
 <table width=宽度>...</table>指定表格的宽度大小(使用数字)
 <table height=高度>...</table>指定表格的高度大小(使用数字)
 <td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
 <td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
 <!>分割视窗
 <frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
 <frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
 <frameset cols="20%,*">分割左右两个框架
 <frameset cols="20%,*,20%">分割左中右三个框架
 <分割上下两个框架
 <frameset rows="20%,*,20%">分割上中下三个框架
 <! - - ... - -> 注解
 <a href target> 指定超连结的分割视窗
 <a href=#锚的名称> 指定锚名称的超连结
 <a href> 指定超连结
 <a name=锚的名称> 被连结点的名称
 <address>....</address> 用来显示电子邮箱地址
 <b> 粗体字
 <base target> 指定超连结的分割视窗
 <basefont size> 更改预设字形大小
 <bgsound src> 加入背景音乐
 <big> 显示大字体
 <blink> 闪烁的文字
 <body text link vlink> 设定文字颜色
 <body> 显示本文
 <br> 换行
 <caption align> 设定表格标题位置
 <caption>...</caption> 为表格加上标题
 <center> 向中对齐
 <cite>...<cite> 用于引经据典的文字
 <code>...</code> 用于列出一段程式码
 <comment>...</comment> 加上注解
 <dd> 设定定义列表的项目解说
 <dfn>...</dfn> 显示"定义"文字
 <dir>...</dir> 列表文字标签
 <dl>...</dl> 设定定义列表的标签
 <dt> 设定定义列表的项目
 <em> 强调之用
 <font face> 任意指定所用的字形
 <font size> 设定字体大小
 <form action> 设定户动式表单的处理方式
 <form method> 设定户动式表单之资料传送方式
 <frame marginheight> 设定视窗的上下边界
 <frame marginwidth> 设定视窗的左右边界
 <frame name> 为分割视窗命名
 <frame noresize> 锁住分割视窗的大小
 <frame scrolling> 设定分割视窗的卷轴
 <frame src> 将html档加入视窗
 <frameset cols> 将视窗分割成左右的子视窗
 <frameset rows> 将视窗分割成上下的子视窗
 <frameset>...</frameset> 划分分割视窗
 <h1>~<h6> 设定文字大小
 <head> 标示文件资讯
 <hr> 加上分格线
 <html> 文件的开始与结束
 <i> 斜体字
 <img align> 调整图形影像的位置
 <img alt> 为你的图形影像加注
 <img dynsrc loop> 加入影片
 <img height width> 插入图片并预设图形大小
 <img hspace> 插入图片并预设图形的左右边界
 <img lowsrc> 预载图片功能
 <img src border> 设定图片边界
 <img src> 插入图片
 <img vspace> 插入图片并预设图形的上下边界
 <input type name value> 在表单中加入输入​​栏位
 <isindex> 定义查询用表单
 <kbd>...</kbd> 表示使用者输入文字
 <li type>...</li> 列表的项目( 可指定符号)
 <marquee> 跑马灯效果
 <menu>...</menu> 条列文字标签
 <meta name="refresh" content url> 自动更新文件内容
 <multiple> 可同时选择多项的列表栏
 <noframe> 定义不出现分割视窗的文字
 <ol>...</ol> 有序号的列表
 <option> 定义表单中列表栏的项目
 <p align> 设定对齐方向
 <p> 分段
 <person>...</person> 显示人名
 <pre> 使用原有排列
 <samp>...</samp> 用于引用字
 <select>...</select> 在表单中定义列表栏
 <small> 显示小字体
 <strike> 文字加横线
 <strong> 用于加强语气
 <sub> 下标字
 <sup> 上标字
 <table border=n> 调整表格的宽线高度
 <table cellpadding> 调整资料栏位之边界
 <table cellspacing> 调整表格线的宽度
 <table height> 调整表格的高度
 <table width> 调整表格的宽度
 <table>...</table> 产生表格的标签
 <td align> 调整表格栏位之左右对齐
 <td bgcolor> 设定表格栏位之背景颜色
 <td colspan rowspan> 表格栏位的合并
 <td nowrap> 设定表格栏位不换行
 <td valign> 调整表格栏位之上下对齐
 <td width> 调整表格栏位宽度
 <td>...</td> 定义表格的资料栏位
 <textarea name rows cols> 表单中加入多少列的文字输入栏
 <textarea wrap> 决定文字输入栏是自动否换行
 <th>...</th> 定义表格的标头栏位
 <title> 文件标题
 <tr>...</tr> 定义表格美一​​行
 <tt> 打字机字体
 <u> 文字加底线
 <ul type>...</ul> 无序号的列表( ​​可指定符号)
 <var>...</var> 用于显示变