まずは現時点で各ブラウザーのサポート状況をまとめておきます、下記のリストをご覧ください。
ブラウザー | 説明 |
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>
0 件のコメント:
コメントを投稿