html5出現了很多讓人興奮的標籤和屬性，以前一些功能我們自己需要寫元件或者去找元件，現在html5原生的就直接幫我們集成了，這當中就表單元件的一些常用功能。

html5 input 元件

1. 時間日期型別

  month     <input type = "month" /><br><br>  <!-- 年月 -->
  week     <input type = "week" /><br><br>  <!-- 年周 -->
 date     <input type = "date" />
 
<br><br>   <!-- 年月日 -->
time     <input type = "time" /><br><br>   <!-- 小時分 -->
datetime-local  <input type = "datetime-local" /><br><br> <!-- 年月日小時分 -->

1. 校驗型別,當點提交按鈕的時候，能看到具體的效果

 <form>
  tel     <input type = "tel" /><br
 
><br>  <!-- 電話校驗 ,沒有嚴格的匹配，因為電話號碼，國家和地區可能不同，你可以自己定義patten屬性自定義匹配規則-->
  url     <input type = "url" /><br><br>  <!-- URL校驗 -->
 email     <input type = "email" /><br><br>   <!-- 郵箱校驗 -->
   <input type = "submit" value = "提交"/>
  </form
 
>

1. 其他input型別

<form>
  number     <input type = "number" /><br><br>  <!--細調數字-->
  range      <input type = "range" /><br><br>  <!-- 範圍拉條-->
  color      <input type = "color" /><br><br>   <!-- 獲取顏色 -->
  image      <input type = "image" src = "color.png" alt = "圖片資料"/><br><br>   <!-- 可作為圖片提交按鈕提交表單  -->
   <input type = "submit" value = "提交"/>
  </form>

type=image和type=submit都可以相應回車，並且都能提交。不過唯一的區別就是type=image的input提交方式會把按鈕點選的位置座標x,y提交過去

html5 input 屬性

1. maxlength 和 minlength 表示輸入框能輸入字串的長度

<input type = "text" maxlength = 10  minlength = 2 /><br><br> <!-- 最多可以輸入10個字元，最小可以輸入倆個字元 -->

1. size 輸入框最多隻能顯示5個字元，你可以輸入無數個

<input type = "text" size = 5 /><br><br> <!-- 輸入框最多隻能顯示5個字元，你可以輸入無數個 -->

1. required 必填欄位

<input type = "text" required /><br><br>

1. multiple multiple 表示多輸入框選擇多個內容輸入，注意用逗號分割

  <label>聯絡人: <input type=email multiple name=cc list="contacts"></label>
  <datalist id="contacts">
     <option value="[email protected]">
     <option value="[email protected]">
     <option value="[email protected]">
     <option value="[email protected]">
  </datalist>

1. pattern 自定義正則表示式規則，校驗輸入框字元

 <input type = "text" patten = "^([0-9]){7,18}(x|X)?$" /><!--校驗身份證-->

1. min and max 允許輸入框最大和最小值，通常用於type是日期，number，range型別

<input name=bday type=date max="1979-12-31">
<input name=quantity required="" type="number" min="1" value="1">

1. step 通常用於日期，number和range型別，用來表示單步的值

<input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">`

1. list 用於指定下拉表單的物件資料

 <label>Cc: <input type=email name=cc list="contacts"></label>
  <datalist id="contacts">
     <option value="[email protected]">
     <option value="[email protected]">
     <option value="[email protected]">
     <option value="[email protected]">
  </datalist>

1. placeholder 在表單中顯示提示資訊

<input type="email" name="email" placeholder ="輸入郵箱" />

10.Autocomplete 是否開啟自動匹配輸入功能，它通過cookie把上次填寫submit的表單value存了下來，作為自動匹配的項，autocomplete = “on||off”，可以在form直接autocomplete = “off”把整個表單自動匹配輸入功能去掉

 <form >
  <label>
   <input type = "text" name = "inputName" autocomplete="off" />
    <input type = "text" name = "inputAge" autocomplete="on" />
   <input type = "submit" value = "提交"/>
  </form>

html5 一些常用標籤

1. label 常用用來包裹input和提示文字，如下面，當你點選男或女的文字時，自動會觸發radio的點選，不用直接點選radiao才會觸發點選事件

<label>男：<input type = "radio" name = "sex"/></label>
<label>女：<input type = "radio" name = "sex"/></label>

1. optgroup 可以對下拉選單選項進行分組

 <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>

1. datalist 資料列表，常用用來和input的list屬性一起用，可以輸入自動匹配，類似autocomplete

<label>聯絡人: <input type=email name=cc list="contacts"></label>
  <datalist id="contacts">
     <option value="[email protected]">
     <option value="[email protected]">
     <option value="[email protected]">
     <option value="[email protected]">
  </datalist>

1. progress 進度條標籤設定value可以顯示當前進度

<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

html5 語義化文件結構標籤

1. header 結構的頭部
2. menu 選單標籤
3. aside 理解為結構左邊欄，通常放一些目錄
4. nav 導航標籤，例如麵包屑導航
5. section 模組標籤，和div差不多，但是比div語義化重一些，一般我做web app開發，一個tab頁處理作為一個section
6. article 文章標籤，一般是有明確標題，內容，底部作者等等的語義
7. sumary 摘要標籤
8. main 一個article裡面的主要內容
9. details 詳細標籤
10. address 表示地址標籤
11. time 表示時間標籤
12. footer 結構的底部

自己理解分析的一個圖：

換衣有錯指出，一起交流

部落格參考：