JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【HTML5入門】URL専用入力フィールド「type=url」の使い方とバリデーション

type="url" とは

HTML5で新しく追加された input の type="url" は、URLアドレスのみを受け付ける入力フィールドを作成するための入力タイプです。ユーザーが通常の文字列を入力してフォームを送信しようとした場合、ブラウザの標準機能によって自動的に検証が行われ、有効なURL形式以外の入力は拒否されます。

具体的には、https://www.qries.com のようなwwwを含む形式でも、https://qries.com のようなwwwを含まない形式でも送信できますが、「ただのテキスト」が入力された場合はエラーメッセージが表示され、正しいURLの入力を促されます。

基本的なコード例

以下は、type="url" を使ったシンプルなフォームの実装例です。

<!DOCTYPE HTML>
<html>
    <body>
        <form action="/cgi-bin/html5.cgi" method="get">
            Enter URL : <input type="url" name="newinput" />
            <input type="submit" value="submit" />
        </form>
    </body>
</html>

このフォームを実行すると、「Enter URL」というラベルの横にURL入力用のテキストボックスと「submit」ボタンが表示され、ユーザーがURLを入力して送信できるようになります。

活用のポイント

  • 自動バリデーション：JavaScriptを書かなくても、対応ブラウザが送信時にURL形式をチェックしてくれるため、フロントエンド側の入力ミスを減らせます。
  • モバイル端末での利便性：スマートフォンやタブレットでは、この入力フィールドにフォーカスすると「/」「.com」などのキーを備えたURL入力用ソフトウェアキーボードが表示されるため、入力の手間が大幅に軽減されます。
  • サーバー側の検証も併用を：クライアント側のバリデーションは回避される可能性があるため、セキュリティを考慮する場合はサーバーサイドでもURLの妥当性チェックを行うことが推奨されます。

このように type="url" を活用することで、少ないコード量でユーザビリティの高いフォームを実現できます。

  1. HTMLのsearch入力タイプの使い方をわかりやすく解説

    HTMLで検索用の入力欄を作成するには、<input type=search> を使用します。これは検索フィールド専用の入力タイプで、見た目は通常のテキストフィールドとほぼ変わりませんが、「検索欄である」という意味（セマンティクス）をブラウザや支援技術に伝えることができます。この入力タイプを使うことで、サイト内検索などの検索バーを簡単に実装できます。多くのブラウザでは、入力内容を消去できる「×」ボタンが自動的に表示されるのも特徴です。基本構文<input type=search name=search>使用例以下のコードを実行すると、HTMLにおける検索入力タイプの使い

  2. HTMLでメールアドレス入力欄（input type="email"）を使う方法を解説

    email入力タイプとはHTMLでは、<input type=email> を使うことで、メールアドレス専用の入力フィールドを簡単に作成できます。この入力タイプを指定すると、ユーザーはフォームにメールアドレスを入力できるようになります。対応しているブラウザでは、入力された内容が自動的に検証されるのも大きな特徴です。たとえば「@」や「.（ドット）」が含まれていない不正な形式のメールアドレスを入力すると、フォームは送信されず、「有効なメールアドレスを入力してください」といったエラーメッセージが表示されます。これにより、JavaScriptなどを書かなくても基本的な入力チェックが実現でき