プログラミング

HTML5 フォーム完全ガイド

最終更新： 17/04/2025
1分未満

HTML5における「フォーム（Forms）」は、ウェブページ上でユーザーと情報をやり取りするための重要な要素です。フォームは、ユーザーからデータを収集し、サーバーへ送信するために使用されます。HTML5は、これらのフォームの作成に関して多くの改善を行い、開発者にとって使いやすく、柔軟性のある機能を提供しています。この記事では、HTML5のフォームについての基本から高度な機能まで、完全かつ包括的に説明します。

1. HTMLフォームの基本

HTMLフォームは、

関連記事
タグで囲まれた範囲で作成されます。フォームは通常、ユーザーが情報を入力するためのインターフェースを提供します。基本的なフォームは次のように記述します：

html
<form action="submit_form.php" method="post">
    <label for="name">名前:label>
    <input type="text" id="name" name="name" required>
    <br><br>
    <label for="email">メールアドレス:label>
    <input type="email" id="email" name="email" required>
    <br><br>
    <input type="submit" value="送信">
form>

上記のコードでは、

タグの中にユーザーが情報を入力できるフィールド（タグ）を配置し、action属性でデータを送信する先のURLを指定、method属性で送信方法（GETまたはPOST）を指定しています。

  • action: フォームのデータが送信されるURLを指定します。

  • method: データ送信の方法を指定します。GETはURLにデータを付加して送信し、POSTはデータをリクエストボディに含めて送信します。

2. HTML5で追加されたフォーム要素

HTML5では、フォームに関する多くの新しい要素や属性が追加されました。これにより、よりインタラクティブでユーザーフレンドリーなフォームの作成が可能になりました。

2.1 新しい入力タイプ

HTML5では、以下のような新しい入力タイプが追加され、データの入力や検証が簡単になりました：

  • email: メールアドレスの入力を要求するフィールドです。ブラウザは入力された内容が正しいメールアドレスの形式であるかを自動的に検証します。

html
<input type="email" id="email" name="email" required>

  • tel: 電話番号を入力するためのフィールドです。デバイスによっては、数字キーパッドが表示されることがあります。

html
<input type="tel" id="phone" name="phone" required>

  • url: URLの入力を要求するフィールドです。ブラウザはURL形式を検証します。

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

  • number: 数値入力を要求するフィールドです。ブラウザによっては、数値専用のインターフェース（増減ボタンなど）が表示されます。

html
<input type="number" id="quantity" name="quantity" min="1" max="100" required>

  • date, time, datetime-local: 日付や時間を入力するためのフィールドです。ブラウザによっては、カレンダーや時計のインターフェースが表示されます。

html
<input type="date" id="birthday" name="birthday">

2.2 新しいフォーム属性

HTML5では、いくつかの新しいフォーム属性も追加されました。これにより、フォームの動作をより柔軟に制御できます。

  • required: この属性を指定した入力フィールドは必須となり、ユーザーが入力しない限りフォームを送信できません。

html
<input type="text" name="name" required>

  • placeholder: 入力フィールドに初期表示されるヒントテキストを指定します。

html
<input type="text" name="username" placeholder="ユーザー名">

  • autofocus: フォームが読み込まれたときに自動的にフォーカスを当てるフィールドを指定します。

html
<input type="text" name="email" autofocus>

  • pattern: 入力されたデータが指定した正規表現に一致するかを検証します。

html
<input type="text" name="postalcode" pattern="\d{3}-\d{4}" required>

  • min, max, step: 数値入力の際に、入力できる最小値、最大値、ステップ（増減幅）を指定します。

html
<input type="number" name="age" min="18" max="99" step="1" required>

3. フォーム要素の種類

HTML5では、フォーム内で使用できる多くの異なる要素が提供されています。それぞれの要素は、異なるデータの入力や送信をサポートします。

3.1 タグ

タグは、最も一般的に使用されるフォーム要素です。多くのタイプ（テキスト、メール、パスワード、ラジオボタン、チェックボックス、ファイル選択など）をサポートしています。

  • type=”radio”: ラジオボタン（単一選択）。

html
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

  • type=”checkbox”: チェックボックス（複数選択）。

html
<input type="checkbox" name="newsletter" value="yes"> ニュースレターを購読する

  • type=”file”: ファイル選択ボタン。

html
<input type="file" name="profile_picture">

3.2 タグは、複数の選択肢から1つを選ぶドロップダウンリストを作成します。

html
<select name="country">
    <option value="jp">日本option>
    <option value="us">アメリカoption>
    <option value="fr">フランスoption>
select>

3.3