HTML5表单标签及标签属性总结

目标：
1、列出所有的表单标签
2、总结每个标签的用途以及标签的常用属性

PS：表单主要用于收集用户的信息
PS：凡是用于收集用户信息的控件都必须要有name属性，有些控件(例如checkbox、radio)必须明确指明value属性，大部分控件可以指定默认的value值，也可以不指定直接获取用户输入的就可以了

一、表单的标签
1、form 表示HTML表单
2、input 表示用来收集用户输入数据的控件，通过设置type属性的不同属性值获取不同功能的控件
3、label 可以通过for属性绑定表单中其它控件，解释其他控件用途
4、select、option、optgroup 表单下拉框组合
5、textarea 表示可以输入多行文本的控件
6、datalist 定义一组提供给用户的建议值
7、fieldset、legend 对表单中的控件分组
8、output 表示计算结果
9、button 按钮，可以通过设置type值获取重置、提交、普通按钮这三种功能的按钮，这些功能的控件都可以通过input获取

二、标签用法及标签属性
1、通常情况下，标签都需要配合标签属性才能达到目的
2、有些属性是所有标签都有的，有些属性是只有部分标签有的，有些属性时某个标签独有的

3、下面尽量列出每个标签所有的属性，以及一个常用的搭配

4、form标签

<form name="" action="#" method="post">
   <input type="submit" value="提交"/>
</form>

1)、action 表示表单提交的页面
2)、method 表示表单的请求方式，有POST和GET两种，默认GET
3)、enctype 表示浏览器对发送给服务器的数据所采用的编码格式。 有三种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）、text/plain（未规范的编码，不建议使用，不同浏览器理解不同）
4)、name 设置表单名称
5)、target 设置提交时的目标位置，_blank、_parent、_selt、_top
6)、autocomplete 设置浏览器记住用户输入的数据， 实现自动完成表单。 默认为 on 自动完成，如果不想自动完成则设置 off。
7)、novalidate 设置是否执行客户端数据有效性检查，详情 >>>>

5、input标签是表单标签中使用频率最高的标签，通过设置type属性的值获取不同功能的控件，详情>>>>

6、labe标签：通过for属性绑定表单中其它控件，当点击label时相当于点击了和label绑定的控件，标签中文本用于解释控件用途，自定义一些表单控件样式时，label标签非常有用

<section>
   <label for="username">用户名：</label>
   <input type="text" class="" id="username" name="" value=""/>
</section>

<sction>
   <label>
      <span>用户名：</span>
      <input type="text" class="" id="" name="" value=""/>
   </label>
</section>

7、下拉框标签 select、option、optgroup
1)、option、optgroup是select的子标签
2)、optgroup标签用于给option分组，属性label用于说明该组内容，disabled用于禁止该组中option被选中，optgroup本身是不可选的
3)、option标签用于包裹展示给用户的内容，它的value属性值会和select的name属性值形成name=value发送到服务器，当多选时：name=value1&name=value2，它还有disabled、selected、label这些可选的属性
4)、select用于包裹option、optgroup，必需属性name，当表单提交时带着value值发送到服务器
4.1)、disabled 将下拉列表禁用
4.2)、from=”form_id” 将select和一个表单绑定，当这个表单提交时，会带上这个select，不管select在form内还是外
4.3)、size 设置不点击select的时候一次显示几个option给用户看
4.4)、multiple 设置是否可以多选，该属性存在即可多选，name=value1&name=value2，name是唯一的
4.5)、autofocus select自动获取焦点
4.6)、required 当该属性存在，则select必须有选择才能通过

<select name="province" id="province">
  <optgroup label="H">
    <option value="hn">河南</option>
    <option value="hb">河北</option>
  </optgroup>
  <optgroup label="S">
    <option value="sx_1">山西</option>
    <option value="sx_2">陕西</option>
  </optgroup>
</select>

8、textarea标签

<textarea name="suggest" row="8" cols="30" maxlength="500" placeholder="您的建议" wrap="hard"></textarea>

8.1)、name 设置提交时的名字
8.2)、form 将textarea和某个表单绑定
8.3)、readonly 设置多行文本只读
8.4)、disabled 将多行文本框禁用
8.5)、maxlength 设置最大可输入的字符长度
8.6)、autofocus 获取焦点
8.7)、placeholder 设置输入时的提示信息
8.8)、rows 设置行数
8.9)、cols 设置列数
8.10)、wrap 设置提交表单时文本是否换行
8.11)、required 设置必须输入值，否则无法通过验证

9、datalist 必须属性id，定义一组提供给用户的建议值，list–>id

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

10、fieldset、legend 对表单中的控件分组

<fieldset name="" form="form_id" disabled>
  <legend>这是标题</legend>
  ...........
</fieldset>

11、output 表示计算结果

<form action="#" method="post" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
  <div>
    <input type="number" name="num1" id="num1"/>
    <input type="number" name="num2" id="num2"/>
    <output for="num1 num2" name="res"/>
  </div>
 <input type="submit" value="submit"/>
</form>

12、button 按钮，可以通过设置type值获取重置、提交、普通按钮这三种功能的按钮，当type值为submit时，会有一些额外属性。这些功能的控件都可以通过input获取。