はじめに
この記事では、<fieldset> と <legend> の基本と使い方を
初心者でもわかるようにまとめます。
<fieldset>
ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用
<body>
<form>
<fieldset></fieldset>
</form>
</body>
描画：自動でボーダーが描画される
<legend>
その親要素である <fieldset> の内容のキャプションを表す
<body>
<form>
<fieldset>
<legend>お問い合わせ</legend>
</fieldset>
</form>
</body>
描画
サンプルお問い合わせフォーム作成
<body>
<form>
<fieldset>
<legend>お問い合わせ</legend>
<p>
<label>名前</label>
<input type="text"/>
</p>
<p>
<label>メールアドレス</label>
<input type="email"/>
</p>
<p>
<label>問い合わせ内容</label>
<textarea></textarea>
</p>
</fieldset>
</form>
</body>
描画
<fieldset> や <legend> を使用するメリット
HTMLの構造
- コード上でも意味的にグループ化されるので、後で修正やスタイル調整がしやすい
アクセシビリティ向上
- スクリーンリーダーが「このグループは ‘お問い合わせ’ に関する入力です」と読み上げられる
- キーボード操作でもフォームの意味的なまとまりが理解しやすくなる
デフォルトのスタイルがつく
- ブラウザが自動でボーダーや余白を描画するため、最低限の視覚的区切りができる
参考サイト