表单由两个重要的部分组成，一是在页面中看到的表单界面，二是处理表单数据的程序，它可以是客户端应用程序，也可以是服务器端程序。
表单的作用是可以与站点的访问者进行交互，或收集信息，然后提交至服务器进行处理，表单可以包含各种表单对象。
在网页中<form></form>标记对用来创建一个表单，即定义表单的开始和结束位置，标记对之间的一切都属于表单的内容。在表单的<form>标记中，可以设置表单的基本属性，包括表单的名称，处理程序和传达方法等。一般情况下，表单的处理程序action和传达方法method是必不可少的参数。
其基本语法为：<form action="表单的处理程序" method="传送方法" name="表单名称" target="目标窗口的打开方式">......</form>
语法说明：
表单的处理程序action是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这个地址可以是绝对地址，也可以是相对地址，还可以是一些其他形式的地址。
传送方法method的值一般有两种，即get和post。
目标窗口的打开方式target有4个选项：_blank _parent _self _top。
其中_blank为将要链接的文件载入到一个未命名的新窗口；_parent为将链接的文件载入含有该链接框架的父框架集或父窗口中；_self为将链接的文件载入该链接所在的同一个框架或窗口中；_top在整个浏览器窗口中载入所以链接的文件，因而会删除所以框架。
1.输入域标签<input>
基本语法：<input type="value" name="表单对象的名称">
语法说明：对于大量通常的表单控件，可以使用<input>标签来进行定义，其中包括文本字段，多选列表，可点击的图像和提交按钮等。虽然input标签中有许多属性，但是对于每个元素来说，只有type属性和name属性是必需的（提交或重置按钮只有type属性）。
其中type属性所包含的属性值有：text（文本字段），password（密码域），radio（单选按钮），checkbox（复选框），button（普通按钮），submit（提交按钮），reset（重置按钮），image（图像域），hidden（隐藏域），file（文件域）
- text定义用户可输入文本的单行输入字段。
- password 定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。
- radio定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
- checkbox定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
- button定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
- submit定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面
- reset定义重置按钮。重置按钮会清除表单中的所有数据。
- image 定义图像形式的提交按钮。
- hidden定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
- file 用于文件上传。
2.文本域标签<textarea>
当 浏览者要填入多行文本时，就需要用到文本域而不是文本字段。与其他大多数表单对象不同，文本域使用的是textarea标记而不是input标记。
基本语法：<textarea name="文本域名称" cols="列数" rows="行数"></textearea>
语法说明：在语法中，不能使用value属性来建立一个在文本域中显示的初始值。应当在textarea标记的开头和结尾之间包含想要在文本域内显示的任何文本。
3.选择域标签<select></option>
name属性是用于对提交到服务器的表单数据进行标识，或者在客户端通过JavaScript引用表单数据，只有设置了name属性的表单元素才能在提交表单是传递他们的值。菜单和列表主要用来选择给定答案中的一种，这类选择中往往答案比较多。菜单和列表主要是通过<select>和<option>标记来实现的。
基本语法：<select name="下拉列表名称" >
<option value="选项值" selected>选项设置</select>
语法说明：在语法中，选项值是提交表单时的值，而选项显示内容才是真正的页面中显示的选项内容。selected表示该选项在默认情况下是选中的，一个下拉列表中只能有一个默认选项被选中。
下拉列表的宽度是由<option>标记中包含的最长文本的宽度来决定的。
在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条可以看到所有列表项。
基本语法：<select name="列表项名称" size="显示的列表项数" multiple>
<option value="选项值" selected>选项显示内容......</select>
语法说明：在语法中，size用于设置在页面中显示的最多列表项，当超过这个值会出现滚动条。
对于每个option标记都使用value属性是为了在处理表单是尽可能地避免混淆。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="lianxi2.css">
</head>
<!--<form action="#" method="post" name="typeform">
<label>配送类型：</label>
<input type="radio" name="type" checked="checked"><label><a href="#">全部</a></label>
<input type="radio" name="type"><label><a href="#">京东配送</a></label>
<input type="radio" name="type"><label><a href="#">第三方配送</a></label>
</form>-->
<form action="#" method="post">
<p>账号：
<input type="text" name="zahnghao"/></p>
<p>密码：
<input type="password" name="password"/>
<input type="reset" value="重置"/></p>
<input type="button" value="注册"/>
<input type="submit" value="登录"/>
<p>用户类型：
<input type="radio" name="admi" id="admi"/><label for="admi">普通用户</label>
<input type="radio" name="admi" id="admi"/><label for="admi">VIP用户</label>
<input type="button" name="admi"value="VIP办理"/>
</p>
<p>你最喜欢的运动：
<input type="checkbox" name="sport" id="sport"/><label for="sport">爬山</label>
<input type="checkbox" name="sport" id="sport"/><label for="sport">跑步</label>
<input type="checkbox" name="sport" id="sport"/><label for="sport">游泳</label>
<input type="checkbox" name="sport" id="sport"/><label for="sport">跳绳</label>
<input type="submit" value="提交"/></p>
<textarea name="textarea" id="textarea" cols="60" rows="6">请在此处添加留言</textarea>
<label for="textarea"></label>
<p>出生日期：
<label for="select"></label>
<select name="select" id="select" size="0">
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select>年
<label for="select1"></label>
<select name="select1" id="select1" size="0">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>月
<label for="select2"></label>
<select name="select2" id="select2" size="0">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>日
</p>
</form>
<body>
</body>
</html>其中：<label>标签是为input元素定义标注的。label不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在label元素内点击文本，就会触发次控件，即当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
label标签的for属性应当与相关元素的id属性相同。
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
