HTML5保留了HTML原来的表单及表单控件，并对它们进行了功能上的增强。本节先介绍HTML原有的表单及表单控件。
表单元素
<form.../>元素用于生成输入表单，该元素不会生成可视化部分。在HTML 5规范以前，其他表单控件，如单行文本框、多行文本域、单选按钮、复选框等都必须放在<form.../>元素之内。<form.../>元素可以指定如下几个属性。
➢ action：指定当单击表单内的“确认”按钮时，该表单被提交到哪个地址。该属性既可指定一个绝对地址，也可指定一个相对地址。该属性必填。
➢ method：指定提交表单时发送何种类型的请求，该属性值可为get或post，分别用于发送GET或POST请求。通常建议发送POST请求。该属性必填。
➢ enctype：指定对表单内容进行编码所使用的字符集。
➢ name：指定表单的唯一名称，建议该属性值与id属性值保持一致。
➢ target：指定使用哪种方式打开目标URL（提交请求会打开另一个URL资源），与超链接的target可接受的属性值完全一样，该属性值可以是_blank、_parent、_self和_top四个值中之一。
提示
<form.../>元素的method属性非常重要，它指定了该表单提交请求的方式，表单默认以GET方式提交请求。GET请求和POST请求区别如下。
➢ GET方式的请求：直接在浏览器地址栏中输入访问地址所发送的请求，或提交表单发送请求时，该表单对应的<form.../>元素没有设置method属性，或设置method属性为get，这几种请求都是GET方式的请求。GET方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到请求参数名和值。且GET请求传送的数据量较小，一般不能大于2KB。
➢ POST方式的请求：这种方式通常使用提交表单的方式来发送，且需要设置<form.../>元素的method属性为post。POST方式传送的数据量较大，通常认为POST请求参数的大小不受限制，但往往取决于服务器的限制，POST请求传输的数据量总比GET传输的数据量大。而且POST方式发送的请求参数以及对应的值放在HTML HEADER中传输，用户不能在地址栏里看到请求参数值，安全性相对较高。
表单的enctype属性用于指定表单数据的编码方式，该属性有如下三个值。
➢ application/x-www-form-urlencoded：这是默认的编码方式，它只处理表单控件里的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式。
➢ multipart/form-data：这种编码方式会以二进制流的方式来处理表单数据，这种编码方式会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性值。
➢ text/plain：当表单的action属性值为mailto:URL的形式时使用这种编码方式比较方便，这种编码方式主要适用于直接通过表单发送邮件的方式。
单纯的<form.../>元素既不能生成可视化内容，也不包含任何表单控件，甚至不能提交表单，因此<form.../>元素必须与其他表单控件元素结合使用。
使用input元素
<input.../>元素是表单控件元素中功能最丰富的，如下几种输入元素都是通过<input.../>元素生成的。
➢ 单行文本框：指定<input.../>元素的type属性为text即可。
➢ 密码输入框：指定<input.../>元素的type属性为password即可。
➢ 隐藏域：指定<input.../>元素的type属性为hidden即可。
➢ 单选框：指定<input.../>元素的type属性为radio即可。
➢ 复选框：指定<input.../>元素的type属性为checkbox即可。
➢ 图像域：指定<input.../>元素的type属性为image即可。当type="image"时，可以为<input.../>元素指定width和height两个属性。
➢ 文件上传域：指定<input.../>元素的type属性为file即可。
➢ 提交、重设、无动作按钮：分别指定<input.../>元素的type属性为submit、reset或button即可。
提示
在上面这些表单控件中，单行文本框、密码输入框都用于接收用户输入，而隐藏域不能接收用户输入，也不能生成可视化部分，它用于提交额外的请求参数，请求参数的值就是该隐藏域的value属性值，因此定义隐藏域的同时应指定value属性值。
单选框、复选框不能接收用户输入，因此定义它们时同时也会指定value属性值，用于设置它们所对应的请求参数值。对于单选框、复选框而言，当它们被勾选后，它们才会生成对应的请求参数。
文件上传域会生成一个单行文本框和一个“浏览”按钮，该文件上传域允许用户浏览本地磁盘文件，并将该文件上传到服务器。
图像域和提交按钮的作用基本一样，单击它们都会导致表单被提交，区别是图像域是一个图像按钮。
重设按钮的作用是清空表单内用户的输入，将表单内所有表单控件的值恢复到初始状态。
无动作按钮，看它的名称就知道，它只是一个按钮，在默认情况下，单击该按钮对表单不会有任何作用。通常我们可以为该按钮编写JavaScript脚本来响应它的单击、双击等事件。
<input.../>元素可以指定如下几个属性。
➢ checked：设置单选框、复选框初始状态是否处于选中状态，该属性值只能是checked，表示初始即被选中。只有当type属性值为checkbox或radio时才可指定该属性。
➢ disabled：设置首次加载时禁用此元素。该属性值只能是disabled，表示该元素被禁用，则该元素无法获得输入焦点、无法选中、无法在其中输入文本，无法响应鼠标单击、双击等事件。当type="hidden"时不能指定该属性。
➢ maxlength：该属性值是一个数字，指定文本框中所允许输入的最大字符数。
➢ readonly：指定该文本框内的值不允许用户修改（可以使用JavaScript脚本修改）。
➢ size：该属性值是一个数字，指定该元素的宽度。当type="hidden"时不能指定该属性。
➢ src：指定图像域所显示图像的URL，只有当type="image"时才可指定该属性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 表单 </title>
</head>
<body>
<form action="http://www.vs2022.com" method="get">
单行文本框：<input id="username" name="username" type="text" /><br />
不能编辑的文本框：<input id="username2" name="username" type="text"
readonly="readonly" /><br />
密码框：<input id="password" name="password" type="password" /><br />
隐藏域：<input id="hidden" name="hidden" type="hidden" /><br />
第一组单选框：<br />
<input id="color" name="color" type="radio" value="red"/>
<input id="color2" name="color" type="radio" value="green" />
<input id="color3" name="color" type="radio" value="blue"/><br />
第二组单选框：<br />
<input id="gender" name="gender" type="radio" value="male"/>
<input id="gender2" name="gender" type="radio" value="female" /><br />
两个复选框：<br />
<input id="website" name="website" type="checkbox"
value="leegang.org" />
<input id="website2" name="website" type="checkbox"
value="crazyit.org" /><br />
文件上传域：<input id="file" name="file" type="file"/><br />
图像域：<input type="image" src="images/wjc.gif" alt="疯狂Java联盟"/><br />
下面是四个按钮：<br />
<input id="ok" name="ok" type="submit" value="提交" />
<input id="dis" name="dis" type="submit" value="提交"
disabled="disabled" />
<input id="cancel" name="cancel" type="reset" value="重填"/>
<input id="no" name="no" type="button" value="无动作" />
</form>
</body>
</html>
使用label定义标签
<label.../>元素用于在表单元素中定义标签，这些标签可以对其他可生成请求参数的表单控件元素（如单行文本框、密码框等）进行说明，
<label.../>元素可以指定一个for属性，该属性指定该标签与哪个表单控件关联。当用户单击表单控件前面的标签时，该表单控件就可以获得输入焦点。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> label元素 </title>
</head>
<body>
<form action="http://www.vs2022.com" method="get">
<label for="username">单行文本框：</label>
<input id="username" name="username" type="text" /><br />
<input id='ok' type="submit" value="登录疯狂Java联盟" />
</form>
</body>
</html>
使用button定义按钮
<button.../>元素用于定义一个按钮，在<button.../>元素的内部可以包含普通文本、文本格式化标签、图像等内容，这也正是<button.../>按钮和<input.../>按钮的不同之处。
<button.../>按钮与<input type="button" />相比，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是该按钮的内容，其中包括任何可接受的正文内容，比如文本或图像。
<button.../>元素可以指定如下几个属性。
➢ disabled：指定是否禁用此按钮。该属性值只能是disabled，或者省略属性值。
➢ name：指定该按钮的唯一名称。该属性值应该与id属性值保持一致。
➢ type：指定该按钮属于哪种按钮，该属性值只能是button、reset或submit其中之一。
➢ value：指定该按钮的初始值。此值可通过脚本进行修改。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> button生成按钮 </title>
</head>
<body>
<form action="http://www.vs2022.com" method="get">
<button type="button"><b>提交</b></button><br />
</form>
</body>
</html>
列表框和下拉菜单
<select.../>元素用于创建列表框或下拉菜单，该元素必须和<option.../>元素结合使用，每个<option.../>元素代表一个列表项或菜单项。
与其他表单控件不同的是，<select.../>元素本身并不能指定value属性，列表框或下拉菜单控件对应的参数值由<option.../>元素来生成，当用户选中了多个列表项或菜单项后，这些列表项或菜单项的value值将作为该<select.../>元素所对应的请求参数值。
<select.../>元素可以指定如下几个属性。
➢ disabled：设置禁用该列表框和下拉菜单，该属性的值只能是disabled或省略属性值。
➢ multiple：设置该列表框和下拉菜单是否允许多选，该属性的值只能是multiple，即表示允许多选。一旦设置允许多选，<select.../>元素就会自动生成列表框。
➢ size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，<select.../>元素就会自动生成列表框。
一个<select.../>元素到底是生成列表框，还是生成下拉菜单，完全由是否指定了size或multiple属性来决定，只要为<select .../>元素指定了这两个属性之一，浏览器就会生成列表框，否则就是下拉菜单。
在<select.../>元素里，只能包含如下两种子元素。
➢ <option>：用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的文本。
➢ <optgroup.../>：用于定义列表项或菜单项组。该元素里只能包含<option.../>子元素，处于<optgroup.../>里的<option.../>就属于该组。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> select元素 </title>
</head>
<body>
<form action="http://www.vs2022.com" method="post">
下面是简单下拉菜单：<br />
<select id="skills" name="skills">
<option value="java">Java语言</option>
<option value="c">C语言</option>
<option value="ruby">Ruby语言</option>
</select><br /><br /><br />
下面是允许多选的列表框：<br />
<select id="books" name="books"
multiple="multiple" size="4">
<option value="java">疯狂Java讲义</option>
<option value="android">疯狂Android讲义</option>
<option value="ee">轻量级Java EE企业应用实战</option>
</select><br />
下面是允许多选的列表框：<br />
<select id="leegang" name="leegang"
multiple="multiple" size="6">
<optgroup label="疯狂Java体系图书">
<option value="java" label="aaaaaaaa">疯狂Java讲义</option>
<option value="android">疯狂Android讲义</option>
<option value="ee">轻量级Java EE企业应用实战</option>
</optgroup>
<optgroup label="其他图书">
<option value="struts">Struts 2.1权威指南</option>
<option value="ror">RoR敏捷开发最佳实践</option>
</optgroup>
</select><br />
<button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>
使用textarea定义文本域
<textarea.../>元素用于生成多行文本域，<textarea.../>元素可以指定如下几个属性。
➢ cols：指定文本域的宽度，该属性必填。
➢ rows：指定文本域的高度，该属性必填。
➢ disabled：指定禁用该文本域。该属性值只能是disabled，当此文本域首次加载时禁用此文本域。
➢ readonly：指定该文本域只读。该属性值只能是readonly。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 多行文本域 </title>
</head>
<body>
<form action="http://www.vs2022.com" method="post">
简单多行文本域：<br />
<textarea cols="20" rows="2"></textarea><br />
只读的多行文本域：<br />
<textarea cols="28" rows="4" readonly="readonly">
疯狂Java讲义
轻量级Java EE企业应用实战
</textarea><br />
<button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。