Cat Paw Software

ユーザ用ツール

サイト用ツール

トレース: • form
html:form

差分

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

この比較画面へのリンク

次のリビジョン		前のリビジョン
html:form [2010/09/29 04:49] – 外部編集 127.0.0.1html: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 
 + 
 + 
 +## email input 
 + 
 +```html5 
 +<input type="email"> 
 +``` 
 + 
 + 
 +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>
  
-  * 新しい input type 
-  * 入力サジェスト（input list属性とdatalist要素） 
-  * form method属性のDELETE、PUT対応 
-  * ネストしていないform要素とinput select要素の関連付け（input select要素のform属性） 
-  * フォーム入力値バリデーション 
-    * 入力必須項目の明示（required属性） 
-    * 正規表現マッチング（pattern属性） 
-  * select要素のoptionの内容を外部参照可能に（select data属性） 
  
-<html> 
-<form action="" method="get"> 
-<table> 
-<tr><td>Search</td><td><input type="search"/></td> 
-<tr><td>URL</td><td><input type="url"/></td></tr> 
-<tr><td>E-mail</td><td><input type="email"/></td></tr> 
-<tr><td>Date</td><td><input type="date"/></td></tr> 
-<tr><td>Time</td><td><input type="time"/></td></tr> 
-<tr><td>Number</td><td><input type="number"/></td></tr> 
-<tr><td>Range</td><td><input type="range" max="10" min="1"/></td></tr> 
-<tr><td>Week</td><td><input type="week"/></td></tr> 
-<tr><td>Datetime</td><td><input type="datetime"/></td></tr> 
-<tr><td>Color</td><td><input type="color"/></td></tr> 
-</table> 
-</form> 
-</html> 
html/form.1285735778.txt.gz · 最終更新: (外部編集)