<input>要素の”url”型
フォーム内で「URL」を入力するための入力欄を設ける際に使用されます。
url型 に対応していないブラウザの場合は、text型 として扱われます。
対応しているブラウザの場合は、入力されたテキストが、URLとして妥当な形式になっているかどうかがブラウザによって検証され、その結果によって、CSS の :valid および :invalid 疑似クラスが自動的に適用され、フィールド上の現在の値が妥当なURLであるかどうかを視覚的に示すことが出来ます。
属性
<input> 要素の url型 では、以下の属性が使用できます。
value
入力欄の初期値を設定します。また、フォームの送信時には入力された値が設定されています。
autocomplete
自動補完機能を提供するかどうかを記述します。
readonly
この属性を指定した場合、値が変更できなくなります。
maxlength
入力できる、最大文字数を指定します。
minlength
入力できる、最小文字数を指定します。
pattern
値として「正規表現テキスト」を指定することで、URLの妥当性チェックをカスタマイズすることが出来ます。
なお、指定する正規表現テキストは、JavaScriptの RegExp型 で使用される正規表現テキストになります。
placeholder
プレースホルダーとして表示するテキストを指定します。
size
入力欄の見た目上のサイズを整数値で指定します。
spellcheck
要素でスペルチェックを有効にするかどうかを指定します。
- false スペルチェックを無効にします。
- true スペルチェックを有効にします。
- 空文字 or 未指定 要素の既定の動作に従います。
サンプル
See the Pen OJLwYKw by Masahiko Iwakiri (@m-iwakiri) on CodePen.
このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント