fieldset - グループ化されたフォーム・コントロールのセット

フォーム部品のグループにキャプション(タイトルや説明)を付ける場合には、fieldset要素の子要素にlegend要素で指定します。

fieldset要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
fieldset

fieldset要素のHTML4からHTML5への変更点

HTML5ではdisabled属性・form属性・name属性が追加されました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
disabled グループ内のフォーム部品を無効にする
form 関連付けるform要素をid名で指定
name fieldsetの名前

「基本」のサンプル

legend要素のチェックボックスをクリックすると、disabled属性がオフになり入力可能になります。

HTMLコード

<form action="" method="get">
<fieldset name="clubfields" disabled>
 <legend> <label><input type=checkbox name=club onchange="form.clubfields.disabled = !checked">カードの使用 </label> </legend>
 <p><label>名前: <input name=clubname required></label></p>
 <p><label>番号: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>期限: <input name=clubexp type=month></label></p>
 <input type="submit" "送信">
 </fieldset>
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/forms.html#the-fieldset-element)