
上QQ阅读APP看书,第一时间看更新
2.3 HTML 5表单新属性
2.3.1 autocomplete属性
autocomplete属性规定form或input标签应该拥有自动完成功能。当用户在自动完成标签中开始输入时,浏览器应该在该标签中显示填写的选项。autocomplete属性适用于<form>标签,具有text、search、url、telephone、email、password、datepickers、range及color类型的<input>标签。
下面我们看一下实际应用。
【代码2-1】
01 <form action="demo_form.asp" method="get" autocomplete="on"> 02 First name: <input type="text" name="fname" /><br /> 03 Last name: <input type="text" name="lname" /><br /> 04 E-mail: <input type="email" name="email" autocomplete="off" /><br /> 05 <input type="submit" /> 06 </form>
图2.9是autocomplete属性的页面效果图。

图2.9 autocomplete属性效果
2.3.2 autofocus属性
autofocus属性规定在页面加载时标签自动获得焦点,适用于所有<input>标签的类型。下面我们看一下实际应用。
【代码2-2】
01 <form action="demo_form.asp" method="get" autocomplete="on"> 02 First name: <input type="text" name="fname" /><br /> 03 Last name: <input type="text" name="lname" /><br /> 04 E-mail: <input type="email" name="email" autofocus="autofocus" autocomplete="off" /><br /> 05 <input type="submit" /> 06 </form>
图2.10是autofocus属性的页面效果图。

图2.10 autofocus属性效果
从图2.10中可以看到,页面初始化后焦点自动出现在email标签内。