<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="text">の使い方 - HTML

input type="url"の注意点

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

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

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

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

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

関連するページを読む

CSSの:invalidで入力エラーのあるフィールドを装飾する

input type="url"の属性

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

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

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

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

関連するページを読む

<input type="text">の使い方 - HTML

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

関連するページを読む

inputタグ・コンプリートガイド - HTML