| 両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン |
| html:form [2011/07/04 05:40] – nullpon | html:form [2025/10/07 15:20] (現在) – [number input] nullpon |
|---|
| ====== フォーム ====== | <markdown> |
| ===== HTML5で追加されたフォーム要素 ===== | # HTML Form |
| 変更点多数だが、2010年9月現在、ほとんどのブラウザは未対応。OperaがURLやDate等に対応しているほか、iPhoneで使うとソフトウェアキーボードがそれぞれのフォームに適したキーに変化する。iPhoneサイトを作成するならば積極的に使いたい。 | |
| |
| [[http://d.hatena.ne.jp/paulownia/20100815/1281886563|iPhone用サイトのフォームにはHTML5の属性を使おう - nullpo.printStackTrace();]] | - https://html.spec.whatwg.org/multipage/forms.html#forms |
| |
| * 新しい input type | |
| * 入力サジェスト（input list属性とdatalist要素） | |
| * form method属性のDELETE、PUT対応 | |
| * ネストしていないform要素とinput select要素の関連付け（input select要素のform属性） | |
| * フォーム入力値バリデーション | |
| * 入力必須項目の明示（required属性） | |
| * 正規表現マッチング（pattern属性） | |
| * select要素のoptionの内容を外部参照可能に（select data属性） | |
| * placeholder属性、フィールドの情報表示 | |
| |
| <html> | ## email input |
| <form action="./form" method="get" id="xform"> | |
| <table class="inline"> | ```html5 |
| <thead> | <input type="email"> |
| <tr> | ``` |
| <th>type</th> | |
| <th></th> | |
| </td> | email入力フィールド。入力値がemailとして正しいかバリデーションする。デフォルトで以下の正規表現によるチェックが行われる |
| </thead> | |
| <tbody> | |
| <tr><td>Search</td> <td><input name="a1" type="search" placeholder="検索キーワードを入力"/></td></tr> | ``` |
| <tr><td>URL</td> <td><input name="a2" type="url" placeholder="URLを入力" /></td></tr> | /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ |
| <tr><td>E-mail</td> <td><input name="a3" type="email" placeholder="Emailアドレスを入力" /></td></tr> | ``` |
| <tr><td>Date</td> <td><input name="a4" type="date" placeholder="日付を入力" /></td></tr> | |
| <tr><td>Time</td> <td><input name="a5" type="time" placeholder="時間を入力" /></td></tr> | 入力したemailがこの正規表現にマッチする場合CSSの:valid擬似クラスが、マッチしない場合は:invalid擬似クラスが自動的にセットされる。 |
| <tr><td>Number</td> <td><input name="a6" type="number" placeholder="数字を入力" /></td></tr> | |
| <tr><td>Range</td> <td><input name="a7" type="range" max="9" min="1" placeholder="0から9までの数字を入力" /></td></tr> | ## url input |
| <tr><td>Week</td> <td><input name="a8" type="week" placeholder="週を入力" /></td></tr> | |
| <tr><td>Datetime</td><td><input name="a9" type="datetime" placeholder="日時を入力" /></td></tr> | URL入力欄。URLの形式として正しいかバリデーションする。`hoge:`などのように適当なスキームでも通ってしまうのでpattern属性と併用すると良い。 |
| <tr><td>Color</td> <td><input name="a10" type="color" placeholder="色を入力" /></td></tr> | |
| <tr><td>Text</td> <td><input name="a11" type="text" pattern="[0-9]{3}-[0-9]{4}" placeholder="pattern指定text" />（郵便番号 123-4567）</td></tr> | |
| <tr><td>Text</td> <td><input name="a12" type="text" required="required" placeholder="required指定text" /></td></tr> | ```html5 |
| <tr><td>Text</td> <td><input name="a13" type="text" list="xlist" placeholder="suggest指定text" /></td></tr> | <input type="url" pattern="https?://.+"> |
| <tr><td></td> <td><input type="submit" value="送信"/></td></tr> | ``` |
| </tbody> | |
| </table> | ## number input |
| <datalist id="xlist"> | |
| <option value="Madoka"> | 数字入力欄。数字であるかバリデーションする。 |
| <option value="Sayaka"> | |
| <option value="Homura"> | ## tel input |
| <option value="kyoko"> | |
| <option value="mami"> | 電話番号入力欄。バリデーションがありそうでない（国によって電話番号のフォーマットが異なるため） |
| </datalist> | |
| </form> | |
| | </markdown> |
| |
| <p><input type="text" form="xform" required="required" name="b1" />これは上のformタグの外側にあるフィールドだが、form属性で関連付けされているため | |
| 一緒にsubmitされる。</p> | |
| </html> | |
