本章目录
3.1 表单
3.1.1 表单概述
在遨游网络世界时，我们除了浏览网页信息，有时还需要将一些数据输入到网页中，经过网页提交至服务器。例如，我们登录邮箱时，需要输入用户名和密码。注册网站的用户时需要输入用户的信息，用户输入到网页中的信息均通过表单中的各表单元素来接收，然后传递给服务器。
表单在网页开发中很常见，典型的应用场景有以下几种：
网站的登录、注册。
填写订单信息。
填写调查问卷。
输入关键字搜索。
以注册页面为例，注册表单中包含了以下表单元素：
- 文本框：常用于输入姓名、用户名和电子邮件等。
- 密码框：用于输入密码，显示为代替字符，如星号“*”。
- 单选按钮：在多个选项中选择 1 个，如性别。
- 复选框：在多个选项中可以选择 1 个或多个，如爱好。
- 下拉列表：在多个下拉选项中选择 1 个，如省份、月份等。
- 按钮：通常用于执行表单信息的提交或取消等功能。
3.1.1 表单概述（续）
表单是 HTML5 的一个重要部分，主要用于采集和提交用户输入的信息。例如，登录时输入的用户名和密码就是通过表单实现数据提交，如果没有表单，输入的登录信息将无法被网站获取。
3.1.2 表单标签
在 HTML 中，<form> 和 </form> 标签对用来创建一个表单，即定义表单的开始和结束位置，在标签对之间的一切都属于表单的内容。在表单的 form 标签中，还可以设置表单的基本属性，包含表单的名称、处理程序和传送方法等。
语法：
<form name=“表单名字” action=“URL” method=“get/post”>
表单元素
</form>
name 属性用于设置表单的名称。
action 属性用于设置处理表单提交数据的 url。
method 属性用于定义浏览器将表单中的信息提交给服务器端的方式，其值可以取 get 和 post 两种，默认为get。
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 无标题文档 </title>
</head>
<body>
<h2> 处理登录 ........</h2>
</body>
</html>
<body>
<h2> 用户登录 </h2>
<hr/>
<form name="login" action="login_success.html">
用户名 :<input type="text" name="username" /><br/> 密 码 :
<input type="password" name="password" /><br/>
<input type="submit" value=" 登录 " />
<input type="reset" value=" 取消 " />
</form>
</body>
3.1.3 表单数据的提交方式
表单的 method 属性用来定义处理程序从表单中获得信息的方式，它决定了表单中已收集的数据是用什么方法发送到服务器的。传送方式的值有两种选择，即 get 和 post。
get 方式提交：使用 get 方式提交数据时，表单数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，但缺点是数据长度不能太长。
post 方式提交
使用 post 时，表单数据是与 URL 分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比 get 慢。
两种提交方式在使用上的主要区别：
安全性。
- 使用 get 方式提交时，提交的信息会出现在浏览器的地址栏中，post 方式提交时不会出现在地址栏中。在对安全性有要求的情况下，不建议使用 get 方式，而应该使用 post 方式。
提交数据的长度。
- 使用 get 方式提交的数据有长度限制，使用 post 方式提交的数据没有长度限制，所以当使用表单提交的数据比较大时，如文件上传，建议使用 post 方式。
3.2 输入框和按钮
3.2.1 表单元素概述
表单中大部分表单元素均使用 input 标签，只是它们的属性设置不同，其统一用法如下：
语法：
<input name=“表单元素名称” type=“类型” value=“值” size=“显示宽度”
maxlength=“能输入的最大字符长度” checked=“是否选中”/>
input标签属性
| 属性 |
说明 |
| type |
指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text |
| name |
指定表单元素的名称 |
| value |
指定表单元素的初始值 |
| size |
指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位 |
| maxlength |
指定可在 text 或 password 元素中输入的最大字符串，默认无限制 |
| checked |
此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性 |
| readonly |
当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改 |
HTML5 表单常用控件的标签
| 表单控件标签写法 |
说明 |
| <input type="text"> |
单行文本输入框。使用的是 input 标签和 type 属性 |
| <input type="submit"> |
将表单中的信息提交给表单中 action 属性所指向的地址 |
| <input type="checkbox"> |
复选框 |
| <input type="radio"> |
单选钮 |
| <input type="password"> |
密码输入框（输入的文字用 * 表示） |
| <select> |
下拉框 |
| <textArea> |
多行文本输入框 |
3.2.2 输入框
文本框：表单中最常用的输入元素就是文本框（text），它提供给用户输入的单行文本信息，如用户名的输入。文本框的用法很简单，只需将 input 标签的 type 属性设置为 text 即可。
语法：
<input name=“表单元素名称” type=“text”id=“表单元素名称” value=“值” />
示例：
<body>
<form name="myform" action="" method="post">
姓 名 :
<input type="text" name="username" size="20" value="jack" />
<br/>
邮箱 :
<input type="text" name="username" value="xxx@xxx" />
<br/>
</form>
</body>
密码框：密码框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”。
语法：
<input type=“password” id=“userPwd” name=“userPwd”/>
示例：
<body>
<form name="myform" action="" method="post">
姓名 :<input type="text" name="username" size="20"/><br/>
密码 :<input type="password" name="pwd"/><br/>
</form>
</body>
多行文本域：多行文本域用于显示或输入两行或两行以上的文本，它使用的标签是 textarea。
语法：
<textarea name="指定名称" cols="列数" rows="行数">
文本域的内容
</textarea>
其中，cols 用于指定多行文本域的列数，rows 用于指定多行文本域的行数。在 <textarea>……<textarea> 标签中不能使用 value 属性来初始化文本域中的内容。
示例：
<body>
<form name="myform" action="" method="post">
<h4> 自我介绍 </h4>
<textarea cols="50" rows="5"> 请输入自我介绍的内容 .......</textarea>
</form>
</body>
3.2.3 按钮
重置、提交与普通按钮
根据按钮的功能，分为提交按钮、重置按钮和普通按钮。
- 提交按钮用于提交表单数据，
- 重置按钮用于清空现有表单数据，
- 普通按钮通常用于调用 JavaScript 脚本。
在用法上，为不同的按钮设置不同的 type 属性值即可；如果要禁用按钮，则使用 disabled 属性设置其取值为 disabled 即可。
语法：
<input type="submit" value="提交按钮的显示值" name="名称"/>
<input type="reset" value="重置按钮的显示值" name="名称"/>
<input type="button" value="普通按钮的显示值" name="名称"/>
示例：
<body>
<form name="myform" action=" method=""post">
姓名 :<input type="text" name="username" size="20" />
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="购买"/>
</form>
</body>
图片按钮：有时候为了达到比较好的视觉效果，可以使用图片代替按钮来提交或者重置表单数据。
语法：
<input type="image" src ="logo.gif" alt = "提交" name="imgsubmit" />
input标签的type="image"类似于type="submit"，不同的是，type="image"以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。
示例：
<body>
<form>
输入商品编号：
<input type="text" name="yourname“/><br><br>
<input type="image" src="buy.gif" alt=" 提交 " name="imagesubmit“ />
</form>
</body>
3.3 单选按钮、复选框和下拉框
3.3.1 单选按钮
用于一组相互排斥的选项，组中的每个选项应具有相同的名称（name），以确保用户只能选择一个选项，单选按钮对应的 type 属性为 radio。
语法：
<input type ="radio" name="名称" value ="" checked=" checked "/>
用 checked 属性表示缺省已选的选项：<input type=“radio” name=“fruit” value = “Orange” checked> 桔子。桔子选项将默认为选中状态。
示例：
<body>
请选择你喜欢的水果：<br>
<form>
<input type="radio" name="fruit" value="Apple“ /> 苹果 <br>
<input type="radio" name="fruit" value="Orange“ /> 桔子 <br>
<input type="radio" name="fruit" value="Mango“ /> 芒果 <br>
<input type="submit" value=" 提交 ">
</form>
</body>
3.3.2 复选框
复选框用于选择多个选项，将 input 的 type 属性设置为 checkbox 就可以创建一个复选框。
语法：
<input type ="checkbox" name="名称" checked=" checked "/>
用 checked 属性表示缺省已选的选项，写法是：
<input type="checkbox" name="fruit" value ="orange" checked>桔子。桔子选项将默认为选中状态。
示例：
<body>
请选择你喜欢的水果：<br>
<form>
<input type="checkbox" name="fruit" value="apple“ /> 苹果 <br>
<input type="checkbox" name="fruit" value="orange"> 桔子 <br>
<input type="checkbox" name="fruit" value="mango"> 芒果 <br>
<input type="submit" value=" 提交 ">
</form>
</body>
3.3.3 下拉框
下拉框主要可以使用户快速、方便、正确地选择一些选项，而且还能节省页面空间。它是通过 select 和 option标签来实现的,其中，在有多种选项可供用户滚动查看时，size 属性确定列表中可同时看到的行数；selected 属性表示该选项在默认情况下是被选中的。
语法：
<select name="指定列表的名称“ size="行数">
<option value="可选择的值" selected="selected"> 显示项的内容 </option>
<option value="可选择的值"> 显示项的内容 </option>
……
</select>
如果将下拉框变成多选，则添加 muiltiple 属性即可。
示例：
<body>
<form name="myform" action="" method="post">
生日 :
<input type="text" name="year" maxlength="4" /> 年
<select name="birth">
<option value="-1"> 选择月份 </option>
<option value="1"> 一月 </option>
<option value="2"> 二月 </option>
......
</select>
<input type="text" name="year" maxlength="2" /> 日 <br/> 省份 :
<select name="province">
<option value="0"> 选择省份 </option>
<option value="1" selected="selected"> 湖北 </option>
......
</select>
</form>
</body>
3.4 表单验证
表单在提交之前应该执行输入验证，以检查用户输入内容是否符合要求。如验证用户是否输入、比较两次输入的内容是否相同、输入内容的长度是否过长等。表单只能在输入符合要求的情况下才能提交。
在 HTML5 中，通过对标签使用验证属性，可以实现在表单提交时执行自动验证的功能，并提示用户输入了错误的信息。
3.4.1 必填验证
required 属性可应用于大多数 input 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
语法：
<input type=“text” name=“usr_name” required=“required” />
示例：
<body>
<form>
输入查询内容：<input type="text" required>
<input type="submit" value=" 提交 ">
</form>
</body>
3.4.2 类型匹配验证
在 HTML5 中，增加了 input 标签的 type 属性值，可以使用这些 type 属性值实现基本的类型匹配功能。
| type 属性 |
说明 |
| |
在提交表单时，会自动验证值是否符合 e-mail 格式要求 |
| url |
在提交表单时，会自动验证值是否符合 url 格式要求 |
| number |
在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定 |
| range |
在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及 step 属性进行数值的限定，显示为滑动条 |
| date |
用于选取年、月、日 |
示例：
<body>
<form>
Email：<input type="email"><br><br> Date:
<input type="date"><br><br>
<input type="submit">
</form>
</body>
3.4.3 控制字符数量
在控制字符数量方面，我们可以使用 maxlength 属性设置输入字符的最大数量，以防止用户输入大量无效内容。
示例：
<body>
<form>
用户：<input type="text" maxlength="5“ />
<input type="submit">
</form>
</body>
3.4.4 验证输入范围
min、max 属性是数值类型或日期类型的 input 标签的专用属性，它们限制了在 input 标签中输入的数值与日期的范围。
示例：
<form>
Number：<input type="number" name="count" min="0" max="100" stop=”10”/>
<br/>
<input type="submit"/>
</form>
step属性控制input标签中的值增加或减少时的步长。本例中，输入的值不仅在0与100之间，还必须是10的倍数，因为step为10。
3.4.5 自定义错误消息
HTML5 表单验证给前端开发带来许多便利，但是默认的提示不友好。我们可以通过 setCustomValidity 方法来自定义提示信息，更准确的提示给用户。
当用户输入信息时，使用 setCustomValidity(“”) 将错误提示设置为空字符串，当用户输入不合法时，使用setCustomValidity(“自定义提示信息”) 来替换提示信息即可。
示例：
<body>
<form>
年龄：
<input type="number" max="60" min="0"
oninvalid="setCustomValidity(' 年龄必须在 0 至 60 之间！ ')"
οninput="setCustomValidity('')"
required>
<input type="submit" />
</form>
</body>
总结：
- 表单是 HTML5 的一个重要部分，主要用于采集和提交用户输入的信息。
- 表单数据提交的有两种方式：get 方式和 post 方式。
- 表单中大部分表单元素均使用 input 标签，只是它们的属性设置不同，其用法统一
- 文本输入控件包括文本框、密码框以及多行文本域。
- 选择型控件包括复选框、单选钮、下拉框和数据列表。
- 按钮型控件包括提交按钮、图片按钮。
- 在 HTML5 中，通过对标签使用验证属性，可以实现在表单提交时执行自动验证的功能，并提示用户输入了错误的信息。
