HTML5表單，html5表單一實例

HTML5表單，html5表單一實例

HTML5中添加了表單方面的諸多功能，包括增加input輸入類型、表單元素、form屬性和input屬性等。

一.新增的Input輸入類型：

     email:      <input type="email" name="user_email" />

     url:           <input type="url" name="user_url" />

     number:  <input type="number" name="user_number"  min="1" max="20" step="4" />   max:規定允許的最大值；min:規定允許的最小值；step:規定合法的數字間隔(如果step="4"，則合法的數是-4、0、4、8)；value:規定預設值

    range:     <input type="range" name="user_range"min="1" max="20" step="4" />

    日期類型: date、month、week、time、datetime、datetime-local

    search:   <input type="search" name="user_search" />

    tel:           <input type="tel" name="user_tel" />

    color:      <input type="color" name="user_color" />

二.新增的input屬性：

    autocomplete:  協助使用者在input類型的輸入框中實現自動完成內容輸入，這些Input類型包括：text、search、url、telephone、email、password、datepickers、range和color；該屬性值有3種：on、off和空值

    autofocus:         擷取頁面表單控制項焦點，同一個頁面只能使用一個autofocus屬性值；設定on即擷取焦點
                              <input type="text" name="user_name" autofocus="on" />

    list:                    HTML5中新增了一個datalist元素，可以實現資料列表的下拉效果，外觀類似autocomplete，使用者可從列表中選擇，也可自行輸入。而list屬性用於指定輸入框所綁定的datalist元素，其值是某個datalist的id         

請輸入城市<input type="text" list="<span style="color:#ff0000;">text_list</span>" name="weblink" /><datalist id="<span style="color:#ff0000;">text_list</span>">   <option value="BeiJing">BeiJing</option>   <option value="QingDao">QingDao</option>   <option value="QingHai">QingHai</option></datalist>

  list屬性適用於以下Input輸入類型：text、search、url、telephone、Email、date pickers、number、range、color

   min、max、step:  新增的min、max、step屬性用於為包含數字或日期的Input輸入類型規定限制，也就是給這些類型的輸入框加一個數值的約束，適用於date、pickers、number和range標籤。

   multiple:該屬性支援input輸入類型中的file類型一次選擇多個檔案 

 <input type="file" name="img" multiple="multiple" /><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">   </span>

  patterm:  用於驗證Input類型輸入框中使用者輸入的內容是否與自訂的Regex相匹配，適用於以下類型的Input標籤：text、search、url、telephone、Email、password。
  請輸入郵遞區號：  <input type="text" name="zip_code" pattern="[0-9]{6}"/>    該行表示輸入框規定必須輸入6位元的郵遞區號

   placeholder:用於為Input類型的輸入框提供一種提示。適用於:text、search、url、telephone、Email和password
    請輸入郵遞區號：  <input type="text" name="zip_code" pattern="[0-9]{6}"/>    

   required:  內容不可為空 。適用於：text、search、url、telephone、Email、password、date pickers、number、checkbox、radio和file
   <input type="text" name="n_name" required="required"/>