使いやすいHTMLフォームは、入力欄ごとに見えるlabelを関連付け、送信する値にnameを付け、送信先のサーバー側でも検証します。requiredなどブラウザの検証は入力補助であり、セキュリティ対策の代わりにはなりません。
情報確認日：2026年7月27日
結論：まず押さえるポイント
この記事の結論
- labelのforとinputのidを対応させる
- サーバーへ送る入力にはnameを付ける
- buttonのtypeを明示する
- クライアント側とサーバー側の両方で検証する
- エラーは色だけでなく文言と関連付けで伝える
HTMLフォームの作り方の基本
formのactionは送信先、methodはGETまたはPOSTを指定します。検索条件のようにURLへ残して共有できるものはGET、個人情報やデータ更新は通常POSTを使います。ただしPOSTにすれば暗号化されるわけではないためHTTPSが必要です。
最小の実装例
HTML
<form action="/contact" method="post">
<div class="form-field">
<label for="email">メールアドレス</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
>
</div>
<div class="form-field">
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="6" required></textarea>
</div>
<button type="submit">送信する</button>
</form>CSS
.form-field {
display: grid;
gap: 0.5rem;
margin-block-end: 1rem;
}
input,
textarea,
button {
font: inherit;
}
input:focus-visible,
textarea:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}autocompleteを適切に指定すると、ブラウザやパスワードマネージャーが入力を補助できます。placeholderだけをlabelの代わりに使わないでください。
実務で使うときの考え方
選択肢をグループ化する
ラジオボタンやチェックボックスのまとまりにはfieldsetとlegendを使います。
<fieldset> <legend>希望する連絡方法</legend> <label><input type="radio" name="contact" value="email"> メール</label> <label><input type="radio" name="contact" value="phone"> 電話</label> </fieldset>エラーを関連付ける
エラー文にidを付け、入力欄のaria-describedbyから参照します。入力後に動的に表示するエラーは、フォーカス移動やライブリージョンでの通知も検討します。
フォームのセキュリティ
サーバー側では、必須・長さ・形式・許可値を再検証し、出力時に文脈に合ったエスケープを行います。CSRF対策、レート制限、スパム対策、ファイルアップロードのMIME・拡張子・保存先も必要です。パスワードや秘密情報をURLクエリへ入れません。
よくある失敗と直し方
placeholderをラベル代わりにする
入力すると説明が消え、何を入力したか分からなくなります。見えるlabelを用意します。
buttonのtypeを省略する
form内のbuttonは既定でsubmitになるため、ダイアログを開くボタンなどが意図せずフォームを送信することがあります。送信以外のボタンにはtype="button"を明示します。
requiredだけで安全と思う
HTML属性は開発者ツール等で回避できます。サーバー側検証が必須です。
WordPressで使う場合
WordPressではnonce、権限確認、サニタイズ、エスケープを用途に合わせて行います。既存のフォームプラグインを使う場合も、保存先、メール送信、個人情報の保持期間、スパム対策、更新状況を確認してください。
よくある質問
inputのidとnameは同じでよいですか？
同じでも構いませんが役割は別です。idはlabelやDOM参照、nameは送信データのキーです。
selectとラジオボタンはどう選びますか？
選択肢が少なく比較が重要ならラジオ、数が多く省スペースにしたいならselectが候補です。モバイル操作も確認します。
ブラウザのエラーメッセージをカスタマイズできますか？
JavaScriptで可能ですが、標準機能を壊さず、キーボード操作と読み上げを含めて検証してください。
まとめ
HTMLフォームではlabel、name、button typeを正しく設定し、エラーを入力欄へ関連付けます。ブラウザの検証は入力支援として使い、サーバー側の検証・権限・CSRF・エスケープを必ず実装してください。