Skip to content

9. フォームの作成

フォームは、ウェブサイトでユーザーから情報を収集するための重要な要素です。例えば、ログインフォームや登録フォーム、問い合わせフォームなどが典型的な例です。このセクションでは、HTML フォームの基本的な作成方法から、実際に利用できる応用例までを紹介します。

9.1 フォームの基本構造

HTML フォームの基本的な構造は以下のようになります。フォームには、<form>タグとそれを囲むさまざまな入力フィールドが含まれます。

<form action="送信先のURL" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <input type="submit" value="送信" />
</form>

action属性

  • action属性はフォームのデータを送信する先の URL を指定します。

method属性

  • method属性はデータを送信する際の HTTP メソッドを指定します。通常はPOSTまたはGETを使用します。

9.2 フォーム要素

HTML には多様なフォーム要素があり、用途に応じて使い分けます。以下に代表的なフォーム要素を紹介します。

9.2.1 テキスト入力フィールド

<label for="name">Name:</label> <input type="text" id="name" name="name" />
  • type="text": 一行のテキスト入力フィールド。

9.2.2 パスワード入力フィールド

<label for="password">Password:</label>
<input type="password" id="password" name="password" />
  • type="password": 入力内容が非表示になるパスワードフィールド。

9.2.3 ラジオボタン

<label for="gender-male">Male</label>
<input type="radio" id="gender-male" name="gender" value="male" />

<label for="gender-female">Female</label>
<input type="radio" id="gender-female" name="gender" value="female" />
  • type="radio": 複数選択肢から 1 つだけ選ぶ場合に使用。

9.2.4 チェックボックス

<label for="subscribe">Subscribe to newsletter</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes" />
  • type="checkbox": 複数選択肢から複数選ぶ場合に使用。

9.2.5 ドロップダウンリスト

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="japan">Japan</option>
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
</select>
  • <select>タグ: ドロップダウンリストを作成します。

9.3 ボタン

フォームを送信するためのボタンを作成します。

9.3.1 送信ボタン

<input type="submit" value="送信" />
  • type="submit": フォームのデータを送信します。

9.3.2 リセットボタン

<input type="reset" value="リセット" />
  • type="reset": フォームの全フィールドを初期値にリセットします。

9.4 バリデーション

フォームデータは正確に送信される必要があります。HTML5 ではバリデーションを簡単に行うための属性があります。

9.4.1 必須フィールド

<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
  • required: このフィールドは必須です。

9.4.2 パターンの設定

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" />
  • pattern: 正規表現を用いて入力フォーマットを指定します。

9.5 まとめ

本セクションでは、HTML フォームの基本構造と各種要素について学びました。フォームの作成はユーザーからの情報収集に欠かせないスキルです。実際に自分でフォームを作成し、様々な要素を組み合わせてみることで、より深い理解が得られるでしょう。次回は、作成したフォームを利用して実際にデータを送信し、それを処理する方法について学びます。