Resources

4.フォームと入力フィールド

  • HTML

ウェブサイトでは、ユーザーから情報を受け取るためにフォームがよく使用されます。例えば、ユーザー登録、検索、アンケート、コンタクトフォームなど、さまざまな目的で使われる重要な要素です。HTMLでは、フォームを作成するための<form>タグと、ユーザーからの入力を受け取るための様々な入力フィールドを提供しています。この記事では、フォームの構造、入力フィールド、フォームの送信とバリデーションについて解説します。

フォームタグ（<form>）とその役割

フォームは、<form>タグを使って定義されます。このタグは、ユーザーからの入力を受け取るためのコンテナとして機能し、送信されたデータをサーバーに送る役割を果たします。フォーム内には、さまざまな入力フィールドやボタンが配置されます。

<form action="submit.php" method="POST">
  <!-- 入力フィールドやボタンをここに配置 -->
</form>
  • action: フォームが送信される先のURLを指定します。ここで指定されたURLにデータが送信されます。
  • method: フォームデータを送信する方法を指定します。一般的にGETかPOSTが使われます。
    • GET: データをURLに付加して送信します（データがURLに表示されます）。一般的に検索フォームなどに使用されます。
    • POST: データをリクエストボディに含めて送信します（URLにデータは表示されません）。セキュアな送信が必要な場合や、長いデータを送る場合に使用されます。

入力タグ（<input>, <textarea>, <select>, <button>）

フォームにはさまざまな種類の入力フィールドを追加することができます。これらのタグを使って、ユーザーから多様な情報を受け取ります。

<input>タグ

<input>タグは、最も一般的な入力フィールドです。さまざまなtype属性を使って、テキストボックス、ラジオボタン、チェックボックスなど、さまざまな種類の入力フィールドを作成できます。

<input type="text" name="username" placeholder="ユーザー名">
<input type="password" name="password" placeholder="パスワード">
<input type="email" name="email" placeholder="メールアドレス">
<input type="checkbox" name="newsletter" value="yes"> ニュースレターを受け取る
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="submit" value="送信">
  • type: 入力フィールドのタイプを指定します。text、password、email、checkbox、radio、submitなどがあります。
  • name: サーバーに送信するデータの名前を指定します。この名前は、サーバー側でデータを受け取る際に使用されます。
  • placeholder: 入力フィールド内に表示されるヒントテキストです。ユーザーにどのような情報を入力すべきかを示します。

<textarea>タグ

<textarea>タグは、複数行のテキスト入力を受け付けるためのフィールドです。ユーザーが長いメッセージやコメントを入力できるようにします。

<textarea name="message" rows="4" cols="50" placeholder="メッセージを入力してください"></textarea>
  • rows: テキストエリアの高さを指定します（行数）。
  • cols: テキストエリアの幅を指定します（列数）。

<select>タグ

<select>タグは、ドロップダウンリストを作成するために使用します。ユーザーはリストから1つまたは複数の項目を選択できます。

<select name="country">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>
  • <option>: ドロップダウンリストの項目を指定します。value属性で選択された項目の値を指定します。

<button>タグ

<button>タグは、フォーム内のボタンを作成します。ボタンは、フォームの送信やリセットなどのアクションを実行するために使われます。

<button type="submit">送信</button>
<button type="reset">リセット</button>
  • type: ボタンのタイプを指定します。submitはフォームの送信、resetはフォームのリセットを行います。

フォームの送信とバリデーション

フォームがユーザーによって入力され、送信されると、そのデータはサーバーに送信されます。サーバー側では、送信されたデータを処理して、例えばデータベースに保存したり、確認メッセージを返したりします。HTMLでは、フォーム送信前にクライアント側でデータが正しいかを確認するために、バリデーションを行うことができます。

フォームの送信

フォームは<input type="submit">または<button type="submit">で送信されます。送信ボタンをクリックすると、フォームのaction属性で指定されたURLにデータが送信されます。

<form action="submit.php" method="POST">
  <input type="text" name="username" required>
  <input type="submit" value="送信">
</form>

バリデーション

HTML5では、フォームの入力に対する基本的なバリデーション機能が組み込まれています。required、minlength、maxlength、pattern、typeなどの属性を使うことで、ユーザーの入力内容を事前に検証できます。

<form action="submit.php" method="POST">
  <input type="email" name="email" required placeholder="メールアドレスを入力">
  <input type="password" name="password" minlength="8" required placeholder="パスワードを入力">
  <input type="submit" value="送信">
</form>
  • required: 入力が必須であることを指定します。
  • minlength / maxlength: 入力の最小/最大文字数を指定します。
  • pattern: 入力が指定した正規表現と一致することを要求します（例えば、電話番号や郵便番号など）。

これらのバリデーションは、ユーザーがフォームを送信する前にデータの正確性を確保するために非常に有用です。

まとめ

フォームは、ウェブサイトでユーザーからの情報を収集するために不可欠な要素です。<form>タグを使ってフォーム全体を作成し、<input>や<textarea>、<select>、<button>などの入力フィールドを追加して、ユーザーからの情報を受け取ります。また、HTML5のバリデーション機能を活用することで、ユーザーが正しい形式で情報を入力できるようにサポートできます。フォームと入力フィールドを適切に設計し、ユーザーが使いやすいインターフェースを提供することが重要です。