1.HTML5占位符文本
使用placeholder可以给文本框,搜索框添加提示性文本
<input type="text" name="url" placeholder="输入地址" />
2.自动聚焦
当页面加载完成时让输入焦点自动落到某个元素上;这个动作用autofocus属性完成。
<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
3.标签自动补全
datalist作用:我们经常在网上的搜索框中看到当输入一个字符,输入框下方会自动列出你输入的关键词。
<input list="w3cfuns-search" />
<datalist id="w3cfuns-search">
<option value="W3Cfuns">
<option value="W3C标准">
<option value="W3C规则">
<option value="W3C验证">
<option value="前端开发">
<option value="前端开发网">
<option value="2天驾驭DIV+CSS">
<option value="W3CSchool">
</datalist>
4.HTML5新输入类型
(1)color 类型用在input字段主要用于选取颜色
<input type="color" name="favcolor">
(2)date 类型允许你从一个日期选择器选择一个日期
<input type="date" name="bday">
(3)datetime-local 类型允许你选择一个日期和时间 (无时区)
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
(4)email 类型用于应该包含 e-mail 地址的输入域
E-mail: <input type="email" name="email">
(5)month 类型允许你选择一个月份。
生日 (月和年): <input type="month" name="bdaymonth">
(6)number 类型用于应该包含数值的输入域。
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
其他还有:
- range 滑动条
- search 搜索框
- tel 电话号码
- time 时间
- url URL地址
- week 周
使用下面的属性来规定对数字类型的限定:
range 类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条。
<input type="range" name="points" min="1" max="10">
5.HTML5表单验证
HTML5对表单元素提供了patern属性,它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。
<input id="phone_num" name="phone_num" type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="xxx-xxxx-xxxx"/>