HTML5新增input元素
(1) 数值输入域–number
将input标记中的type属性设置为number,可以在表单中插入数值输入域。提交表单时,会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内,则会出现错误提示。
<input name="" type=" number" min=" " max="" step="" value="" />
数值输入域的属性、取值及说明
属性 | 值 | 说明 |
max | number | 定义允许输入的最大值 |
min | number | 定义允许输入的最小值 |
step | number | 定义步长(如果step=“2”,则允许输入的数值为-2,0,2,4, 6等或-1,1,3, 5等) |
value | number | 定义默认值 |
(2) 滑动条–range
将input标记中的tpe属性设置为range,可以在表单中插入表示数值范围的滑动条,还可以限定可接受数值的范围。
<input name="" type="range" min="" max="" step=""" value=">
(3) 日期选择器–date pickers将input标记中的type属性设置为以下几种类型中的一-种就可以完成网页中日期选择器的定义。
● date- 选取日、月、年
● month-选取月、年
● week-选取周和年
● time- 选取时间(小时和分钟)
● datetime-选取时间、日、月、年(UTC-世界标准时间)
● datetime-local- 选取时间、 日、月、年(本地时间)
(4) url类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是ur|地址格式的文字,则不允许提交。
<input name="u1" type= "url" value=http://www.icourses.cn />
(5) email类型
email类型的input元素是一种专门 ]用来输入email地址的文本框。提交时如果该文本框中内容不是url地址格式的文字,则不允许提交。
email类型的文本框具有个multiple属性, 它允许在该文本框中输入一串以逗号分隔的email地址。
<input name=”emaill" type= " email" value=fning@163.com />
(3)placeholder属性
placeholder是指当 文本框处于末输入状态时文本框中显示的输入提示。在输入框为空时显式出现,而当输入框获得焦点时则会消失。
例如:
< input type="text" placeholder = "default text" />
(4)autofocus属性
给文本框、选择框或按钮等控制加上该属性,当页面打开时,该控件将自动获得焦点,从而替代使用JavaScript代码。例如:
<input type="text" autofocus />
(5)list属性
在HTML5中,为单行文本框增加了一个list属性。该属性的值是某个datalist元素的id。datalist也是HTML5新增的元素 ,该元素类似于选择框< select>,不同的是当用户想要设定的值不在选择列表之内时,允许其自行输入。
例如:
请选择文本: < input type= "text" list= " greetings" name= " greeting" />
<datalist id= " greetings">
< option value="Good Morning" />
<option value="Hello"/>
< option value="Good Afternoon" />
< /datalist>
(7)required属性
HTML 5中新增的required属性可以应用在大多数输入元素上(除了隐藏元素、图片元素按钮外)。在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中提示用户这个元素中必须输入内容。
(8)pattern属性
HTML 5新增的email、number、 url等input类型的元素, 要求输入内容符合一定的格式。如果对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字。例如:
<input type= "text" pattern="[0-9][A-Z]{3}" name= part placeholder= "输入内容:-
个数字与三个大写字母。”/>
新增颜色控件
可以选择颜色