Webサイトにフォームを実装したいけれど、基本から分からない...
B2Bサイトの運営において、問い合わせフォームや資料請求フォームは欠かせない要素です。「HTMLでフォームを作るには何から始めればいい？」「action属性やmethod属性って何？」「セキュリティ対策は何をすればいい？」といった疑問を抱えているWeb担当者やエンジニアの方も多いのではないでしょうか。
HTMLフォームはWebサイトの基本機能ですが、適切に実装しないとセキュリティリスクやアクセシビリティの問題が発生します。この記事では、HTMLフォームの基本構造から、送信処理の仕組み、セキュリティ・アクセシビリティ対策まで、実務で必要な知識を具体的なコード例とともに解説します。
この記事のポイント:
- form要素でフォーム部品を囲み、action属性で送信先、method属性で送信方法を指定
- input要素のtype属性で様々な入力タイプ（text, email, checkbox等）を実現
- HTMLはデータの送信まで、受信・処理にはサーバー側プログラムが必要
- セキュリティ対策（バリデーション、エスケープ処理、CSRF対策）は必須
- label要素でアクセシビリティを向上させる
1. HTMLフォームの役割と重要性
HTMLフォームは、ユーザーがWebサイト上でデータを入力し、サーバーに送信するためのインターフェースです。問い合わせフォーム、資料請求フォーム、ログインフォーム、検索フォームなど、Webサイトの様々な場面で使用されています。
B2Bサイトにおけるフォームの用途:
- 問い合わせフォーム: 製品・サービスへの質問や相談を受け付ける
- 資料請求フォーム: ホワイトペーパーや製品資料のダウンロード申込
- 見積もり依頼フォーム: 具体的な案件の相談・見積もり依頼
- イベント申込フォーム: セミナーや展示会の参加登録
- ログインフォーム: 会員向けサービスへのログイン
フォームはリード獲得の重要な接点であり、使いやすいフォームはコンバージョン率の向上につながります。一方で、個人情報を扱うことが多いため、セキュリティ対策が不可欠です。
2. HTMLフォームの基礎知識
HTMLフォームを作成するための基本的な要素と構造を理解しましょう。
(1) form要素の構造と主要属性
<form>要素は、ユーザー入力を収集し、Webサーバーに送信するための対話的なセクションを表すHTML要素です。フォーム部品（input, select, textareaなど）を囲んで使用します。
<form action="/submit" method="POST">
<!-- フォームの内容 -->
<input type="text" name="company" placeholder="会社名">
<input type="email" name="email" placeholder="メールアドレス">
<button type="submit">送信</button>
</form>
主要な属性:
action属性: フォームデータの送信先URLを指定します。
<form action="/api/contact">
method属性: フォーム送信時のHTTPメソッドを指定します。
<form method="POST">
enctype属性: methodがPOSTの場合のMIMEタイプを指定します。ファイルアップロード時に使用します。
<form enctype="multipart/form-data">
name属性: フォームの名前を指定します（JavaScriptからの参照などに使用）。
<form name="contactForm">
(2) label要素によるフォームコントロールの関連付け
<label>要素は、フォームコントロールに対応するラベルテキストを関連付けます。アクセシビリティ向上において重要な役割を果たします。
for属性を使った関連付け:
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">
入れ子にする方法:
<label>
メールアドレス
<input type="email" name="email">
</label>
label要素を使うメリット:
- ラベルをクリックすると対応する入力フィールドにフォーカスが移動する
- スクリーンリーダーがラベルを読み上げ、何を入力すべきか明確になる
- 操作領域が広がり、特にチェックボックスやラジオボタンで使いやすくなる
3. input要素の種類と使い方
<input>要素は、type属性の値によって様々な入力フィールドを作成できます。
(1) テキスト入力系（text, email, password, tel）
type="text": 一般的なテキスト入力フィールド。
<input type="text" name="company" placeholder="会社名" required>
type="email": メールアドレス入力用。ブラウザがメール形式のバリデーションを自動で行います。
<input type="email" name="email" placeholder="example@company.co.jp" required>
type="password": パスワード入力用。入力内容がマスク表示されます。
<input type="password" name="password" minlength="8">
type="tel": 電話番号入力用。スマートフォンでは数字キーパッドが表示されます。
<input type="tel" name="phone" placeholder="03-1234-5678">
type="number": 数値入力用。min, max, step属性で範囲を指定できます。
<input type="number" name="quantity" min="1" max="100">
(2) 選択・その他（checkbox, radio, select, submit）
type="checkbox": 複数選択が可能なチェックボックス。
<input type="checkbox" id="agree" name="agree" value="yes" required>
<label for="agree">利用規約に同意する</label>
type="radio": 単一選択のラジオボタン。同じname属性を持つ要素のうち1つだけ選択可能です。
<input type="radio" id="contact-email" name="contact_method" value="email">
<label for="contact-email">メール</label>
<input type="radio" id="contact-phone" name="contact_method" value="phone">
<label for="contact-phone">電話</label>
select要素: ドロップダウンリストによる選択。
<label for="industry">業種</label>
<select id="industry" name="industry">
<option value="">選択してください</option>
<option value="it">IT・通信</option>
<option value="manufacturing">製造業</option>
<option value="service">サービス業</option>
</select>
textarea要素: 複数行のテキスト入力。
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>
type="submit": フォーム送信ボタン。
<input type="submit" value="送信する">
<!-- または -->
<button type="submit">送信する</button>
4. フォーム送信の仕組み
フォームがどのようにデータを送信し、サーバーで処理されるかを理解しましょう。
(1) action属性とmethod属性（GET/POST）の使い分け
action属性: フォームデータの送信先URLを指定します。サーバー側でデータを受け取るプログラムのURLを記述します。
<form action="/api/contact" method="POST">
method属性のGETとPOSTの違い:
GET:
- データがURLのクエリパラメータとして送信される（例:
/search?q=キーワード） - URLに内容が表示されるため、機密情報には不適切
- ブックマーク・共有が可能
- 検索フォームなど、データ量が少なく秘匿性が不要な場合に使用
<form action="/search" method="GET">
<input type="text" name="q" placeholder="検索キーワード">
<button type="submit">検索</button>
</form>
POST:
- データがHTTPリクエストのボディに含まれて送信される
- URLにデータが表示されない
- 問い合わせフォーム、ログインフォーム、登録フォームなど一般的なフォームに使用
- 機密情報を扱う場合は必ずPOSTを使用
<form action="/api/contact" method="POST">
<input type="text" name="name" placeholder="お名前">
<input type="email" name="email" placeholder="メールアドレス">
<button type="submit">送信</button>
</form>
(2) サーバー側でのデータ受信処理
HTMLフォームはデータの送信のみを行い、受信・処理にはサーバー側のプログラムが必要です。PHP、Ruby、Python、Node.jsなどのサーバーサイド言語でデータを受け取り、データベースへの保存やメール送信などの処理を行います。
処理の流れ:
- ユーザーがフォームに入力し、送信ボタンをクリック
- ブラウザがaction属性で指定されたURLにデータを送信
- サーバー側プログラムがデータを受信
- 入力値のバリデーション（検証）を実施
- データベースへの保存、メール送信などの処理を実行
- 処理結果をブラウザに返す（サンクスページへの遷移など）
注意点:
- HTMLだけではデータを受け取って処理することはできない
- サーバー側でのバリデーションは必須（クライアント側のみでは不十分）
- セキュリティ対策（エスケープ処理など）をサーバー側で実施する
5. フォームのセキュリティとアクセシビリティ
フォームは個人情報を扱うことが多いため、セキュリティ対策とアクセシビリティ対応が重要です。
(1) セキュリティリスクと対策（SQLインジェクション・XSS・CSRF）
フォームには様々なセキュリティリスクが存在します。主要な攻撃手法と対策を理解しておきましょう。
SQLインジェクション:
- 悪意あるSQL文を入力し、データベースを直接操作する攻撃
- 対策: プリペアドステートメント（パラメータ化クエリ）を使用し、入力値を安全に処理
XSS（クロスサイトスクリプティング）:
- ユーザー入力をHTML出力する際の脆弱性を悪用し、悪意あるJavaScriptを挿入する攻撃
- 対策: 出力時のエスケープ処理（HTMLエンティティへの変換）
CSRF（クロスサイトリクエストフォージェリ）:
- ログイン中のユーザー権限を悪用して、意図しない操作を実行させる攻撃
- 対策: CSRFトークンをフォームに埋め込み、サーバー側で検証
<!-- CSRFトークンの例 -->
<input type="hidden" name="csrf_token" value="[サーバーで生成したトークン]">
基本的なセキュリティ対策:
- クライアント側だけでなく、サーバー側でも必ず入力値を検証する
- 出力時にはエスケープ処理を行う
- 機密情報の送信にはPOSTメソッドを使用する
- HTTPS（SSL/TLS）で通信を暗号化する
(2) アクセシビリティ対応（WAI-ARIA・キーボードナビゲーション）
アクセシビリティを考慮したフォームは、障害を持つユーザーや様々な環境のユーザーにとって使いやすくなります。
基本的なアクセシビリティ対応:
label要素の適切な使用:
<label for="email">メールアドレス（必須）</label>
<input type="email" id="email" name="email" required>
必須項目の明示:
<label for="name">お名前 <span class="required">*</span></label>
<input type="text" id="name" name="name" required aria-required="true">
エラーメッセージの関連付け:
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error">正しいメールアドレスを入力してください</span>
キーボードナビゲーション:
- Tabキーでフォーム要素間を移動できるようにする
- tabindex属性で論理的な順序を維持する
- フォーカス時に視覚的なフィードバックを提供する
WAI-ARIA属性の活用:
aria-required="true": 必須項目であることを示すaria-invalid="true": 入力エラーがあることを示すaria-describedby: 追加の説明テキストを関連付ける
6. まとめ：安全で使いやすいフォーム実装のポイント
HTMLフォームは、form要素、input要素、label要素を基本として構成されます。action属性で送信先、method属性で送信方法（GET/POST）を指定し、type属性で様々な入力タイプを使い分けます。
HTMLはデータの送信までを担当し、受信・処理にはサーバー側プログラムが必要です。セキュリティ対策（バリデーション、エスケープ処理、CSRF対策）とアクセシビリティ対応（label要素、WAI-ARIA）は、実務において必須の要素です。
次のアクション:
- form要素の基本構造と属性を理解する
- 用途に応じたinput要素のtype属性を使い分ける
- label要素で入力フィールドとラベルを関連付ける
- サーバー側でのバリデーションとセキュリティ対策を実装する
- MDN Web Docsなどの公式ドキュメントで最新の仕様を確認する
基本的なHTML構造をしっかり理解した上で、セキュリティとアクセシビリティを考慮したフォームを実装しましょう。
よくある質問:
Q: HTMLフォームだけでデータ送信は完結しますか？ A: HTMLでフォームの見た目と送信機能は実装できますが、送信されたデータを受け取って処理するにはサーバー側のプログラム（PHP、Ruby、Python、Node.jsなど）が必要です。HTMLは「データを送る仕組み」までを担当し、「データを受け取って処理する」のはサーバー側の役割です。
Q: GETとPOSTの使い分けはどうすればよいですか？ A: GETは送信データがURLに表示されるため、検索フォームなど公開可能で短いデータに使用します。機密情報（パスワード、個人情報など）を含むフォームや、データを送信・登録するフォームにはPOSTを使用すべきです。問い合わせフォームやログインフォームは必ずPOSTを使用してください。
Q: フォームのセキュリティ対策で最低限必要なことは？ A: 入力データのバリデーション（検証）とエスケープ処理が必須です。クライアント側（HTML/JavaScript）だけでなく、サーバー側でも必ず検証を行ってください。また、CSRFトークンの実装、HTTPS通信の使用、SQLインジェクション対策（プリペアドステートメント）も重要なセキュリティ対策です。