HTML5表单

表单新增属性

form属性

在HTML5以前，一个表单的元素必须放在<form></form>标记对之间。HTML5为所有表单元素新增了form属性，使用form属性可以定义表单元素和某个表单之间的隶属关系，这时就不需要在遵循前面的规定了。定义表单元素和表单的隶属关系只要给表单元素的form属性赋予某个表单的id值即可。
基本语法：

<form id="myform">
……
</form>
<input type="text" form="myform"/>

autofocus属性

HTML5表单的<textarea>和所有<input>元素都具有“autofocus”属性，其值是一个布尔值，默认值是false。一旦为某个元素设置了该属性，页面加载完成后，该元素将自动获得焦点。需要注意，一个页面中最多只能有一个表单元素设置该属性。
基本语法：

<input type="text" autofocus/>
<textarearows="…" cols="…" autofocus>……</textarea>

placeholder属性

placeholder属性主要用于在文本框或文本域中提供输入提示信息。当表单元素获得焦点时，显示在文本框或文本域中的提示信息将自动消失，当元素内没有输入内容且失去焦点时，提示信息又将自动显示。
基本语法：

<input type="text" placeholder="提示信息"/>

required属性

required属性可以验证某个表单元的内容是否为空。
基本语法：

<input type="text" required/>

  语法说明：除了input元素可以设置required属性外，textarea、select等元素也可以设置该属性。

新增的input元素类型

1. tel——电话输入框文本
2. email——E-mail输入文本框
3. url——URL地址输入文本框
4. number——数值输入文本框，可设置输入值的范围
5. range——以滑动条的形式表示特定范围内的数值
6. search——搜索关键字输入的文本框
7. color——颜色选择器，基于取色板进行选择
8. date——日期选择器
9. time——时间选择器
10. datetime——包含时区的日期和时间选择器
11. datetime-local——不包含时区的日期和时间选择器
12. week——星期选择器
13. month——月份选择器
    举个栗子吧^_^：

<form action="" id="myform"></form>
<input type="text" form="myform" name="usersname" autocomplete="on"/>
<input type="submit" form="myform"/>
<p>邮箱:<input type="email" form="myform" required req autofocus/></p>
<p>网址:<input type="url" form="myform" placeholder="请输入一个网址"/></p>
<p>日期:<input type="date" form="myform"/></p>
<p>时间:<input type="time" form="myform"/></p>
<p>月:<input type="month" form="myform"/></p>
<p>周:<input type="week" form="myform"/></p>
<p>数字:<input type="number" form="myform"/></p>
<p>滑动条:<input type="range" form="myform"/></p>
<p>搜索：<input type="search" form="myform"/></p>
<p>颜色：<input type="color" form="myform"/></p>

新增的表单元素

datalist元素

datalist元素的功能是辅助表单文本框的内容输入，用于生成一个隐藏的下拉菜单，其相当于一个“看不见”的select元素。datalist下拉菜单包含的选项生成方式使用<option>标记来产生，显示文本是<option>的value属性值。需要注意，datalist元素一般需要跟某个文本框结合使用，结合方式是通过将输入框的“list”属性值设置为datalist的id值。下面举个栗子哈^_^：

<p>
车：<input id="mycar" list="cars"/>
<datalist id="cars"/>
<option value="宝马"/>
<option value="奔驰"/>
</datalist>
</p>