| 両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン |
| html:form [2011/07/04 05:49] – [送信先の切り替え] nullpon | html:form [2023/04/05 13:35] (現在) – 削除 nullpon |
|---|
| ====== フォーム ====== | |
| ===== HTML5で追加されたフォーム要素 ===== | |
| 変更点多数だが、2010年9月現在、ほとんどのブラウザは未対応。OperaがURLやDate等に対応しているほか、iPhoneで使うとソフトウェアキーボードがそれぞれのフォームに適したキーに変化する。iPhoneサイトを作成するならば積極的に使いたい。 | |
| |
| [[http://d.hatena.ne.jp/paulownia/20100815/1281886563|iPhone用サイトのフォームにはHTML5の属性を使おう - nullpo.printStackTrace();]] | |
| |
| * 新しい input type | |
| * 入力サジェスト（input list属性とdatalist要素） | |
| * form method属性のDELETE、PUT対応 | |
| * ネストしていないform要素とinput select要素の関連付け（input select要素のform属性） | |
| * フォーム入力値バリデーション | |
| * 入力必須項目の明示（required属性） | |
| * 正規表現マッチング（pattern属性） | |
| * select要素のoptionの内容を外部参照可能に（select data属性） | |
| * placeholder属性、フィールドの情報表示 | |
| |
| <html> | |
| <form action="./form" method="get" id="xform"> | |
| <table class="inline"> | |
| <thead> | |
| <tr> | |
| <th>type</th> | |
| <th></th> | |
| </td> | |
| </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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <tr><td>Text</td> <td><input name="a13" type="text" list="xlist" placeholder="suggest指定text" /></td></tr> | |
| <tr><td></td> <td><input type="submit" value="送信"/></td></tr> | |
| </tbody> | |
| </table> | |
| <datalist id="xlist"> | |
| <option value="Madoka"> | |
| <option value="Sayaka"> | |
| <option value="Homura"> | |
| <option value="kyoko"> | |
| <option value="mami"> | |
| </datalist> | |
| </form> | |
| |
| <p><input type="text" form="xform" required="required" name="b1" />これは上のformタグの外側にあるフィールドだが、form属性で関連付けされているため | |
| 一緒にsubmitされる。</p> | |
| </html> | |
| |
| ===== 送信先の切り替え ===== | |
| HTML5対応ブラウザでは、JavaScriptを使わずに、submitボタンごとに送信先（formのaction属性）を切り替えられる。 | |
| |
| <html> | |
| <form action="./form" method="get"> | |
| <input type="hidden" name="a" value="1"><br> | |
| <input type="submit">（formaction指定なし、このページが再表示される）<br> | |
| <input type="submit" formaction="/html/html5">（formaction指定あり、対応ブラウザでは /html/html5 に移動する） | |
| </form> | |
| </html> | |
| |
| <code html> | |
| <form action="./form" method="get"> | |
| <input type="hidden" name="a" value="1"><br> | |
| <input type="submit">（formaction指定なし、このページが再表示される）<br> | |
| <input type="submit" formaction="/html/html5">（formaction指定あり、対応ブラウザでは /html/html5 に移動する） | |
| </form> | |
| </code> | |
| |
| |
