html:form

差分

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

この比較画面へのリンク

--- html:form [2025/10/06 00:39] – nullpon
+++ html:form [2025/10/07 15:20] (現在) – [number input] nullpon
@@ 行 1: / 行 1: @@
 <markdown>
-# form
+# HTML Form
+- https://html.spec.whatwg.org/multipage/forms.html#forms
-HTMLのform
 ## email input
-```html
+```html5
 <input type="email">
 ```
-email入力フィールド。入力値がemailとして正しいかバリデーションできる。デフォルトで以下の正規表現によるチェックが行われる
+email入力フィールド。入力値がemailとして正しいかバリデーションする。デフォルトで以下の正規表現によるチェックが行われる
@@ 行 20: / 行 21: @@
 入力したemailがこの正規表現にマッチする場合CSSの:valid擬似クラスが、マッチしない場合は:invalid擬似クラスが自動的にセットされる。
+## url input
+URL入力欄。URLの形式として正しいかバリデーションする。`hoge:`などのように適当なスキームでも通ってしまうのでpattern属性と併用すると良い。
+```html5
+<input type="url" pattern="https?://.+">
+```
+## number input
+数字入力欄。数字であるかバリデーションする。
+## tel input
+電話番号入力欄。バリデーションがありそうでない（国によって電話番号のフォーマットが異なるため）
 </markdown>

html/form.1759711142.txt.gz · 最終更新: 2025/10/06 00:39 by nullpon