完全でアクセシブル、そして本番投入できるフォームを構築する。
このレッスンを Kodokon で開くフォームは、ウェブ上のほぼすべてのやり取りへの入り口です。登録、検索、決済、問い合わせ。ページがどう構成されるかはもう知っているので、いよいよ実践に移りましょう。まずは黄金律を覚えてください。すべてのフィールドには name 属性を付けます。なぜなら、サーバーに送られるのは id ではなく それ だからです。
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Sign up</button>
</form>label / input のペアを見てください。label の for 属性はフィールドの id を指しています。この結びつきはスクリーンリーダーにとって不可欠です。また type="email" にも注目しましょう。ブラウザが無料で形式を検証し、モバイルでは適切なキーボードを表示します。他の type も日々役立ちます。number、date、password、checkbox、radio です。
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">-- Choose a country --</option>
<option value="fr">France</option>
<option value="ca">Canada</option>
</select>
<label for="message">Your message</label>
<textarea id="message" name="message" rows="5"></textarea>最後の登場人物は button です。これは3つの type を受け付けます。submit(フォームを送信)、reset(フィールドをクリア)、そして button(単体では何もしない。JavaScript で動作を組み込む)です。思考練習: ブログ記事のフォームに、データを送信してはいけない「プレビュー」ボタンを追加します。どの type を与えますか? 答え: type="button" です。
<form action="/contact" method="post">
<label for="topic">Subject</label>
<select id="topic" name="topic">
<option value="support">Technical support</option>
<option value="billing">Billing</option>
</select>
<button type="submit">Send</button>
<button type="button" id="preview-btn">
Preview
</button>
</form>