form简介
<form>是HTML中的一个元素，它表示文档中的一个区域，这个区域包含了交互控件，用于向web服务器提交信息。
除全局属性外，<form>还有如下一些属性：
- accept-charset：一个以空格或逗号分隔（在HTML5中，仅能以空格作为分隔符）的列表，这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是，和包含这个
<form>元素的文档相同的字符编码。 - action：处理
<form>表单数据的程序所在的URL地址，即向何处提交表单数据。 - autocomplete：用于设置
<input>元素是否能够有默认值，这个默认值是由浏览器自动补全的。这个设置可以被<form>的子元素的 autocomplete 属性覆盖。
有两个取值：off（浏览器不会自动补全），on（浏览器会根据用户之前在form中输入的值自动补全）。 - enctype：提交给服务器的表单数据内容的MIME类型，有三个取值：
application/x-www-form-urlencoded（属性未指定时的默认值），multipart/form-data（用于 type为 "file" 的<input>元素），
text/plain (HTML5)。
enctype值可以被<button>或者<input>元素中的 formenctype 属性覆盖。 - method：向浏览器提交form表单的HTTP方法，有两种方法：
post方法：表单数据被包含在请求体中发送给服务器；
get方法：表单数据会被追加到查询字符串中发送给服务器。
这个值可以被<button>或者<input>元素中的 formmethod 属性覆盖。 - name：指定form的名称。
- novalidate：这个属性是一个布尔属性，指定了是否对表单提交的数据进行验证。这个属性可以被
<button>或<input>的formnovalidate属性覆盖。 - target：指定
<form>提交后，在哪里显示响应。有以下几种取值：
_self：默认值，在当前文档页面加载返回值；
_blank：在新窗口加载返回值；
_parent：在父级上下文中加载，如果没有父级，按_self执行；
_top：如果是HTML 4文档，清空当前文档，加载返回内容；如果是HTML5，在顶级上下文内加载返回值。如果没有父级，按_self执行。
iframename: 指定的frame中加载。
form表单控件
1.<input>
<input>是form表单中最常用的输入对象之一，具有如下属性：
- type：设置控件的类型，默认为text。
根据type属性的不同，<input>有不同的作用，<input>的常见type如下：- button：无缺省行为按钮。
- radio：单选按钮。必须使用 value 属性定义此控件被提交时的值，使用checked指示控件是否被默认选择。在同一个“单选按钮组”中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中，同一时间只有一个单选按钮可以被选择。
- checkbox：复选框。必须使用 value 属性定义此控件被提交时的值，使用 checked 属性指示控件是否被选择，也可以使用 indeterminate 指示复选框在一种不确定状态。
- color：用来指定颜色的控件。
- date：用来输入日期的控件。
- datetime：基于UTC时区的日期时间输入控件。
- datetime-local:用于输入日期时间的控件，不包含时区。
- month：输入年月的控件，不带时区。
- week：用于输入一个由星期-年组成的日期，日期不包括时区。
- time：用于输入不含时区的时间控件。
- email：用于编辑email的字段，当提交表单时，会自动地对 email 字段的值进行验证。合适的时候可以使用 :valid 和 :invalid CSS 伪类。
- tel：用于输入电话号码的控件。
- url：用于编辑URL的字段。
- file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
- hidden：不显示在页面上的控件，但它的值会被提交到服务器。
- image：图片提交按钮，必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。
- number：用于输入浮点数的控件。
- password：用于输入值被掩盖的单行文本字段，可以用maxlength指定输入值的最大长度。
- range：用于输入不精确值控件。
- reset：用于将表单所内容设置为缺省值的按钮。
- submit：用于提交表单的按钮。
- search：用于输入搜索字符串的单行文本字段，如果换行会从输入的值中自动移除。
- text：单行字段，换行会将自动从输入的值中移除。
- accept：如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。
- autocomplete：设置是否自动填充，如果type属性的值是hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。
- autofocus：设置在页面加载时自动获得焦点，如果type属性设置为隐藏则不能应用。
- autosave：设置保存填写数据，如果type的属性的值是search，当页面加载时，之前的搜索项目会在下拉菜单中出现。
- checked：如果该元素的type属性的值为radio或者checkbox，则该布尔属性的存在与否表明了该控件是否是默认选择状态。
- disabled：表示此控件被禁用，在禁用的控件中， click事件将不会被分发，且禁用的控件的值在提交表单时也不会被提交 。如果type属性为hidden，此属性将被忽略。
- form：设置与此控件关联的
<form>表单，该属性的值与所关联的<form>的id一致。 - formaction：表示处理
<input>提交信息的程序的URI，如果指定了，将重写<input>所属<form>的action属性。 - formenctype：如果
<input>的类型是submit或image，此属性值指定提交表单到服务器的内容类型，如果指定了，将重写所属<form>的enctype属性。 - formmethod：如果
<input>的类型是submit或image，此属性指定了提交表单的HTTP方法。 - height： 如果type属性是image，此属性指定image的显示高度。
- width：如果type属性是image，此属性指定image的显示宽度。
- list：这个属性可为用户预设一组输入选项，其值与同一文档中的
<datalist>的id一致。 - max：设置日期或数字的最大值。
- min：设置日期或数字的最小值。
- multiple：当type属性为email或file时，设置用户是否可以输入多个值。
- name：设置控件的名称。
- pattern：检查输入值的正则表达式。
- placeholder：提示用户可能的输入值。
- readonly：设置输入值是否不可修改；如果type是hidden，range，color，checkbox，radio，file或button，则该属性可忽略。
- required：设置用户在提交表单时该控件的值必填。
- spellcheck：设置拼写检查。
- src：如果type为image，该属性设置了image的source。
- value：设置控件的初始值，除了type是checkbox或radio时必须指定value的值，其他情况下该属性是可选的。
2.<button>
<button>表示一个可以点击的按钮，<button>元素比<input>元素更易样式化，<button>元素内部可以添加内联HTML内容（如<em>，<strong> 甚至<img>），并使用:after和:before伪元素实现复杂的渲染。但是不可以放图像映射，因为它对鼠标和键盘敏感的动作会干扰按钮的行为。
<button>有如下常见属性：
- autofocus：一个布尔属性，规定页面加载时按钮自动获得输入焦点。
- disabled：设置用户不能与按钮进行交互。
- form：表示
<button>元素关联的<form>元素（它的表单拥有者）。 - formaction：表示处理
<button>提交信息的程序的URI，如果指定了，将重写<button>所属<form>的action属性。 - formenctype：如果
<button>是的类型是submit，此属性值指定提交表单到服务器的内容类型。如果指定了，将重写<button>所属<form>的enctype属性。 - formnovalidate：此属性指定
<button>提交时不需要验证。如果指定了，它会重写<button>所属<form>的novalidate属性。 - formtarget：如果
<button>是submit类型，此属性指定表单数据提交后在哪里显示响应。如果指定了，它会重写<button>所属<form>的target属性。 - name：指定
<button>的名称。 - type：指定
<button>的类型。包括：submit，reset，button和menu。 - value：指定
<button>的初始值。
3.<select>，<optgroup>，<option>，<datalist>
<select>可创建选项菜单，菜单内的选项为<option>，可由<optgroup>分组。
<select>具有如下属性：
- autofocus：让一个对象在页面加载后自动获得焦点。
- disabled：禁用下拉列表。
- form：指定
<select>所关联的<form>表单。 - multiple：设置select是否可以多选，默认为单选。
- name：指定控件名称。
- required：规定用户提交表单时，select的值不能为空。
- size：规定下拉列表可见选项的数量。
<optgroup>会创建包含在<select>中的一组<option>选项，有两个属性： - disabled 该选项组中的选项被禁用。
- label 设置选项组的名字。
<option>可以在设置弹出窗口或其他项目列表中的菜单项，有如下属性： - disabled：设置选项不可选。
- label：表示选项含义。
- selected：设置初始被选中的选项。
- value：设置选项被选中时，提交给表单的值。
例如：
<select>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option disabled>Option 2.1</option>
<option selected>Option 2.2</option>
</optgroup>
</select>
<datalist>包含了一组<option>元素，规定了输入域的选项列表。如果需要把<datalist>绑定到输入域，则输入域的list属性需引用<datalist>的id，<option>元素一定要设置value的值。
例如：
<input list="list" name="input">
<datalist id="list">
<option value="1">
<option value="2">
<option value="3">
</datalist>
4.<label>
<label>元素用于为表单控件设置标注，建立文字标签与表单控件的关系，点击<label>元素，相应的表单控件会获得焦点。
<label>元素具有如下属性：
- accesskey：设置从键盘访问该元素的快捷键。
- for：规定
<label>绑定到哪个表单元素，for的值设置为该元素的id。 - form：指定
<label>所属的<form>。
用法如下：
<!-- for举例 -->
<label for="option1">option1</label>
<input type="radio" name='option' id='option1'>
<!-- 嵌套举例 -->
<label>option2<input type="radio" name='option'></label>
5.<textarea>
<textarea>表示一个多行文本编辑控件，包含如下属性：
- autocomplete：设置是否自动补全。
- autofocus：设置页面加载后自动获得焦点。
- cols：设置文本域的可视列数（高度）。
- rows：设置文本域的可视行数（高度）。
- disabled：设置禁用文本域。
- form：指定所属
<form>。 - maxlength：设置允许用户输入字符的最大长度（Unicode）。
- minlength：设置允许用户输入字符的最小长度（Unicode）。
- name：设置元素的名称。
- placeholder：占位符，用于提示用户输入的内容。
- readonly：设置用户不可以修改文本，但是可以点击和选择。
- required：提示用户该元素必填。
- wrap：指定文本换行的方式，有两个取值：hard（文本达到最大宽度时，浏览器自动插入换行符），soft（文本达到最大宽度时不会自动插入换行符）。
6.<fieldset>和<legend>
<fieldset>通常用于对表单内的控件进行分组，<legend>用于给<fieldset>命名。
<fieldset>
<legend>Title</legend>
<input type="radio" id="radio"> <label for="radio">Click me</label>
</fieldset>
除以上一些常见控件外，还有其他控件例如：
<progress>用于显示一项任务的完成进度；<output>定义一个用户的操作或者计算的结果；<meter>显示已知范围的标量值或者分数值。需结合日常开发需求不断深入学习。
参考
- MDN
- 了解HTML表单之13个表单控件
网友评论