表单的内容
创建表单后，就可以在表单中放置控件以接受用户的输入。这些控件通常放在<form>……</form>标签对之间一起使用，也可以在表单之外用来创建用户界面。
表单标签及表单属性
在HTML中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于一个容器标签，其他表单标签需要在它的范围中才有效，<input>便是其中一个，用以设定各种输入资料的方法。表单标签有两个常用的属性，如下表所示。
<form>标签的属性
|
属性 |
说明 |
|
Action |
此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为action="URL"。如果action属性的值为空，则默认表单提交到本页。 |
|
Method |
此属性告诉浏览器如何将数据发送给服务器，他指定向服务器发送数据的方法（用post方法还是用get方法）。如果值为get，浏览器将创建一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL中指定的脚本，以进行处理。如果将值指定为post，表单上的数据会作为一个数据块发送到脚本，而不不使用请求字符串。语法为method=(getr|post) |
采用post和get方法提交表单信息后浏览器地址栏的变化。
以post方式提交表单，在名字和密码标签后，分别输入用户名lucker和密码123456，单击提交按钮，地址栏中的URL信息没有发生变化，这就是以post方式提交表单的特点。
以get方式提交表单，在页面单击提交按钮提交表单信息之后，在浏览器的地址栏中，URL信息会发生变化。仔细观察不难发现，在URL信息中清晰地显示出表单提交的数据内容，即刚刚输入的用户名和密码都完全显示在地址栏中，清晰可见。
1、即，psot提交方式不会改变地址栏状态，表单数据不会被显示。
2、即，使用get提交方式，地址栏状态会发生变化，表单数据会在URL信息中显示。
所以，基于以上两点区别，post方式提交的数据安全性要明显高于get方式提交的数据。
表单元素及格式
<input>标签中有很多属性，下面对一下比较常用的属性进行整理。
<input>元素的属性
|
属性 |
说明 |
|
Type |
此属性指定表单元素的类型。可用的选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button。默认选择为text |
|
Name |
此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按名称来标识他们，如text1、text2等 |
|
Value |
此属性是可选属性，它指定表单元素的初始值。但如果type为radio，则必须指定一个值 |
|
Size |
此属性指定表单元素的初始宽度。如果type为text或password，这表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位 |
|
Maxlength |
此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大 |
|
Checked |
指定按钮是否是被选中的。当输入类型为radio和checkbox时，使用此属性 |
1、文本框
在表单中最常用、最常见的表单输入元素就是文本框（text）,它用于输入单行文本信息，如用户名的输入框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text就可以了。还可以分别使用size属性和value属性对登录名的长度及形姓氏的默认值进行设置。还可以使用maxlength属性指定输入的数据长度。例如，登录名的长度不得超过20个字符，代码如下。
<p>登录名：
<input name="sname" type="text" size="30" maxlength="20">
</p>
上面的代码设置结果是，文本框显示的长度为30，而允许输入的最多字符个数为20。
对于size属性和maxlength属性一定要能够严格的进行区分作用，size属性用于指定文本框的长度，而maxlength属性用于指定文本框输入的数据长度，这就是二者的区别。
2、密码框
密码框与文本框类似，区别在于需要设置文本框控件的type属性设为password。设置了type属性后，在密码框输入的字符全部都以黑色实心的圆点来显示，从而实现了对数据的处理。
3、单选按钮
单选按钮空间用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选择一个选项。只有从组中选定的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显式的value属性。
如果希望在页面加载时，单选按钮有一个默认的选项，那么可以使用checked属性。例如，性别选项默认选中为“男”，则修改代码如下。
<input name="gen" type="radio" class="input" value="男" checked="checked">男
4、复选框
复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框。复选框的命名与单选按钮有些区别，既可以多个复选框选用相同的名称，也可以各自具有不同的名称，关键是看如何使用复选框。用户可以选中某个复选框，也可以取消选中。一旦用户选中了某个复选框，在表单提交时，会将复选框的name值和对应的value值一起提交。
与单选按钮一样，checkbox复选框也可以设置默认选项，同样使用checked属性进行设置。例如，将爱好中的运动选项默认选中，则代码修改如下。
<input type="checkbox" name="cb1" value="sports checked="checked">运动
单选按钮应具有相同的名字，便于互斥选择；而复选框的名称则要根据应用环境来确定是否相同。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能够同时获取。例如，兴趣爱好，一个人有多个兴趣爱好，这样复选框设置相同名称，以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。否则，每个选项都需要单独进行读取，从而降低了效率。
5、列表框
列表框是为了用户快速、方便、正确的选择一些选项，并且节省页面空间，它是通过<select>标签和<option>标签来实现的。<select>标签用于显示可供用户选择的下拉列表，每个选项由一个<option>标签表示，<select>标签必须包含至少一个<option>标签。
语法：
<select name="指定列表名称" size="行数">
<option value="可选项的值" selected="selected">……</option>
<option value="可选项的值" >……</option>
</select>
其中，再有多条选项可供用户滚动查看时，size确定列表中可同时看到的行数；selected表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。
下拉列表框中添加的option选项会按照顺序进行排列，但是如果希望其中某个选项默认显示，就需要使用selected属性来进行设置。例如，让月份默认显示十月，则相应代码修改如下。
<option value="10" selected="selected">十月</option>
6、按钮
按钮在表单中经常用到，在HTML中按钮分为3种，分别是普通按钮（button）、提交按钮（submit）和重置按钮（reset）。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。
语法：
<input type="reset" name="Reset" value="重填">
其中，type="button"表示是普通按钮；type="submit"表示是提交按钮；type="reset"表示是重置按钮。Name用来给按钮命名，value用来设置显示在按钮上的文字。
/1/reset按钮：用户单击该按钮后，不论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到初始状态，而填写或输入的数据将被清空。
/2/submit按钮：用户单击该按钮后，表单将会提交到action属性所指定的URL，并传递表单数据。
/3/button按钮：属于普通的按钮，需要与事件关联使用。Onclick事件
说明：onclick事件是表单元素被点击时所激发的事件，并只限于按钮。在事件中可以调用相应的脚本代码，执行一些特定的客户端程序。
实现图片按钮的效果有多种方法，比较简单的方式就是配合使用“type”和“src”属性，如下所示。
<input type="image" src="images/login.gif" />
7、多行文本域
用于在网页中输入两行或两行以上的文本时，它使用的标签是<textarea>。
语法：
<textarea name="textarea" cols="显示的列的宽度" rows="显示的行数">
文本内容
</textarea>
其中，cols用来指定多行文本框的列的宽度；rows属性用来指定多行文本框的行数。在<textarea>……</textarea>标签对中不能使用value属性来赋初始值。
8、文件域
文件域的作用是用于实现文件的选择，在应用时只需把type属性设为file即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本、图片等。
在使用文件域时，需要特别注意的是，包含文件域的表单，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的“entype”编码书型为“multipart/from-data”，表示将表单数据分为多部分提交。
设置表单的隐藏域
将tytpe属性设置为hidden隐藏类型即可创建一个隐藏域。
表单的只读与禁用设置
在某些情况下，需要对表单元素进行设置，即设置表单元素为只读或禁用。他们常见的应用场景如下。
A、只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。
B、禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮；播放器控件在播放状态时，不能单击“播放”按钮等。
制度和禁用效果分别通过设置“readonly”和“disabled”属性来实现。
通常只读属性用于不希望用户对数据进行修改的场合，而禁用则可以配合其他控件使用。最常见的就是在安装程序时，如果用户不选中“同意安装许可协议”的复选框，则“安装”或“下一步”按钮无法使用“
规范：W3C XHTML标准中，规定属性值不能省略，要求写为属性=“属性值”的形式。
例如，下拉列表框的默认选中，应写为selected="selected"，而不能仅写selected。同理，复选框的默认选中，应写为checked="checked"，只读应写为readonly="readonly"，禁用应写为disabled="disabled"。
语义化的表单
1、域
在表单中，可以使用<fieldset>标签实现域的定义。什么是域呢？简单地说就是将一组表单元素放到<fieldset>标签内，浏览器就会以特殊的方式来显示他们，这些表单元素可能有特殊的边界、效果。
使用<fieldset>标签后，该标签会将表单内容进行整合，从而生成一组与表单相关的字段。
2、域标题
所谓域标题就是给创建的域设置一个标题。设置域标题需要使用一个新的标签，即<legend>标签，在该标签内的内容就被视为域的标题。
通常<fieldset>标签与<legend>标签会一起使用。
表单元素的标注
对表单元素进行标注，这样做的目的就是为了增强鼠标的可用性。这是因为使用表单元素标注时，在客户端呈现的效果不会有任何特殊的改进。但是如果当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上。
为表单元素进行标注时，需要使用<label>标签，该标签的语法如下。
语法：
<label for="表单元素的id">标注的文本</label>
在<label>标签中，使用了for属性来指定当鼠标单击标注文本时，焦点对应的表单元素。
<form>
请选择性别：
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
</form>
上面代码中，对于表单元素而言，其name属性与id属性都是必须的。Name属性由表单负责处理，而id属性是给<label>标签和表单元素进行关联使用的。
用户在选择性别是，可以不用单击单选按钮，而是可以用鼠标直接单击与单选按钮对应的文本。例如，在本例中，鼠标单击文本“男”时，则性别男对应的单选按钮被自动选中。