2017年六月六日 NO.8 HTML（七）——表单（笔记）

---

表单

---

元素名	元素类型	功能	用法
form	流元素	表示HTML上的表单	开始和结束标签
input	短语元素	收集用户数据，取决于一些局部属性值	虚元素形式
button	短语元素	根据设置的属性值，引发返回用户数据的方法	开始和结束标签
label	短语元素	显示指示信息	开始和结束标签
fieldset	流元素	将元素组织起来	开始和结束标签
legend	无	为编组提供说明	开始和结束标签
datalist	短语	为input元素提供可选值，与option元素连用	开始和结束标签
option	无	为datalist提供选项，通过label值或者中间文字来描述	虚元素或开始和结束标签

---

其他表单元素

元素名	元素类型	功能	用法
select	短语元素	与datalist类似，与option搭配使用	开始和结束标签
optgroup	无	在select元素内建立一定结构，label属性建立小标题	开始和结束标签
textarea	短语元素	输入多行文字	开始和结束标签
output	短语元素	表示计算结果	开始和结束标签
keygen	短语元素	提交表单时，生成新的密钥	虚元素形式

配置表单

定制form

action属性：

1. 若设置为相对url，则将值嫁接到当前页面url后，有base属性则嫁接到相对url后。
2. 不设置值则发送表单到当前加载HTML文档的url中。

method属性

1. post：用于不安全交互，会用于改变应用程序的各种状态操作。
2. get：用于安全交互。

enctype属性：

1. application/x-www-form-urlencoded：默认编码方式，不能用在文件上传;数据项名称与值通过“=”对应，数据项间“$”隔开。
2. multipart/form-data：用于文件上传。
3. text/plain：编码方式因浏览器而异，不同浏览器实现方式不同。

autocomplete属性：

1. on：表单允许浏览器填写表单，设置的是input的默认行为方式，在input元素中可更改。
2. off：不允许。

target属性：

1. _blank:将浏览器反馈信息显示在新窗口。
2. _parent:将浏览器反馈信息显示在父窗口的组中。
3. _self:将浏览器反馈信息显示当前窗口（默认）。
4. _top:将浏览器反馈信息显示顶层窗口。
5. <frame>:将浏览器反馈信息显示在指定窗口。

name属性：设置表单名称。

name属性：定义input的名称。

label

for属性：指定对应的input标签id。

fieldset

disabled属性：禁用所有input元素。

button

type属性：

1. submit：表示功能为提交表单。
2. reset：表示功能为重置表单。
3. button：表示按钮没有具体语义。

当tyoe属性为submit时，还存在其他属性：

1. form属性：指定关联表单。（指定id值，多用在表单元素form外的button元素）
2. formaction属性：覆盖form的action属性。
3. formenctype属性：覆盖form的enctype属性。
4. formmethod属性：覆盖form的method属性。
5. formnovalidate属性：覆盖form的novalidate属性，表明是否进行客户端有效数据检查。

---

定制input

---

autocomplete属性：如上。

autofocus属性：自动聚焦，若多个应用，自动聚焦到最后一个。

disabled属性：禁用input。

novalidate属性：禁用输入验证。同可用在form元素。

---

type属性为text时，还有以下属性：

1. dirname属性：文字内容方向。
2. list属性：指定datalist（为文本框提供建议值）的id值。
3. maxlength属性：指定用户在文本框能输入的最大字符个数。
4. pattern属性：指定用于输入验证的正则表达式。
5. readonly属性：将文本框设置为只读模式。
6. required属性：表明用户必须输入值。
7. size属性：指定文本框可见字符个数，来控制文本框宽度。
8. value属性：设置初始值。
9. placeholder属性：设置提示文字。

type属性为password时，同上3–8。

type属性为submit，reset，button会生成类型button的元素，value来作为label值。

type属性为checkbox：限制在是/否之间的二态复选框。
额外属性有checked，required，value。

type属性为color：只能输入颜色信息。

type属性为date：只能输入日期。
list，min，max，readonly，required，step（步长），value。

type属性为datetime：带时区的世界时，（包括日期和时间）。
list，min，max，readonly，required，step（步长），value。

type属性为datetime-local：不带时区的世界时。
list，min，max，readonly，required，step（步长），value。

type属性为email：只能输入规范的电子邮箱地址。
1. list属性：指定datalist（为文本框提供建议值）的id值。
2. maxlength属性：指定用户在文本框能输入的最大字符个数。
3. pattern属性：指定用于输入验证的正则表达式。
4. readonly属性：将文本框设置为只读模式。
5. required属性：表明用户必须输入值。
6. size属性：指定文本框可见字符个数，来控制文本框宽度。
7. value属性：设置初始值。
8. multiple属性：接受多个email地址。

type属性为month：只能输入年月。
list，min，max，readonly，required，step（步长），value。

type属性为number时：整数或浮点数。
额外可用属性：list，min，max，readonly，required，step（步长），value。

type属性为radiobutton：一组固定选项。
type属性为radio：
额外属性checked，required，value。

type属性为range：指定范围内的数值。
额外可用属性：list，min，max，readonly，required，step（步长），value。

type属性为tel：规范的电话号码。
1. list属性：指定datalist（为文本框提供建议值）的id值。
2. maxlength属性：指定用户在文本框能输入的最大字符个数。
3. pattern属性：指定用于输入验证的正则表达式。
4. readonly属性：将文本框设置为只读模式。
5. required属性：表明用户必须输入值。
6. size属性：指定文本框可见字符个数，来控制文本框宽度。
7. value属性：设置初始值。

type属性为time：时间信息。
list，min，max，readonly，required，step（步长），value。

type属性为week： 只能输入年或者星期的信息。
list，min，max，readonly，required，step（步长），value。

type属性为url：完全限定的url。
1. list属性：指定datalist（为文本框提供建议值）的id值。
2. maxlength属性：指定用户在文本框能输入的最大字符个数。
3. pattern属性：指定用于输入验证的正则表达式。
4. readonly属性：将文本框设置为只读模式。
5. required属性：表明用户必须输入值。
6. size属性：指定文本框可见字符个数，来控制文本框宽度。
7. value属性：设置初始值。

tyoe属性为search：支持与text额外属性相同，浏览器提供特殊外观。

type属性为image：(点击不同区域会有不同的提交值（x，y））
1. alt：提供说明文字。
2. formaction属性：覆盖form的action属性。
3. formenctype属性：覆盖form的enctype属性。
4. formmethod属性：覆盖form的method属性。
5. formnovalidate属性：覆盖form的novalidate属性，表明是否进行客户端有效数据检查。
6. height属性：设置图像高度。（像素）
7. src属性：指定url。
8. width属性：指定图像宽度。 （像素）

type属性为file：（表单编码必须为multipart/form-data）

其他表单元素属性

1. select元素：size属性设置显示多个选项，multiple属性让用户选择多个选项。
2. textarea元素：rows和cols属性设置其大小，wrap属性设置换行方式（hard和soft）效果体现在提交的文档中。
3. output元素：需要在form元素里利用javascript事件系统来建立元素值的关联。