HTML5_01之表单新特性

时间:2023-04-07 13:38:08

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="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;
 }