首页 > 代码库 > HTML5_01之表单新特性
HTML5_01之表单新特性
1、WebStorm快捷键:
Ctrl+Alt+(向下方向键):快速复制当前行
Alt+(向上/下方向键):移动当前行
Ctrl+D:删除当前行
Ctrl+/:快速(取消)注释当前行
Ctrl+Alt+L:格式化当前文档
2、HTML5九大新特性:
①表单新特性、②视频音频、③Canvas绘图、④SVG绘图、⑤地理定位、⑥拖放API、⑦WebWorker、⑧WebStorage、⑨WebSocket
3、表单Input类型:
①已有type类型:
text(文本框)、password(密码框)、radio(单选按钮)、checkbox(复选框)、button(普通按钮)、reset(重置)、submit(提交)、image(图片)、file(文件选择)、hidden(隐藏域);
②HTML5新添加type类型:
number:数字输入框,相应属性:min(最小值)、max(最大值)、step(等差值);
email:邮件输入框,默认验证规则——中间‘@’符号,前后各至少一个字符;
url:URL地址输入框,默认验证规则——冒号‘:’,且前面存在任意字符;
tel:电话号码输入框,无格式验证,手机浏览器弹出数字键盘;
search:搜索输入框,PC下Chrome搜索框内有删除符号‘x’,手机弹出键盘右下角显示‘搜索’;
range:范围选择滑块,相应属性:min(最小值)、max(最大值)、value(默认值)、step(等差值);
color:颜色选择窗口,浏览器会调用操作系统提供的颜色选择窗口,提交的是颜色值;
date:日期选择窗口,不能定制样式,相应属性:min(最小日期,取值“xxxx/xx/xx”);
month:月份选择器;
week:星期/周选择器;
4、表单元素:
①已有表单元素——可与用户交互并提交:input(各种形式交互表单)、select(option)(下拉选择)、textarea(文本输入域)、button(普通按钮);
②HTML5新增表单元素——不能交互/提交,仅作信息展示:
datalist:数据列表,为输入框提供输入建议;例:
<datalist id="xx">
<option>xxxxx</option>
<option>xxxxx</option>
...
</datalist>
<input list="xx">
progress:进度条;例:
<progress value=""></progress>
meter:度量衡,刻度尺,使用不同颜色标识出数据所处的区间;例:
<meter min="0" low="25" value="http://www.mamicode.com/0" high="75" optimum="50" max="100"></meter>
output:输出值,用于表示数据的计算结果,语义标签;例:
<output for="xx"></output>
5、表单元素属性:
①已有表单标签常用属性:name、value、readonly、disabled(禁用)、checked(选中)、for;
②HTML5新增表单标签属性:
placeholder:占位提示消息,与value不同,仅能提示,不能提交;例:
<input placeholder="提示性文字">
autofocus:自动获得焦点;
multiple:多项,用于email和file输入框,允许输入多个值,逗号分隔;例:
autocomplete:自动完成,取值on/off,指定输入域是否记录上次提交的输入,下次输入时给予提示;
form:表单,指定当前输入域所属的表单ID,可以将声明了form的输入框放到表单元素外面,仍可以一同被提交;例:
<form id="formID">...</form>
...
<input form="formID">
required:必填项,提交时验证,若没有输入则无法提交;
min:最小值,若输入值小于该值则无法提交;
max:最大值,若输入值大于该值则无法提交;
minlength:最小长度,若输入的字符串长度小于该值无法提交(非HTML5标准属性,FireFox不支持,Chrome支持);
maxlength:最大长度,若输入字符串长度大于该值无法提交;
pattern:正则表达式样式,若输入字符串不符合指定正则表达式则无法提交;例:
<input pattern="^1[3578]\d{9}$">
6、自定义表单错误提示消息:
HTML5新增表单输入域属性:validity(有效性) ;
ValidityState{
valid:true;
badInput:false——无效输入,number;
customError:false——自定义错误,setCustomValidity(‘‘)参数字符串有内容,customError就变为true;参数值是空字符串,customError变为false;
patternMismatch:false——样式不匹配,pattern;
rangeOverflow:false——范围上溢出,max;
rangeUnderflow:false——范围下溢出,min;
stepMismatch:false——步长不匹配,step;
tooLong:false——字符串太长,maxlength;
tooShort:false——字符串太短,minlength;
typeMismatch:false——类型不匹配,email/url;
valueMissing:false——值缺失,required;
}
HTML5_01之表单新特性