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