第8回 フォームの作成と基本的な使い方 – form, input, label, textarea, button タグ – HTML入門講座

はじめに

フォームは、ユーザーがデータを入力し、それをサーバーに送信するための非常に重要なウェブ要素です。HTMLのフォームを使うことで、ユーザーに名前、メールアドレス、パスワードなどの情報を入力してもらうことができます。この講座では、HTMLで基本的なフォームを作成する方法や、さまざまなフォーム要素の使い方について学びます。

フォームの基本構造

フォームを作成するには、<form> タグを使います。このタグの中に、テキストボックスやボタンなどのフォーム要素を配置します。フォームのデータを送信するためには、action 属性で送信先のURLを指定し、method 属性で送信方法（GET か POST）を指定します。

基本的なフォームの例

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

このフォームでは、ユーザーが名前とメールアドレスを入力し、「送信」ボタンをクリックしてデータを送信できます。

フォーム要素の基本

HTMLのフォームには、さまざまな種類の入力要素があります。それぞれの要素は異なる用途に適しており、ユーザーに入力を求める内容に応じて使い分けます。

テキストボックス（<input type=”text”>）

テキストボックスは、ユーザーに文字を入力してもらうための最も基本的な入力フィールドです。<input> タグの type 属性を "text" に設定します。

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">

パスワード入力（<input type=”password”>）

パスワード入力フィールドは、ユーザーが入力した文字を隠して表示します。<input> タグの type 属性を "password" に設定します。

<label for="password">パスワード:</label>
<input type="password" id="password" name="password">

メールアドレス入力（<input type=”email”>）

type="email" を指定した入力フィールドは、メールアドレス形式の入力を求める際に使用します。ユーザーが無効なメールアドレス形式を入力した場合、ブラウザがエラーを表示します。

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

ラジオボタン（<input type=”radio”>）

ラジオボタンは、ユーザーが複数の選択肢から1つを選ぶときに使います。同じ name 属性を持つラジオボタンの中で、1つだけが選択されます。

<label>性別:</label>
<input type="radio" id="male" name="gender" value="male"> 男性
<input type="radio" id="female" name="gender" value="female"> 女性

チェックボックス（<input type=”checkbox”>）

チェックボックスは、ユーザーが複数の選択肢の中から1つ以上を選ぶことができる入力フィールドです。

<label for="agree">
  <input type="checkbox" id="agree" name="agree"> 利用規約に同意します
</label>

ドロップダウンメニュー（<select>）

ドロップダウンメニューは、ユーザーが複数の選択肢から1つを選択できるリストを表示します。<select> タグの中に、<option> タグで各選択肢を定義します。

<label for="country">国を選択:</label>
<select id="country" name="country">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

テキストエリア（<textarea>）

テキストエリアは、複数行のテキスト入力を可能にするフォーム要素です。コメントや長いメッセージを入力してもらう際に便利です。

<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

フォームの送信ボタン

フォームを送信するには、送信ボタンが必要です。最も基本的な送信ボタンは、<input type="submit"> を使用します。ボタンのテキストをカスタマイズしたい場合は、value 属性で指定できます。

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

また、<button> タグを使って送信ボタンを作成することもできます。

<button type="submit">送信</button>

フォームの送信方法

フォームを作成する際に指定するmethod 属性には、2つの送信方法があります：

GETメソッド

GET メソッドは、フォームデータをURLの末尾に追加して送信します。データがURLに含まれるため、主に検索クエリなどに使用されます。

POSTメソッド

POST メソッドは、フォームデータをHTTPリクエストの本文に含めて送信します。POST は、送信するデータが大きい場合や、データを安全に送信したい場合に適しています。

まとめ

今回は、HTMLでフォームを作成する基本的な方法について学びました。フォームは、ユーザーから情報を入力してもらい、それをサーバーに送信するための重要なツールです。フォーム要素には、テキストボックス、パスワード入力、ラジオボタン、チェックボックス、ドロップダウンメニューなどさまざまな種類があり、適切に使い分けることで、ユーザーにとって使いやすいフォームを作成することができます。次回は、フォーム要素の種類や属性についてさらに掘り下げて学びましょう！