文書の過去の版を表示しています。

フォーム

HTML5で追加されたフォーム要素

変更点多数だが、2010年9月現在、ほとんどのブラウザは未対応。OperaがURLやDate等に対応しているほか、iPhoneで使うとソフトウェアキーボードがそれぞれのフォームに適したキーに変化する。iPhoneサイトを作成するならば積極的に使いたい。

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属性、フィールドの情報表示

<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属性）を切り替えられる。

<input type="text" name="a" value="1"><br>
<input type="submit">（formaction指定なし、このページが再表示される）<br>
<input type="submit" formaction="/html/html5">（formaction指定あり、対応ブラウザでは /html/html5 に移動する）

</form> </html>

Cat Paw Software

目次

フォーム

HTML5で追加されたフォーム要素

送信先の切り替え