表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。表单在网上随处可见，可用于登录页面输入账号、客户留言、搜索产品等。
一、表单标签
网页上由具有可输入表项即项目选择等控件所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单，<form>标签是成对出现的，在开始标签<form>和结束标签</form>之间的部分就是一个表单的内容。
在一个HTML页面中允许有多个表单，表单的基本语法及格式为
<form name="表单名" action="URL" method="get|post">
…
</form><form>标签主要用于表单结果的处理和传送，常用属性的含义如下。
① name属性：表单的名字，在一个网页中用于唯一识别一个表单。
② action属性：表单处理的方式，往往是E-mail地址或网址。
③ method属性：表单数据的传送方向，是获得（GET）表单还是送出（POST）表单。
二、表单元素
常见的表单元素
| 表单元素 | 功能 |
|---|---|
| input | 该标签用来定义用户可输入数据的输入字段 |
| keygen | 该标签用于表单的密钥对生成器字段 |
| object | 该标签用来定义一个嵌入的对象 |
| output | 该标签用来定义不同类型的输出，比如脚本的输出 |
| select | 该标签用来定义下拉列表/菜单 |
| textarea | 该标签用来定义一个多行的文本输入区域 |
1.<input>元素
- <input>元素用来定义用户输入数据是输入字段
<input>元素的基本语法及格式为
<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y"/>根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。
属性值：
1）text：文本框
- 格式：
<input type="text" name="文本框名">
- 效果：
2）password：密码框
- 格式：
<input type="password" name="密码框名"> - 效果：
3）submit、reset、button、image：按钮
- 格式：
<input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="普通按钮"> <input type="image" src="图片来源"> - 效果：
4）checkbox：复选框(checked：默认选中)
- 格式：
<input type="checkbox" name="复选框名" value="提交值" checked="checked"> - 效果：
5） radio：单选框(checked：默认选中)
- 格式：
<input type="radio" name="单选框名" value="提交值" checked="checked"> - 效果：
6） URL输入框
- 格式：
<input type="url" name="url输入框名">
7）number数值输入框
- 格式：
<input type="number" name="数值输入框名">
2.选择栏<select>
当浏览者选择的项目较多时，如果使用选择钮来选择，会占据页面的较大空间，这时可以使用<select>标签和<option>标签来设置选择栏。选择栏可分为弹出式和字段式两种。
作用：<select>标签为下拉菜单的整体；<option>标签为下拉菜单的每一项。
格式为：
<select size="x" name="控制操作名" multiple>
<option value="可选择的内容" selected="selected">…</option>
…
</select>1）size：可选项，用于改变下拉框的大小。size属性的值是数字，表示显示在列表中选项的数目，当size属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，size默认值为1。
2）name：选择栏的名称。
3）multiple：如果选择该属性，表示允许用户从列表中选择多项。
4）selected：用来指定选项的初始状态，表示该选项在初始时已经被选中。
5）value：用来设置当某一选项被选中并提交后，浏览器传送给服务器的数据。
选择栏有两种形式：字段式选择栏和弹出式选择栏。主要区别在于：前者在<select>中的size属性值取大于1的值，此值表示在选择栏中不拖动滚动条可以显示的选项的数目。
例如：
<body>
<form>
<!-- 没有设置size值，一次可显示的列表项数默认值为1。 -->
<select name="age" >
<option value="15岁以下">15岁以下</option>
<option value="15--22岁">15--22岁</option>
<option value="23--30岁" selected="selected">23--30岁</option>
<!-- 默认选中该项 -->
<option value="31--40岁">31--40岁</option>
<option value="41--50岁">41--50岁</option>
<option value="50岁以上">50岁以上</option>
</select>
</form>
</body>运行的结果为
在上面的示例代码中，菜单中的选项“23--30岁”设置了selected="selected"属性值，因此，页面加载时显示的默认选项为“23--30岁”。
三、表单分组
大型表单容易在视觉上产生混乱，通过对表单分组可以将表单上的元素在形式上进行组合，达到一目了然的效果。常见的分组标签有<fieldset>标签和<legend>标签，格式为
<form>
<fieldset>
<legend>分组标题</legend>
表单元素…
</fieldset>
…
</form>其中，<fieldset>标签可以看作表单的一个子容器，将所包含的内容以边框环绕的方向显示，<legend>标签则是用于为<fieldset>边框添加相关的标题。
四、使用表格布局表单
在实际应用中，可以采用以下两种方法布局表单：①使用表格布局表单；②使用CSS样式布局表单。
以下是使用表格布局表单练习：
<body>
<form action="">
<h2 align="center" style="color: red;">用户注册</h2>
<table border="1" width="500" height="100" bordercolor="red" bgcolor="pink" align="center">
<tr>
<td align="right" width="100" height="20">用户名</td>
<td width="400" height="20"><input type="text">*</td>
</tr>
<tr>
<td align="right">密码</td>
<td><input type="password">*</td>
</tr>
<tr>
<td align="right">确认密码</td>
<td><input type="text">*</td>
</tr>
<tr>
<td align="right">性别</td>
<td><input type="radio" name="rd">男<input type="radio" name="rd">女</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">联系电话</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">电子邮件</td>
<td><input type="text">*</td>
</tr>
<tr>
<td align="right">最高学历</td>
<td><input type="radio" name="grade">中专
<input type="radio" name="grade">大专
<input type="radio" name="grade">本科
<input type="radio" name="grade">研究生</td>
</tr>
<tr>
<td align="right">爱好</td>
<td><input type="checkbox">上网<input type="checkbox">篮球<input type="checkbox">听歌<input type="checkbox">下棋</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"> <input type="submit" value="重写"></td>
</tr>
</form>
</table>
</body>运行的结果为
