单元4 HTML5表单的应用笔记

介绍表单

1、认识表单
表单主要负责采集用户输入的信息，相当于一个控件集合，由文本域、复选框、单选框、菜单、文件地址域、按钮等表单元素组成。最常见的表单应用有搜索引擎页面、用户登录页面、用户注册页面等。
form标签用于创建一个表单，语法格式：

<form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>

1、name用于区分一个网页中的多个表单
2、action用于指定接收并处理表单数据服务器的url地址
3、method用于设置表单数据的提交方式，取值为get（默认、较差）、post（很可）
表单的3个核心元素
·表单标签（form）：包含处理表单数据所用的CGI程序的URL以及将数据提交到服务器的方法。
·表单域（input）：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框。
·表单按钮（button）：包括提交按钮、复位按钮、和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
2、HTML5新增的表单属性
（1）autocomplete属性
该属性用于指定表单是否有自动完成功能。“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史纪录显示在一个下拉列表里，以实现自动完成输入。
autocomplete属性的两个值：
·on：表单有自动完成功能
·off：表单无自动完成功能
（2）novalidate属性
该属性用于指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证。
HTML5标签
表单中最为核心的就是input标签，语法格式：

<input type="控件类型"/>

其他表单标签

1、textarea标签
该标签用于定义多行文本输入框，可以通过cols和rows属性来规定文本区域内可见的列数和行数，具体尺寸通过width和height来设置。语法格式：

<textarea rows="" cols="">这里是文本</textarea>

2、label标签
该标签用于为input标签定义标注（标记），当用户选择该标签时，浏览器就会自动将焦点转到与标签相关的表单控件上。
为达到“绑定”效果，label标签的for属性值应当与相关标签（不仅指input标签）的id属性相同。
3、select标签
该标签可创建单选或多选菜单，语法格式如下：

<select>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
</select>

4、datalist标签
该标签用于定义输入域的选项列表，通过id属性与input标签关联，用来配合定义input标签可能的值。列表通过datalist标签嵌套option标签来创建。
5、keygen标签
该标签时密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书。
6、output标签
该标签用于定义不同类型的输出，如脚本输出的示例代码如下：

<output id="result" onforminput="resCalc()"></output>

onforminput属性的值对应脚本的方法名。
HTML5表单验证
HTML5自带的表单验证功能有两种：
（1）通过required属性校验输入框填写内容不能为空，如果为空将弹出提示框，并阻止表单提交。
（2）通过pattern属性规定用于验证input域的模式（pattern），它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达式就会弹出提示框，并阻止表单提交。那些type为email或url的输入控件内置相关正则表达式，如果value的值不符合其正则表达式，则表单将通不过验证，无法提交。