html:form

差分

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

この比較画面へのリンク

--- html:form [2023/04/05 13:35] – 削除 nullpon
+++ html:form [2025/10/07 15:20] (現在) – [number input] nullpon
@@ 行 1: / 行 1: @@
+<markdown>
+# HTML Form
+- 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>

html/form.1680701751.txt.gz · 最終更新: 2023/04/05 13:35 by nullpon