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