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元素类型

tel——电话输入框文本

email——E-mail输入文本框

url——URL地址输入文本框

number——数值输入文本框，可设置输入值的范围

range——以滑动条的形式表示特定范围内的数值

search——搜索关键字输入的文本框

color——颜色选择器，基于取色板进行选择

date——日期选择器

time——时间选择器

datetime——包含时区的日期和时间选择器

datetime-local——不包含时区的日期和时间选择器

week——星期选择器

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>