<input type="url"> URL入力欄を作成する

WebページにURLの入力欄を設置するときには<input type="text">ではなく<input type="url">を使うのがおすすめです。

<form>
  <label for="site-url">URLを入力</label>
  <input type="url" id="site-url" >
  <button type="submit">送信</button>
</form>

見た目は<input type="text">と変わらないのですが、バリデーションが利くというメリットがあります。

input type="url"でバリデーション・エラー

これはChromeでの<input type="url">の表示例です。<form>内で使用すると、間違った形式のURLの送信に対してエラーを表示してくれます。

input type="url"の注意点

サーバーでのチェックも忘れずに

上で紹介したバリデーションはあくまでもブラウザによるブラウザ上だけのチェックです。必ずしも誤った形式のURLをすべて弾いてくれるとは限りません

多少のHTMLの知識がある人なら、バリデーションを回避してサーバーにURL以外の文字列を送ることができてしまいます。サーバー側でも正しいURL形式かどうかチェックしましょう。

スタイルや文言を変えるなら

ブラウザによってエラーメッセージの文言やスタイルは異なります。細かな指定をしたい場合は、JavaScriptでバリデーションを作るのが良いでしょう。
ただし、CSSの:invalidを使えば、エラーが検知された入力欄のスタイルを変えることができます。

input type="url"の属性

基本的にtype="text"と同じ属性を使うことができます。

<input
  type="url"
  name="フィールドの名前"
  placeholder="プレースホルダー"
  value="初期値"
  size="40"
  required
  >

よく使う属性を簡単に紹介します。

  • name:フィールドの名前を指定
  • required:入力必須にする
  • placeholder:プレースホルダーを指定
  • size:入力欄の幅を指定(デフォルトは20)
  • autofocus:ページ読み込み時にフォーカスをあてる
  • spellcheck:スペルチェックを有効にするかどうか。spellcheck="false"でオフにできる

それぞれの詳しい解説は下記のページをご覧ください。


<input>タグの基本的な使い方や、その他の種類(電話番号や数字、パスワードなど)のテキストフィールドについては下記のページをご覧ください。

ブラウザ対応状況

主要ブラウザ全てで使用できます 🎉

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    5〜
  • Safariのアイコン
    Safari
    5〜
  • Firefoxのアイコン
    Firefox
    4〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    10〜

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    108〜
  • iOS Safariのアイコン
    iOS Safari
    3.2〜

caniuse.comで詳しく見る