1. ホーム /
  2. HTML / CSS /
  3. HTML /
  4. HTMLのフォームとは
  • 2023.11.12

HTMLのフォームとは

HTMLのフォームは<form>要素を使用してユーザーから情報を収集するための重要な手段です。フォームはテキスト入力、選択肢、ボタンなどを含むことができ、ユーザーがデータを入力し、それをサーバーに送信するためのインターフェースを提供します。

<form>要素の基本的な属性

HTMLフォームの<form>要素にはいくつかの基本的な属性があり、これらはフォームのデータがどのように処理されるかを定義するのに使用されます。以下はその主要な属性です。

  1. action:
    この属性はフォームデータが送信されるサーバーのURLを指定します。フォームが送信されると、ユーザーはこのURLにリダイレクトされ、送信されたデータは通常、バックエンドのスクリプトで処理されます。
  2. method:
    フォームデータの送信に使用するHTTPメソッドを指定します。最も一般的なメソッドはGETとPOSTです。GETはデータをURLにクエリ文字列として追加し、POSTはデータをリクエストボディに含めます。
  3. enctype:
    フォームデータがサーバーに送信される際のエンコーディングタイプを指定します。ファイルをアップロードする場合にはmultipart/form-dataを使用する必要があります。他にapplication/x-www-form-urlencoded（デフォルト）とtext/plainがあります。
  4. name:
    フォームを識別するための名前を指定します。これは主にJavaScriptやサーバー側のスクリプトでフォームを区別する際に使用されます。
  5. target:
    フォームの送信結果（レスポンス）がどこに表示されるかを指定します。例えば、_blankを指定すると新しいタブやウィンドウで結果が開かれます。
  6. autocomplete:
    この属性をonまたはoffに設定することで、ブラウザの自動入力機能を制御できます。フォームや特定の<input>要素でこの属性を使用すると、ユーザーが以前に入力した値を自動的に入力するかどうかをブラウザに指示します。
  7. novalidate:
    このブール属性を設定すると、フォームが送信されるときのHTML5のフォームバリデーションを無効にします。

これらの属性を適切に使用することでフォームのデータが正しくサーバーに送信され、適切に処理されるようになります。また、ユーザー体験を向上させるために、フォームの使用が容易で理解しやすいようにすることも重要です。

フォーム内で使用される要素

HTMLのフォーム内で使用される要素には、ユーザーがデータを入力し、それをサーバーに送信するためのさまざまなフィールドやボタンが含まれます。以下は、フォームで一般的に使用されるHTML要素のリストです。

  1. <form>:
    フォーム全体を包含するコンテナ要素。action属性とmethod属性で、フォームデータを送信する先と方法を指定します。
  2. <input>:
    様々なタイプのデータ入力フィールドを作成します。type属性で様々な入力タイプを指定できます。例えば、text、password、radio、checkbox、submit、reset、file、hidden、email、searchなどです。
  3. <label>:
    フォームの入力フィールドにラベルを付けるための要素。for属性を使用して、ラベルが関連付けられる入力要素を指定します。
  4. <textarea>:
    複数行のテキスト入力を可能にするテキストエリア要素。rowsとcols属性でサイズを指定できます。
  5. <button>:
    クリック可能なボタンを作成し、type属性でボタンの種類（submit、reset、button）を指定します。
  6. <select>:
    ドロップダウンリストを作成します。リスト内の選択肢は<option>要素で指定します。
  7. <option>:
    <select>要素内で使用され、ドロップダウンリストの個々の選択肢を作成します。
  8. <optgroup>:
    <select>内の関連する<option>要素をグループ化します。
  9. <fieldset>:
    関連するフォーム要素をグループ化し、視覚的に区別します。通常は<legend>要素と組み合わせて使用されます。
  10. <legend>:
    <fieldset>でグループ化された要素のキャプションを提供します。
  11. <datalist>:
    <input>要素に対して予測変換候補のリストを提供します。候補は<option>要素を使用して指定します。

これらの要素を使用して、ユーザーの入力を要求するフォームを構築します。フォームの設計時には、ユーザビリティとアクセシビリティのベストプラクティスを考慮することが重要です。

使用例

以下に、HTMLでの基本的なフォームの使用例を示します。この例では、テキスト入力フィールド、ラジオボタン、チェックボックス、ドロップダウンリスト、テキストエリア、送信ボタンを含むフォームを作成しています。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルフォーム</title>
</head>
<body>

<form action="submit-form.php" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name"><br><br>

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

    <label for="vehicle">所有車:</label>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1">バイク</label>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2">車</label><br><br>

    <label for="country">国:</label>
    <select id="country" name="country">
        <option value="japan">日本</option>
        <option value="usa">アメリカ</option>
        <option value="uk">イギリス</option>
        <option value="china">中国</option>
    </select><br><br>

    <label for="comments">コメント:</label><br>
    <textarea id="comments" name="comments" rows="4" cols="50">
コメントをここに入力してください。
    </textarea><br><br>

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

</body>
</html>

このフォームは以下の要素を含んでいます。

  • テキストフィールド（名前入力用）
  • ラジオボタン（性別選択用）
  • チェックボックス（複数の選択肢から選べる、所有車の種類）
  • ドロップダウンリスト（国を選択）
  • テキストエリア（コメント入力用）
  • 送信ボタン

フォームが送信されると、ユーザーが入力したデータはsubmit-form.php（この部分は実際のサーバー側のファイル名に置き換える）にPOSTメソッドを使用して送信されます。サーバーサイドのスクリプトは、これらのデータを受け取り、処理します。

注意点

HTMLフォームを設計する際には、いくつかの注意点を考慮する必要があります。

  1. セキュリティ:
    ユーザーが入力した情報は機密性が高い可能性があるため、常にセキュリティを考慮する必要があります。例えば、POSTメソッドを使用して情報を送信し、SSL/TLSを通じたHTTPSを利用してデータを暗号化することが推奨されます。サーバーサイドでの適切なデータの検証とサニタイズを行うことで、SQLインジェクションやクロスサイトスクリプティング（XSS）などの攻撃を防ぎます。
  2. バリデーション:
    フォーム入力に対しては、クライアントサイド（JavaScriptを使用）とサーバーサイドの両方でバリデーションを行います。ユーザーによる誤入力を防ぎ、期待される形式のデータのみが送信されるようにします。
  3. ユーザビリティ:
    フォームが直感的でわかりやすく、ユーザーが簡単に情報を入力できるようにデザインします。<label>要素を適切に<input>要素に関連付けることで、フォームのアクセシビリティを向上させます。必須フィールドを明確にし、ユーザーが必要な情報を見逃さないようにします。
  4. アクセシビリティ:
    スクリーンリーダーを使用するユーザーのために、すべてのフォーム要素に適切なラベルを提供します。フォーム要素を論理的な順序で配置し、キーボードナビゲーションを容易にします。
  5. レスポンシブデザイン:
    異なるデバイスやビューポートのサイズに適応するようにフォームを設計します。CSSメディアクエリを使用して、フォームのレイアウトがモバイルフレンドリーであることを確認します。
  6. データ送信:
    フォームのaction属性には、フォームデータを処理するサーバーサイドのスクリプトの正確なURLを指定します。フォームデータの送信に適切なHTTPメソッド（GETまたはPOST）を使用します。GETは情報を検索するためのリクエストに使用し、POSTはデータを送信する際に使用します。
  7. データ構造:
    <input>要素にはname属性を必ず指定し、サーバーサイドでデータを識別しやすくします。

これらのベストプラクティスに従うことで、安全で使いやすく、アクセシブルなフォームを作成することができます。

関連記事

SNSでもご購読できます。

コメントを残す

*