<input type="url">

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能自動大文字化継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 無し(空要素)

input要素type="url" を指定すると、URLの入力欄を作成できます。


<input type="url" name="example1">

<input type="url" name="example2" size="40" placeholder="http://www.example.com/">

属性
任意属性(共通)
type="" 部品のタイプ url URLの入力欄
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 文字列 入力欄の初期値
disabled 部品の無効化 disabled 値は省略可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
任意属性(部品タイプに依存)
size="" 入力欄の幅 数値 文字数で指定
minlength="" 入力できる最小文字数 数値 文字数で指定
maxlength="" 入力できる最大文字数 数値 文字数で指定
autocomplete="" オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
詳細トークン (詳しくは仕様書をご覧ください)
list="" 入力候補のリスト ID名 関連付けるdatalist要素に指定したID名
pattern="" 入力可能なパターン 正規表現 JavaScriptの正規表現を使用
placeholder="" 入力のヒント 文字列 記入例、フォーマットの例
dirname="" 書字方向の送信に使う名前 文字列 識別するための名前
readonly 読み取り専用 readonly 値は省略可能
required 入力必須 required 値は省略可能
  • 各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています)

どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。

この部品タイプの特徴

URLを入力するための入力欄です。

(実際の表示例)

この部品タイプに対応しているブラウザでは、URLとして正しくない値を送信しようとすると、エラーメッセージが表示される場合があります。(ただし、それほど厳密にチェックしているわけではないようです)

ChromeEdgeFirefoxの場合
任意の位置に https:// 等の文字列 + 1文字で送信可能になるようです。この形式に合わない場合はエラーメッセージが表示されます。

pattern属性の指定例

この部品タイプにおけるpattern属性の指定例です。

URL:<input type="url" name="site" pattern="https?://\S+">
  • 上記の正規表現はかなり甘いです。

pattern属性を使用する場合は、title属性で入力パターンの説明を入れておくことが推奨されています。この説明は、エラーメッセージやツールチップなどで表示される場合があります。

URL:<input type="url" name="site" pattern="https?://\S+" title="URLは、http(s)で始まる絶対URLで記入してください。">

使用例

以前からある属性を指定した例

<dl>

<dt>デフォルト</dt>
<dd><input type="url" name="example1"></dd>

<dt>幅を指定</dt>
<dd><input type="url" name="example2" size="30"></dd>

<dt>最大文字数を指定</dt>
<dd><input type="url" name="example3" size="30" maxlength="500"></dd>

<dt>初期値を指定</dt>
<dd><input type="url" name="example4" size="30" value="http://"></dd>

<dt>無効化を指定</dt>
<dd><input type="url" name="example5" size="30" value="http://" disabled></dd>

<dt>読み取り専用を指定</dt>
<dd><input type="url" name="example6" size="30" value="http://" readonly></dd>

</dl>

表示例
デフォルト
幅を指定
最大文字数を指定
初期値を指定
無効化を指定
読み取り専用を指定
autocomplete属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_url.html">

<p>オン:<input type="url" name="example1" size="30" autocomplete="on"></p>
<p>オフ:<input type="url" name="example2" size="30" autocomplete="off"></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

オン:

オフ:

  • 対応しているブラウザでは、オートコンプリートがオンの状態で送信すると、次の入力時にURLの履歴が表示されます。
pattern属性、placeholder属性、required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_url.html">

<p>URL:<input type="url" name="site" size="30" pattern="https?://\S+" placeholder="https://www.example.com/" title="URLは、http(s)で始まる絶対URLで記入してください。" required> <strong>必須</strong></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

URL: 必須

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。