HTML フォーム: ユーザー入力を収集するための基本

要約: HTML フォームは、ウェブページ上でユーザーからデータを収集するための重要な要素です。このドキュメントでは、フォームの基本的な構造、属性、および使用方法について説明します。また、フォームを使用してどのようにユーザーから情報を取得できるかを探ります。

<form>: フォーム要素

Webサイトでユーザーから情報を入力してもらうには、フォームが欠かせません。HTMLでは &lt;form&gt; 要素を使ってフォームを作成します。この要素は、ユーザーがデータを入力するための様々なコントロール（テキストフィールド、ボタン、チェックボックスなど）をまとめる役割を果たします。

1. <form>: フォーム要素とは？

<form> 要素は、Webサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。ユーザーが入力したデータは、<form> 要素の属性で指定されたサーバー側のプログラムに送信され、処理されます。

<form> 要素は、CSSの:validおよび:invalid擬似クラスを使って、フォーム内の要素が有効かどうかによってスタイルを設定することもできます。例えば、必須項目が入力されていない場合は、その項目を赤枠で囲むなどのスタイルを適用できます。

2. 属性

<form> 要素には、様々な属性を指定することができます。ここでは、よく使われる属性とその役割について詳しく説明します。

2.1 accept (非推奨)

accept属性は、サーバーが受け付けるコンテンツタイプをカンマ区切りのリストで指定します。ただし、この属性は非推奨となっており、代わりに <input type="file"> 要素の accept 属性を使用することを推奨します。

2.2 accept-charset

accept-charset 属性は、サーバーが受け付ける文字エンコーディングを空白区切りで指定します。ブラウザは、リストされたエンコーディングを順番に試して、サーバーが受け付けるものを使用します。指定しない場合は、ページと同じエンコーディングが使用されます。

2.3 autocapitalize (非標準)

autocapitalize 属性は、iOS Safari でのみ使用される非標準の属性です。テキスト入力欄で自動的に大文字化を行うかどうかを制御します。<input> 要素にも autocapitalize 属性を指定できますが、<form> 要素の autocapitalize 属性よりも優先されます。

指定可能な値は以下の通りです。

• none: 自動大文字化を行いません。

• sentences: 文の先頭文字を大文字化します。

• words: 単語の先頭文字を大文字化します。

• characters: すべての文字を大文字化します。

2.4 autocomplete

autocomplete 属性は、ブラウザが入力欄に自動的に値を補完するかどうかを指定します。<input> 要素にも autocomplete 属性を指定できますが、<form> 要素の autocomplete 属性よりも優先されます。

指定可能な値は以下の通りです。

• off: ブラウザは自動補完を行いません。ただし、ログインフォームなど、ブラウザが安全でないと判断した場合は、この設定が無視されることがあります。

• on: ブラウザは自動補完を行う場合があります。

2.5 name

name 属性は、フォームの名前を指定します。この値は、フォームコレクション内で一意である必要があります。

2.6 rel

rel 属性は、フォームが作成するリンクの種別を指定します。例えば、rel="help" と指定すると、フォームがヘルプページへのリンクであることを示します。

3. フォーム送信のための属性

以下の属性は、フォーム送信時の動作を制御します。

3.1 action

action 属性は、フォームデータの送信先URLを指定します。この属性は、<button>要素、<input type="submit">要素、<input type="image">要素の formaction 属性で上書きすることができます。

3.2 enctype

enctype 属性は、method 属性が post の場合に、フォームデータをサーバーに送信する際に使用するエンコード方法を指定します。

指定可能な値は以下の通りです。

• application/x-www-form-urlencoded: これがデフォルトのエンコード方法です。

• multipart/form-data: フォームにファイルアップロード用の <input type="file"> 要素が含まれている場合に使用します。

• text/plain: デバッグ用途に適しています。

この属性は、<button>要素、<input type="submit">要素、<input type="image">要素の formenctype 属性で上書きすることができます。

3.3 method

method 属性は、フォームデータをサーバーに送信する際に使用する HTTP メソッドを指定します。

指定可能な値は以下の通りです。

• post: POST メソッドを使用します。フォームデータは、HTTPリクエストのボディに含めて送信されます。

• get: GET メソッドを使用します。フォームデータは、URLの末尾にクエリ文字列として付加して送信されます。

• dialog: フォームが <dialog> 要素内にある場合にのみ使用します。送信操作を行うと、ダイアログが閉じ、submit イベントが発生しますが、データは送信されません。

この属性は、<button>要素、<input type="submit">要素、<input type="image">要素の formmethod 属性で上書きすることができます。

3.4 novalidate

novalidate 属性は、フォーム送信時にブラウザによるバリデーション（入力値チェック）を行わないことを指定する論理属性です。この属性を指定しない場合は、ブラウザはフォーム送信前にバリデーションを行います。

この属性を指定していない場合でも、<button>要素、<input type="submit">要素、<input type="image">要素の formnovalidate 属性でバリデーションを無効にすることができます。

3.5 target

target 属性は、フォーム送信後のレスポンスの表示先を指定します。

指定可能な値は以下の通りです。

• _self (デフォルト): 現在のブラウザウィンドウまたはタブにレスポンスを表示します。

• _blank: 新しいブラウザウィンドウまたはタブにレスポンスを表示します。

• _parent: 親フレームにレスポンスを表示します。

• _top: 最上位のフレームにレスポンスを表示します。

• <iframe> の名前: 指定した名前の <iframe> にレスポンスを表示します。

この属性は、<button>要素、<input type="submit">要素、<input type="image">要素の formtarget 属性で上書きすることができます。

4. 例

4.1 GETリクエストを送信するフォーム

<form method="get">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" autocomplete="name">
  <button type="submit">Save</button>
</form>

4.2 POSTリクエストを送信するフォーム

<form method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" autocomplete="name">
  <button type="submit">Save</button>
</form>

4.3 fieldset, legend, label のあるフォーム

<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label>
      <input type="radio" name="agreement" value="yes"> Yes
    </label>
    <label>
      <input type="radio" name="agreement" value="no"> No
    </label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

5. 結果

上記コード例の実行結果は以下のようになります。

• GET リクエストを送信するフォーム: フォームを送信すると、入力された名前がURLのクエリ文字列に付加されます。

• POST リクエストを送信するフォーム: フォームを送信すると、入力された名前がHTTPリクエストのボディに含めて送信されます。

• fieldset, legend, label のあるフォーム: ラジオボタンで選択した値がサーバーに送信されます。

6. 技術的概要

• コンテンツカテゴリー: フローコンテンツ、知覚可能コンテンツ

• 許可されている内容: フローコンテンツ。ただし、<form>要素を内包することはできません。

• タグの省略: なし。開始タグと終了タグの両方が必須です。

• 許可されている親要素: フローコンテンツを受け入れるすべての要素

• 暗黙の ARIA ロール: form (フォームにアクセシブル名がある場合)、それ以外の場合は対応するロールなし

• 許可されている ARIA ロール: search, none, presentation

• DOM インターフェイス: HTMLFormElement

7. ブラウザーの互換性

<form> 要素とその属性は、すべての主要なブラウザでサポートされています。

バリデーションとセキュリティ

フォームデータの収集時には、バリデーションを行い、適切なセキュリティ対策を講じることが重要です。このセクションでは、クライアント側およびサーバー側のバリデーションのベストプラクティスについて説明します。

クライアント側バリデーションは、ユーザーがフォームを送信する前に入力データをチェックします。一方、サーバー側バリデーションは、送信されたデータが正しいかどうかを確認します。例えば、必須フィールドが空白ではないか、メールアドレスの形式が正しいかなどを確認します。

適切なセキュリティ対策には、データのサニタイズやエスケープ処理が含まれます。これにより、悪意のあるユーザーからの攻撃を防ぐことができます。

formタグの使い方

HTMLでフォームを作成するには、<form>タグとその中に配置する様々な入力部品が必要です。ここでは、フォームの基本となる<form>タグと、よく使われる<label>、<input>、<textarea>タグの使い方を解説します。

formタグ

<form>タグは、フォームの開始と終了を定義し、フォーム全体の設定を行います。

主要な属性は以下の2つです。

• action 属性: フォームデータの送信先URLを指定します。データを受け取って処理するサーバーサイドのプログラムのURLを記述します。

• method 属性: データの送信方法（HTTPメソッド）を指定します。主にGETとPOSTの2種類があります。

  • GET: データをURLの末尾にクエリ文字列として付加して送信します。

  • POST: データをHTTPリクエストのボディに含めて送信します。

一般的には、セキュリティ上の理由から、POSTメソッドが推奨されます。

例：

<form action="/submit.php" method="post">
  <!-- フォームの入力部品 -->
</form>

labelタグ

<label>タグは、入力フィールドにラベル（説明文）を付ける際に使用します。ラベルを付けることで、ユーザーはどのフィールドに何を入力すれば良いのかが分かりやすくなります。

<label>タグは、for属性を使って対応する入力フィールドと関連付けることができます。for属性の値は、関連付ける入力フィールドのid属性の値と一致させる必要があります。

例：

<label for="name">氏名:</label>
<input type="text" id="name" name="name">

この例では、「氏名:」というラベルがテキストフィールドに関連付けられています。

inputタグ

<input>タグは、ユーザーがデータを入力するための様々な種類のフィールドを作成します。type属性によって、テキストフィールド、パスワードフィールド、チェックボックス、ラジオボタンなど、様々な種類の入力フィールドを作成できます。

主な属性は以下の通りです。

• type 属性: 入力フィールドの種類を指定します。代表的な値は以下の通りです。

  • text: 1行のテキスト入力フィールド

  • password: パスワード入力フィールド (入力した文字は隠される)

  • email: メールアドレス入力フィールド

  • checkbox: チェックボックス

  • radio: ラジオボタン

  • submit: 送信ボタン

  • reset: リセットボタン

• id 属性: 入力フィールドを一意に識別するためのIDを指定します。

• name 属性: フォームデータを送信する際に、入力フィールドに名前を付けて送信します。サーバーサイドでデータを受け取る際に、この名前で識別されます。

例：

<input type="text" id="name" name="name" placeholder="氏名">
<input type="password" id="password" name="password" placeholder="パスワード">
<input type="checkbox" id="agreement" name="agreement" value="yes"> 同意する
<input type="submit" value="送信">

textareaタグ

<textarea>タグは、複数行のテキスト入力欄を作成します。長文のテキストを入力する際に使用します。

主な属性は以下の通りです。

• id 属性: 入力フィールドを一意に識別するためのIDを指定します。

• name 属性: フォームデータを送信する際に、入力フィールドに名前を付けて送信します。

• rows 属性: 表示する行数を指定します。

• cols 属性: 表示する列数を指定します。

例：

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

まとめ

<form>タグと、その中に配置される様々な入力部品タグを使うことで、ユーザーがデータを入力できるフォームを作成できます。それぞれの属性を理解し、適切に設定することで、使いやすく分かりやすいフォームを作成することが可能です。

参考文献: MDN Web Docs - HTML form element

よくある質問

Q1: HTML フォームの最大の利点は何ですか？

A1: HTML フォームは、ユーザーからデータを簡単に収集できるインターフェースを提供します。

Q2: GET メソッドと POST メソッドの違いは何ですか？

A2: GET メソッドはデータを URL に付加して送信し、POST メソッドはデータをリクエストボディに含めて送信します。

Q3: バリデーションはどのように行いますか？

A3: HTML5 では、required 属性や pattern 属性を使用して簡単にクライアント側でバリデーションを行えます。サーバー側では、送信されたデータをチェックするロジックを構築します。