HTML <input type="url"> 属性値

試してみましょう

<form>
  <label for="url">https:// の URL を入力してください:</label>
  <input
    type="url"
    name="url"
    id="url"
    placeholder="https://example.com"
    pattern="https://.*"
    size="30"
    required />
</form>

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

入力値はフォームの送信前に自動的に検証され、空欄または正しい形式の URL のどちらかであることが確認されます。 CSS の :valid および :invalid 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当な URL であるかどうかを視覚的に示します。

値

<input> 要素の value 属性には、自動的に URL の構文として検証される文字列が入ります。より具体的に言うと、検証を通る値の書式は下記の 2 通りがあります。

1. 空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを示します。
2. 単一の整形式の絶対 URL。これがあるからといって、その URL アドレスが存在するということには必ずしもなりません。しかし、少なくとも整形式で書式化されています。 urlscheme://rest-of-url に一致する項目は、入力された urlscheme が存在しなくても有効である可能性があります。

検証の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。

追加の属性

グローバル属性および、型に関係なくすべての <input> 要素を操作する属性に加え、 url 型の入力欄は次の属性にも対応しています。

list

list 属性の値は、同じ文書内にある <datalist> 要素の id です。 <datalist> は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち type と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

maxlength

ユーザーが url 入力欄に入力することができる（UTF-16 コード単位での）文字列長の最大値です。 0 以上の整数値である必要があります。 maxlength が指定されていないか、無効な値が指定されていると、この url 入力欄には文字列長の最大値が設定されません。この値は minlength の値以上である必要もあります。

フィールドの URL の長さが UTF-16 コード単位で maxlength の長さを超えていると、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

minlength

ユーザーが url 入力欄に入力することができる（UTF-16 コード単位での）文字列長の最小値です。これは非負の整数値で、 maxlength で指定された値以下である必要があります。 minlength が指定されていないか、無効な値が指定されていると、この url 入力欄には文字列長の最小値が設定されません。

入力欄の URL の長さが UTF-16 コード単位で minlength の長さよりも短いと、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

pattern

pattern 属性は、指定する場合は正規表現であり、入力欄の value が制約検証に合格するためにはこれと一致しなければなりません。これは RegExp 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに 'u' フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。

詳細と例についてはパターン検証の節を参照してください。

placeholder

placeholder 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることはできません。

コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方（英語）を参照してください。

readonly

readonly は論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value は、 JavaScript コードから直接 HTMLInputElement の value プロパティを設定することで変更することができます。

size

size 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の font 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 maxlength 属性を使用してください。

spellcheck

spellcheck はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは spellcheck 属性の <input> 要素の使用に関して特に考えます。 spellcheck で利用できる値は次の通りです。

false

この要素でスペルチェックを無効にします。

true

この要素でスペルチェックを有効にします。

"" (空文字列) または値なし

スペルチェックについて、要素の既定の動作に従います。これは親の spellcheck 設定や、その他の要因に基づくことがあります。

入力欄では、 readonly 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。

spellcheck を読み取ることで返される値は、ユーザーエージェントの設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。

URL 入力欄の使用

URL 入力欄を type に適切な値 url を指定して作成すると、入力されたテキストが少なくとも正規の URL となり得る正しい形式であることを自動的に検証することができるようになります。これにより、ユーザーが自分のウェブサイトのアドレスを間違って入力したり、無効なアドレスを入力したりすることを避けることができます。

しかし、指定されたテキストが実際に存在する URL であるか、サイトのユーザーに対応しているか、またはその他の方法で受け入れられるかを確認するには、これだけでは不十分であることに注意することが重要です。これは、フィールドの値が URL として適切にフォーマットされていることを保証するものです。

基本的な URL 入力欄

この要素は、基本的な検証機能を備えた標準的なテキスト入力フィールドとして実装しています。最も基本的な形として、 URL 入力は次のように実装することができます。

<input id="myURL" name="myURL" type="url" />

有効と見なされるのは空欄のときと、有効な書式の URL アドレスが 1 つだけ入力されたときであり、それ以外のときは無効とみなされることに注意してください。 required 属性を追加すると、適切な書式の URL のみが許可されるようになり、空の場合は入力が有効であるとは見なされなくなります。

ここでは何も不思議なことは起こりません。サーバーに送信されると、上記の入力のデータは、例えば myURL=http%3A%2F%2Fwww.example.com のように表現されます。文字が必要に応じてエスケープされていることに注意してください。

プレイスホルダー

入力データがどのような形式を取るべきか、文脈上のヒントを提供することが役立つ場合があります。これは、ページのデザインがそれぞれの <input> に説明的なラベルを提供していない場合に特に重要になることがあります。ここがプレイスホルダーの登場する場面です。プレイスホルダーは value が取るべきフォームを示す値で、有効な値の例を提示します。この値は要素の value が "" の時にエディットボックス内に表示されます。ボックスにデータが入力されると、プレイスホルダーが消え、ボックスが空になると、プレイスホルダーが再び表示されます。

ここでは、 url 入力欄に http://www.example.com というプレイスホルダーが設定されています。編集フィールドの内容を操作すると、プレイスホルダーが消えたり現れたりすることに注意してください。

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

入力欄の寸法の制御

入力ボックスの物理的な長さと、入力テキストに許される最小・最大の長さも制御することができます。

物理的な入力欄の寸法

入力ボックスの物理的な大きさは、 size 属性で制御することが可能です。この属性により、入力ボックスが一度に表示できる文字数を指定することができます。この例では、例えば url のエディットボックスの幅は 30 文字です。

<input id="myURL" name="myURL" type="url" size="30" />

要素の値の長さ

size は、入力される URL の長さの制限とは別のものです。入力される URL の長さの最小値は minlength 属性で指定でき、同様に、入力される URL の長さの最大値は maxlength 属性で設定することができます。もし maxlength が size を超えている場合は、入力ボックスの内容が操作されたときに、現在の選択部分や挿入部分を表示するために、必要に応じてスクロールします。

以下の例では、幅 30 文字の URL 入力ボックスを生成し、入力内容が 10 文字以上 80 文字以下であることを要求しています。

<input
  id="myURL"
  name="myURL"
  type="url"
  size="30"
  minlength="10"
  maxlength="80" />

既定のオプションの提供

value 属性を言使用した単一の既定値の提供

他と同様に、 url 入力欄に value 属性を設定することで既定値を指定することができます。

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

提案値の提供

さらに一歩進んで、既定の選択肢のリストを用意し、そこからユーザーが選択できるようにすることも可能です。これには list 属性を使用します。これはユーザーをこれらの選択肢に限定しませんが、よく使われる URL をより迅速に選択できるようにします。これは autocomplete へのヒントも提供します。 list 属性は <datalist> 要素の ID を指定し、この要素は 1 つの提案値につき 1 つの <option> 要素を含んでおり、それぞれの option の value は URL 入力ボックスの対応する提案値となっています。

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

<datalist> 要素とその <option> が配置されると、ブラウザーは URL の候補として指定された値を提供します。これは通常、候補を含むポップアップまたはドロップダウンメニューとして表示されます。具体的な使い勝手はブラウザーによって異なるかもしれませんが、通常、編集ボックスをクリックすると、提案された URL がドロップダウンで表示されます。その後、ユーザーが文字を入力すると、リストが調整され、フィルタリングされた一致する値のみが表示されます。ユーザーが選択するか、独自の値を入力するまで、入力された文字ごとにリストが絞り込まれます。

提案値のラベルの使用

label 属性を 1 つまたはすべての <option> 要素に設定することで、テキストのラベルを提供することができます。ブラウザーによっては、ラベルのみを表示するものもあれば、ラベルと URL の両方を表示するものもあります。

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

検証

url 入力欄で利用できる内容の検証には 2 つのレベルがあります。まず、すべての <input> で提供される標準的なレベルの検証があります。これは、入力内容が有効な URL であるための要件を満たしているかどうかを自動的に確認するものです。しかし、もし特別なニーズがあるなら、それを満たすために追加のフィルタリングを追加するオプションもあります。

基本的な検証

url 入力型に対応しているブラウザーは、自動的に検証を行い、 URL の標準の書式に一致するテキストのみが入力ボックスに入力されることを保証します。

URL の構文はかなり入り組んでいます。 WHATWG の URL Living Standard で定義されており、私たちの記事 URL とは何か で初めての人のために説明しています。

URL を必須にする

前述のように、フォームを送信する前に URL の入力を必須にする (フィールドを空白にできない) には、入力に required 属性を含めるだけでよいのです。

パターンによる検証

入力された URL を、単なる「URL に見える文字列」よりも制限し、特定のパターンに適合させたい場合は、pattern 属性を使用してください。この属性は、入力された値が一致すべき正規表現を値として取ります。

例

URL の検証

この例では、説明のために、required 属性を使用して URL が入力されていることを確認し、pattern 属性を使用して、その URL が mozilla.org 上のものになっていることを確認します。

HTML

url 入力欄では、pattern を ".*\.mozilla\.org.*" に設定します。この正規表現は、任意の文字列に ".mozilla.org" が続き、さらに任意の文字列が続くという形式の文字列を検証します。ブラウザーは、指定されたテキストに対して標準の URL フィルターおよびこの独自のパターンの両方を実行するため、結果として「これが有効な URL であり、かつ .mozilla.org が含まれていることを確認する」という検証が行われることになります。

なお、https://developer\.mozilla\.org.* のような厳密なパターンの方が堅牢ですが、その場合、この例では type="url" 属性が不要になってしまいます。

title 属性は、支援技術を利用するユーザーに対して pattern を説明する役割も果たします。

<form>
  <label for="myURL">
    このサイトの URL を入力してください:
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.mozilla\.org.*"
      title="URL には mozilla.org が必要です" />
    <span class="validity"></span>
  </label>
  <button>送信</button>
</form>

CSS

CSS では、コンテンツが :valid であるかか :invalid であるかを適切な content プロパティを追加することでユーザーに視覚的に示し、 代替テキストを含みます。

input:focus:invalid {
  outline: 2px solid red;
}

input:focus:valid {
  outline: 2px solid green;
}

input + span {
  padding: 0 0.3rem;
}

input:invalid + span::after {
  content: "✖" / "コンテンツは有効ではありません";
  color: red;
}

input:valid + span::after {
  content: "✓" / "コンテンツは有効です";
  color: green;
}

結果

このページの URL をコピーして入力欄に貼り付けると、緑色の枠線と緑色のチェックマークが表示されます。mozilla.org が含まれていない URL や無効な URL を入力すると、赤色の枠線と赤色の×印が表示されます。

数々の例については、パターンによる検証と URL 入力欄の使用の節で確認してください。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• HTML フォームガイド
• <input>
• <input type="tel">
• <input type="email">