<input>要素の"tel"型

<input>要素の”tel”型

フォーム内で「電話番号」を入力するための入力欄を設ける際に使用されます。

email型 や url型 とは異なり、送信前に値が特定の書式であると自動的には検証されません。
電話番号の書式は、各国で異なるためです。

tel型 に対応していないブラウザの場合は、text型 として扱われます。

属性

<input> 要素の tel型 では、以下の属性が使用できます。

value

入力欄の初期値を設定します。また、フォームの送信時には入力された値が設定されています。

readonly

この属性を指定した場合、値が変更できなくなります。

maxlength

入力できる、最大文字数を指定します。

minlength

入力できる、最小文字数を指定します。

pattern

値として「正規表現テキスト」を指定することで、メールアドレスの妥当性チェックをカスタマイズすることが出来ます。
なお、指定する正規表現テキストは、JavaScriptの RegExp型 で使用される正規表現テキストになります。

placeholder

プレースホルダーとして表示するテキストを指定します。

size

入力欄の見た目上のサイズを整数値で指定します。

サンプル

See the Pen OJLwYKw by Masahiko Iwakiri (@m-iwakiri) on CodePen.


 

このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs: https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?: https://caniuse.com/#home

コメント

タイトルとURLをコピーしました