を使ったURL入力フィールドの作成方法を解説。ブラウザによる自動検証の仕組みや、pattern属性・required属性によるカスタマイズ、実用的なサンプルコードを紹介します。">
HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでURL入力タイプ（type="url"）を使用する方法を解説

URL入力タイプとは？

HTMLでURLを入力するフィールドを作成するには、<input type="url">を使用します。この入力タイプを指定することで、ユーザーはWebサイトのアドレスを簡単に入力できるようになります。特にスマートフォンやタブレットでは、URL入力に適したキーボード（「/」や「.com」などのキーを含む）が自動的に表示されるため、入力の手間を大幅に減らせます。

ブラウザによる自動検証機能

多くのモダンブラウザでは、URL入力タイプに入力された値が自動的に検証されます。例えば、URLの形式が不正な場合（「.com」などのドメイン部分が抜けている場合など）にフォームを送信しようとすると、送信が拒否され、「URLを入力してください」といったエラーメッセージが表示されます。

ただし、この検証機能の対応状況はブラウザによって異なります。未対応のブラウザでは、通常のテキスト入力フィールドと同じように動作する点に注意しましょう。

サンプルコード

以下のコードを実行して、HTMLでURL入力タイプを使用する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input URL</title>
   </head>

   <body>
      <form action="" method="get">
         詳細情報：<br><br>
         氏名<br><input type="text" name="sname"><br>
         WebサイトURL<br><input type="url" name="website"><br>
         <input type="submit" value="送信">
      </form>
   </body>
</html>

実行結果

このコードをブラウザで開くと、「氏名」と「WebサイトURL」の2つの入力フィールドを持つフォームが表示されます。URLフィールドに不正な形式の文字列（例：「example」のようにドメインを含まない文字列）を入力して送信ボタンを押すと、ブラウザがエラーを表示し、フォームは送信されません。「https://example.com」のような正しい形式を入力すれば、問題なく送信できます。

より使いやすくするためのポイント

placeholder属性で入力例を表示する

placeholder属性を使うと、入力欄に「https://example.com」のような入力例を薄く表示でき、ユーザーの迷いを減らせます。

<input type="url" name="website" placeholder="https://example.com">

pattern属性で検証ルールをカスタマイズする

デフォルトの検証だけでは不十分な場合は、pattern属性で正規表現を指定することで、より厳密な入力チェックが可能になります。

required属性で必須項目にする

required属性を追加すると、URLフィールドを空のままフォームを送信できなくなります。

<input type="url" name="website" required>

まとめ

<input type="url">を使えば、JavaScriptを書かなくてもURL形式の入力チェックをブラウザ側で自動的に行えます。モバイルデバイスでの入力支援効果も高いため、WebサイトのURLを入力させるフォームでは積極的に活用しましょう。

  1. HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

    テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html>    <body&

  2. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep