表单:Input 类型,表单元素,表单属性
HTML5 新的 Input 类型
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
注释:Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。
email,url
<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>
number,rang(滑动条)
Points: <input type="number"
name="points" min="1" max="10" />
属性 | 值 | 描述 |
---|---|---|
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) |
value | number | 规定默认值 |
Date Pickers(日期选择器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
search
search 类型用于搜索域,比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。
HTML5 的新的表单元素:
- datalist
- keygen
- output
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>
提示:option 元素永远都要设置 value 属性。