HTML5表单

新增的form元素

• datalist：为输入提示提供可选列表

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

• ******：作用是提供一种验证用户的可靠方法。（浏览器支持度不好，不建议使用）
• output：用于不同类型的输出，比如计算或脚本输出

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

新增的form属性

• autocomplete ：开启时所有属于该form的元素都开启了自动完成功能
  属性值：off/on
• novalidate：用于提交表单时取消整个表单的验证，也可单独使用与input元素

新增的input输入类型

• email
• url：需要加协议
• number：可设置max，min，step（数字间隔），value（默认值）属性

<input type="number" max="100" min="1" step="2">

• range：可设置max，min，step（数字间隔），value（默认值）属性

<input type="range" max="100" min="1" step="2">

• Date pickers
  date： 选取日、月、年
  month：选取月、年
  week：选取周、年
  time：选取小时、分钟
  datetime：选取时间、日、月、年（UTC）
  datetime-local：选取时间、日、月、年（本地）
• search
• tel
• color

新增的input属性

• autocomplete：规定input元素输入字段是否应该启用自动完成功能
  属性值：on/off

• autofocus：规定当页面加载时input元素自动获得焦点
  属性值：autofocus（可省略）

<input type="submit" autofocus="autofocus">

• form：属性规定输入域所属的一个或多个表单。
  属性值：对应form表单的id

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

• form表单重写属性，只用于submit和image类型
  formaction：重写表单的action属性
  formenctype：重写表单的enctype属性（编码方式）
  formmethod：重写表单的method属性
  formnovalidate：重写表单的novalidate属性，表示不用验证，属性值：formnovalidate（可省略）
  formtarget：重写表单是target属性，属性值：_blank/_self

• height/width：只针对type=”image”.

• list：属性规定输入域的 datalist。datalist 是输入域的选项列表。
  属性值：datalist元素中的id

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

• min/max/step

<input type="number" max="100" min="1" step="2">

• multiple：适用于email和file类型
  属性值：multiple（可省略）

Select images: <input type="file" name="img" multiple="multiple" />

• pattern：属性规定用于验证 input 域的正则表达式（pattern）。

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

• placeholder：提示信息

• required：规定是否是必填项目
  属性值：required（可省略）