html5 form紹介

html5仕様からたくさんのformタグが追加されました、このトピックで紹介します。

まずは現時点で各ブラウザーのサポート状況をまとめておきます、下記のリストをご覧ください。

ブラウザー	説明
Chrome	5.0からemail,number,tel,url,search,rangeとバリデーション一部をサポート開始
Firefox	4.0からサポート予定
IE	9.0から？
Opera	ほとんどサポートしている
Safari	4.0からemail,number,tel,url,search,rangeとバリデーション一部を、サマートフォンのほうがさらによりよくサポートする

サンプル：
http://html5next.appspot.com/html5_form.html

本サンプルに紹介するタイプは以下になります。
tel、email、url、search、range、number、color、datetime、datetime-local、time、date、week、month、text

ソース：
<table>
 <tr>
  <td>tel</td>
  <td><input type="tel" placeholder="電話番号" required /></td>
 </tr>
 <tr>
  <td>email</td>
  <td>
   <datalist id="contactList"> 
       <option value="aaaa@example.com" label="User A"> 
       <option value="bbbb@example.com" label="User B"> 
   </datalist>   
   <input type="email" autocomplete="off" list="contactList"/>
  </td>
 </tr>
 <tr>
  <td>url</td>
  <td><input type="url" autofocus /></td>
 </tr>
 <tr>
  <td>search</td>
  <td><input type="search" /></td>
 </tr>
 <tr>
  <td>range</td>
  <td>
   <script type="text/javascript"> 
   function showValue(newVal) { 
     document.getElementById("divRange").innerHTML = "<b>" + newVal + "</b>"; 
   } 
   </script>
   <input type="range" min="0" max="100" value="0" step="5" onchange="showValue(this.value)"/>
   <span id="divRange">0</span>
  </td>
 </tr>
 <tr>
  <td>number</td>
  <td><input type="number" /></td>
 </tr>
 <tr>
  <td>color</td>
  <td><input type="color" /></td>
 </tr>
 <tr>
  <td>datetime</td>
  <td><input type="datetime" /></td>
 </tr>
 <tr>
  <td>datetime-local</td>
  <td><input type="datetime-local" /></td>
 </tr>
 <tr>
  <td>time</td>
  <td><input type="time" /></td>
 </tr>
 <tr>
  <td>date</td>
  <td><input type="date" /></td>
 </tr>
 <tr>
  <td>week</td>
  <td><input type="week" /></td>
 </tr>
 <tr>
  <td>month</td>
  <td><input type="month" /></td>
 </tr>
 <tr>
  <td>text</td>
  <td><input type="text" pattern="[0-9]{16}" title="16桁の数字を入力してください。"/></td>
 </tr>
</table>