差分

このページの2つのバージョン間の差分を表示します。

--- html:form [2011/07/04 05:40] – nullpon
+++ html:form [2025/10/07 15:20] (現在) – [number input] nullpon
@@ 行 1: / 行 1: @@
-====== フォーム ======
+<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="." 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属性で関連付けされているため
+```html5
-一緒にsubmitされる。</p>
+<input type="email">
-</html>
+```
-form属性はfieldsetタグにも設定可能。formに囲まれていない入力フィールドをまとめてformに関連付けできる。
+email入力フィールド。入力値がemailとして正しいかバリデーションする。デフォルトで以下の正規表現によるチェックが行われる
+```
+/^[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])?)*$/
+```
+入力したemailがこの正規表現にマッチする場合CSSの:valid擬似クラスが、マッチしない場合は:invalid擬似クラスが自動的にセットされる。
+## url input
+URL入力欄。URLの形式として正しいかバリデーションする。`hoge:`などのように適当なスキームでも通ってしまうのでpattern属性と併用すると良い。
+```html5
+<input type="url" pattern="https?://.+">
+```
+## number input
+数字入力欄。数字であるかバリデーションする。
+## tel input
+電話番号入力欄。バリデーションがありそうでない（国によって電話番号のフォーマットが異なるため）
+</markdown>
-<html>
-<fieldset form="xform">
-  <legend>fieldset</legend>
-  <input type="text" required="required" name="c1"><br>
-  <input type="text" required="required" name="c2">
-</fieldset>
-</html>