1、新的input type
H4已经学过的input type:
text、password、radio、checkbox、button、submit、reset、image、hidden、file
H5中新增的input type:
(1)email:
作用:邮件输入框,在表单提交时会验证邮箱格式(*@*),浏览器默认提供了错误消息,内容可以定制但样式不能定制
语法:'<input type="email">'
(2)url:
作用:网址输入框,在表单提交时会验证网址格式(\w:),浏览器默认提供了错误消息,内容可以定制但样式不能定制
语法:'<input type="url">'
(3)number:
作用:数字输入框,限定用户的输入只能是整数,还可以指定数字的范围和步长
语法:'<input type="number" min="" max="" step="">'
(4)tel:
作用:电话号码输入框,仅在手机中显示数字输入键盘,PC浏览器中无特殊效果
语法:'<input type="tel">'
(5)search:
作用:搜索输入框,仅在手机中显示输入键盘右下角显示一个“搜索”按钮,PC浏览器中无特殊效果
语法:'<input type="search">'
(6)range:
作用:范围选择滑块,可以在指定的范围内以指定的步长进行数字选择
语法:'<input type="range" min="1" max="100" step="1" value="50">'
(7)color:
作用:颜色选择器,弹出当前操作系统提供的颜色选择窗口进行颜色选择
语法:'<input type="color">'
(8)date:
作用:日期选择器,弹出一个浏览器自定义的日期选择窗口——FF不支持
语法:'<input type="date">'
(9)month:
作用:月份选择器,弹出一个浏览器自定义的月份选择窗口——FF不支持
语法:'<input type="month">'
(10)week:
作用:星期/周选择器,弹出一个浏览器自定义的星期选择窗口——FF不支持
语法:'<input type="week">'
2、新的表单元素
H4已经学过的表单元素:
input、select/option、textarea、button
H5新增了四个表单元素:
(1)datalist:数据列表,本身属于不可见元素,用于为某个文本输入框提供输入建议列表
<datalist id="list2">
<option>XXX</option>
</datalist>
<input type="text" list="list2">
注意:option不能加上value值
(2)progress:进度条,显示为一个不断前进的进度条
'<progress value="0~1"></progress>'
(3)meter:度量衡/刻度尺,以“红/黄/绿”三个颜色表示当前值处于哪个范围——“不可接受/可以接受/优秀”之一。
属性:min:最小值
max:最大值
low:可接受的下限
high:可接受的上限
optimum:最优值
value:当前实际值
low < optimum < high : 黄-绿-黄
optimum < low : 绿-黄-红
high < optimum : 红-黄-绿
(4)output:输出值,本身只是一个语义标签,功能/样式与SPAN一样的。
'<output>xxx</output>'
注意:上述四个新标签都是用于提示信息的,不能用于提交客户端的数据,故没有name属性!
3、表单元素的新属性
H4已经学过的表单元素的属性:
type、name、value、readonly、disabled、checked、selected
H5新增的表单元素属性:
(1)autocomplete:自动完成,是否记录之前曾经提交过的用户输入
'<input autocomplete="on/off">'
(2)autofocus:自动获得输入焦点
'<input autofocus>'
(3)placeholder:占位字符,在输入框中没有任何输入时显示的提示性文字
'<input placeholder="提示性文字">'
(4)multiple:是否允许存在多个值,是个boolean型属性,若声明了此属性,email和file输入框中就运行输入以逗号分隔的多个值
'<input type="email" multiple>'
(5)form:为INPUT指定form属性,指向某个FORM元素的ID,就可以把该输入框放到FORM元素外部
'<input form="formID">'
=====上述五个通用属性目前的浏览器兼容性非常好=======
以下为与输入验证相关的表单元素新属性,在提交时可能弹出错误消息:
(6)required:必填项
'<input required>'
(7)minlength:限定最少的字符个数,不是H5标准属性,仅Chrome支持,WS中也没有代码提示
'<input minlength="3">'
(8)maxlength:限定最长的字符个数
'<input maxlength="6">'
(9)min:限定最小的数值
'<input min="18">'
(10)max:限定最大的数值
'<input max="60">'
(11)pattern:输入必须符合指定的正则表达式
'<input pattern="1[3578]\d{9}">'
如何自定义表单元素弹出的错误提示(JS相关)?
HTML5为每个表单元素对应的JS对象提供了一个属性:
input.validity {
badInput:false,无效输入,如无效的数字
typeMismatch:false,类型不匹配,如非法的邮箱
valueMissing:false,值缺失,违反了required验证
tooShort:false,字符串太短,违反了minlength验证
tooLong:false,字符串太长,违反了maxlength验证
rangeOverflow:false,数字值上溢出,违反了max验证
rangeUnderflow:false,数字值下溢出,违反了min验证
patternMismatch:false,样式不匹配,违反了pattern验证
customError:false,是否存在用户自定义的错误消息
valid:当不存在上述任一错误时,此属性值为true
}
上述的每个错误,浏览器都有预定义的错误消息;若用户为输入框自定义一个错误消息,浏览器只会自定义错误消息,而不显示预定义错误消息。
指定自定义错误消息:
input.setCustomValidity('自定义错误消息');
取消自定义错误消息:
input.setCustomValidity('');