web-dev-qa-db-ja.com

フィールドセットタグを使用する利点は何ですか？

<fieldset>タグを使用する利点は何ですか？

何に使われているのかよくわかりません。

htmlfieldset
30
Diego

フォームは多くの場合、さまざまなフィールドのセットに分割されます。

Fieldsetタグを使用すると、フォームをよりわかりやすくするために、フィールドのセットを論理的にグループ化できます。

また、フィールドセットを使用してフォームのスタイルを設定し、フィールド間の論理的な関連付けを表示できることにも注意してください。

「現実の」世界で見られる形と同じように。

フィールドセットを使用することの「利点」は、利用可能な最も意味的な方法でデータ（この場合はフォーム）をマークアップできることです。フィールドをフィールドセットに配置する方が、フィールドをdivに配置するよりもわかりやすいことを考慮してください。 divはフィールド間の関係については何も教えてくれませんが、フィールドセットは関係があることを教えてくれます。

これは、多くの新しいHTML5タグセットと同様の原則です。たとえば、<footer>は、あいまいな<div>と比較して、その中のデータの意味について詳しく説明します。

26
Jamie Dixon

開発者向けのHTML5仕様 を見てください：

http://developers.whatwg.org/forms.html#the-fieldset-element

fieldset要素は、オプションで共通名でグループ化されたフォームコントロールのセットを表します。

（リンクをたどるともっと多くの情報があります）

legend element と組み合わせると、これを簡単に行うことができます。これは、fieldset/legendを使用せずに再作成するのは困難です。

6
thirtydot

これにより、関連するフィールドのセットをグループ化し、それらに凡例を付けることができます。

<fieldset>
    <legend>Gender</legend>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label>
<fieldset>

<fieldset>
    <legend>Address</legend>

    <label for="line1">Line 1</label>
    <input name="address1" id="line1">

    <label for="line2">Line 2</label>
    <input name="address2" id="line2">

    <label for="town">Town</label>
    <input name="town" id="town">

    <label for="country">country/label>
    <input name="country" id="country">
</fieldset>
4
Quentin

あなたはそれと一緒にものをグループ化します。これは、CSSまたはJavaScriptのためにその中のものにアクセスする必要があり、すべてにIDを割り当てる煩わしさを経験したくない場合に便利です。

また、伝説はかなりよく見えます。

1
Andreas Eriksson