作者：echo7111436 | 2021-08-23 17:22
第十六章，表单
HTML5引入了新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL以及定制模式验证。
元素：
---- 电子邮件框
---- 搜索框
---- 电话框
---- URL框
以下元素得到部分浏览器支持：
---- 日期
---- 数字
---- 范围
----
---- \
---- 数据列表
---- /
----
下面输入或元素得到更少的支持
---- 颜色
---- 全局日期和时间
---- 局部日期和时间
---- 月
---- 时间
---- 周
---- 输出
属性：
| 属性 | 总结 |
| accept | 限制用户可上传文件类型 |
| autocomplete | 对form元素或特定字段添加autocomplete=“off”，将关闭浏览器的自动填写行为 |
| autofocus | 页面加载后将焦点放到该字段 |
| multiple | 允许输入多个电子邮件地址，或上传多个文件 |
| list | 将datalist与input联系 |
| maxlength | 指定textarea的最大字符数，文本框在H5之前就支持此属性 |
| pattern | 定义一个用户所输入的文本在提交之前必须遵循的模式 |
| placeholder | 出现在文本框中的提示文本 |
| required | 在提交表单前必须填写该字段 |
| formnovalidate | 关闭H5自动验证功能，应用于提交按钮 |
| novalidate | 关闭H5自动验证功能，应用于表单元素 |
注：Ryan Seddon的H5F（ http://github.com/ryanseddon/H5F）可以为旧浏览器提供模仿H5表单行为的js方案
method=“get”，表单提交后，表单中的数据会显示在浏览器地址栏里，数据大小有限制，获取信息等可公开的操作使用get操作
method=”post”，表单提交后，表达数据不会显示在地址栏，可以发送更多的数据，用于在数据库保存，删除，添加数据等敏感操作使用post
对表单元素进行组织
可以使用fieldset元素将相关元素组合在一起，还可以使用legend元素为每个fieldset提供标题，用于描述每个组的目的，这些描述也可以使用h1~h6。如果需要包含legend元素，则它必须是fieldset的第一个元素。
建议：对于单选按钮，最好总是使用fieldset和legend
label标签有一个特殊的属性：for，当for的值与一个表单字段的id值一样时，该label标签就与该字段显示地关联了起来。
for，id，name属性的值都可以是任意值，但对于包含多个单词的值，for，id会使用连字符（-）分隔单词，而name使用下划线（_）连接。
注：必须建立服务端验证，因为客户端的js验证有可能会被禁用，或者不支持H5的新属性。
http://html5pattern.com有很多有用的模式
创建单选按钮
同一组单选按钮的input元素的name属性必须都一样，type="radio"
创建复选框
同一组复选框的input元素的name属性必须都一样，type="checkbox"
创建选择框
1、创建选择框
使用select元素。size=n代表选择框高度，以行为高度，输入multiple或者multiple="multiple"，可以允许访问者选择多个选项。
在select内部使用option元素表示选项。在option元素中，输入selected或者selected="selected"，指定某个选项默认被选中。
2、对选择框进行分组
对多个分在同一组的option元素使用optgroup元素，label属性是子菜单标题。
如果添加了size属性，那么选择框看起来会更像一个列表，且没有自动选中的选项，若size大于选项数量，访问者可以点击空白处，使所有选项处于未选中状态
让访问者上传文件
必须在form元素里面正确设置enctype属性，创建input type="file"元素
对于允许上传的表单，不允许使用get方法
创建隐藏字段
input type="hidden"
隐藏字段出现在表单标记中的位置并不重要，因为它们在浏览器中并不可见。
不要将敏感信息放到隐藏字段中，访问者可以通过查看源码看到
创建提交按钮
1、input type="submit"
2、创建带图像的提交按钮
input type="image" src="img.url"
3、创建结合文本和图像的提交按钮
使用button元素
