フォームは、利用者が名前やメールアドレスなどの情報を入力し、サーバーへ送信するための仕組みです。このレッスンでは送信先のプログラムではなく、入力しやすく意味の通るHTMLを作ります。
見た目だけの入力欄を並べず、ラベル、入力形式、必須条件をブラウザへ伝えます。
フォームの送信先と方法を指定する
formのactionは送信先、methodは送信方法です。個人情報を扱うフォームはHTTPSで公開し、送信内容をURLへ残さないPOSTを基本にします。
次の画像は、「フォームの送信先と方法を指定する」で扱うコードや構成をブラウザで表示した結果です。
<form action="/contact/confirm" method="post">
<!-- 入力欄を配置する -->
</form>ラベルと入力欄を関連付ける
labelのforと入力欄のidを同じ値にします。ラベルを押して入力欄へフォーカスでき、支援技術にも項目名が伝わります。
次の図では、「ラベルと入力欄を関連付ける」の仕組みや関係を確認できます。
<div class="form-field">
<label for="name">お名前</label>
<input id="name" name="name" type="text" autocomplete="name" required>
</div>
<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="8" required></textarea>
</div>
<button type="submit">送信内容を確認する</button>入力形式をHTMLで指定する
メールアドレスにはtype="email"、必須項目にはrequiredを使います。文字数にはminlength・maxlength、数値にはmin・maxを設定できます。
次の図では、「入力形式をHTMLで指定する」の仕組みや関係を確認できます。
JavaScriptだけで検証せず、最初にHTML標準の機能を使います。ただし、ブラウザの検証はサーバー側の検証の代わりにはなりません。
フォーム部品をCSSで整える
入力欄の幅、余白、フォーカス表示を整えた完成状態を確認してください。
.form-field {
display: grid;
gap: 8px;
}
input,
textarea,
select,
button {
font: inherit;
}
input,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #6b7280;
border-radius: 8px;
}
input:focus-visible,
textarea:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}入力前から:invalidを強く表示すると、まだ操作していない利用者にもエラーのように見えます。送信後や操作後に状態が分かる設計にします。
送信前に操作を確認する
入力形式が正しくない場合は、色だけに頼らず文章でも理由を伝えます。
- ラベルを押して対応する入力欄へ移動する
- Tabキーで上から自然な順番に移動する
- 未入力と不正なメールアドレスで送信を試す
- エラー後に該当項目へ移動できるか確認する
- スマートフォンで入力に合うキーボードが開くか確認する
実際の送信処理とサーバー側の安全対策は、WordPressのお問い合わせフォーム教材で扱います。