fieldset HTMLタグの使用には、フォームのグループ化以外の意味がありますか？

StackOverflow https://stackoverflow.com/questions/314457

  •  10-07-2019
  •  | 
  •  

質問

通常、フォームで見ましたが、関連するデータセットをグループ化すると便利です（たとえば、ページに複数のテーブルがある場合、各テーブルまたは関連テーブルのグループを囲むフィールドセットを使用して定義します）目に見える意味とグループ名（凡例））。これは、私の使用において、セマンティックな意味がなくなるポイントまでfieldsetタグを悪用していますか？

役に立ちましたか？

解決

凡例を使用してコンテンツをフィールドセットにブロックすることのセマンティックな利点がわかります。

W3Cはフィールドセットと凡例の使用をフォームに関連付けましたが、フォームタグの外部での使用を許可すると、実験の新しい境界が開かれます。使用中の定義リストに類似している可能性があります。

個人的には、<！> quot; field <！> quot;フィールドセット内はフォームフィールドに固有です。 formタグ内での使用から関係を継承しました。 フィールドはグループ化を参照しています。

お友達とソフトボールをするために地元の公園やレクリエーションに行くことを想像してください。 3つの使用可能なフィールドがあります。それらはすべてフェンスにサインがあります<！> quot; BASEBALL ONLY <！> quot;

ギアをまとめて家に帰りますか？

フォームタグの悪用以外のフィールドセットと凡例の使用にラベルを付けることは、目が見えません。

定義のどこにフォームが記載されているかはありません：

  

FIELDSET要素により、作成者は   テーマ関連のコントロールをグループ化する   およびラベル。コントロールをグループ化する   ユーザーが理解しやすい   同時に目的   のタブナビゲーションを容易にする   視覚的なユーザーエージェントと音声   音声指向ユーザー向けのナビゲーション   エージェント。この要素の適切な使用   ドキュメントをよりアクセスしやすくします。

xhtmlタグのフォーマット制御を検討します。 div p blockquoteなど

<h1>The Big Book about Everything</h1>
<fieldset>
    <legend>Jokes</legend>
    <h2>30 pages of humorous Jokes</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Poems</legend>
    <h2>20 pages of well written poems</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Horror</legend>
    <h2>3 Short and scary stories</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Mystery</legend>
    <h2>3 Short and mysterious stories</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>

他のヒント

これは悪用だと思います。 http://www.w3.org/TR/REC -html40 / interact / forms.html＃h-17.10 の状態<！> quot; FIELDSET要素を使用すると、作成者はテーマに関連するコントロールおよびラベル<！> quot;。

<！> quot; field <！> quot;名前のビットfieldsetは<form>フィールドを指します。

form sの外部で<=> sを使用してaribtraryデータをグループ化することは、明らかにセマンティックの誤用です。

ただし、HTMLは検証され、神は子猫を殺しません。

fieldset は、フォームコントロールグループに関するものです。関連するフォームコントロールをグループ化することで、作成者はフォームをより小さく管理しやすい部分に分割することができ、ユーザーにフォームコントロールが多すぎる場合に発生するユーザビリティの障害を改善できます。

それはフィールドセットが常にフォーム内のフィールドをグループ化することを意味しませんユーザーがフォームを操作するコンテキスト内でのみ...

したがって、<！> quot; abuse <！> quot; HTML 4とXHTMLの仕様では、フィールドセットと凡例をフォーム要素内に含める必要がないという事実に由来する可能性があります。 FIELDSETは、BODY要素の子になることさえできます。フォームセットの外にフィールドセットを置くことは有効な構文です。

しかし、何かを実際のフィールドセットではないフィールドセットとして説明すると、混乱を招くだけです。

HTML / XHTMLタグは、要素の見た目ではなく、要素の意味を記述するものと考えるのが最善です。次に、CSSを使用して、要素を好きなように見せることができます。

プレゼンテーション用にデータをグループ化する場合、素敵なCSSの代替。

参照用：

.fieldset {
border-right: 1px solid #75736E;
border-bottom: 1px solid #75736E;
border-left: 1px solid #F2F0EE;
border-top: 1px solid #F2F0EE;
padding: 10px 3px 3px 3px;

}

.outer {
border-left: 1px solid #75736E;
border-top: 1px solid #75736E;
border-right: 1px solid #F2F0EE;
border-bottom: 1px solid #F2F0EE;
width: 200px; /* CHANGE THIS FOR BOX SIZE */
} 

.legend {
float: left;
margin-left: 15px;
margin-top: -8px;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
background: #FFF;
} 

<div class="legend">Lipsum.com Is The Best</div>
<div class="outer">
<div class="fieldset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Donec congue fermentum metus. Quisque vel ante. 
Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna. 
Maecenas eget lacus. Aenean bibendum risus non erat mattis semper. 
Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit. 
Fusce feugiat orci id eros facilisis laoreet. 
Integer vestibulum condimentum purus. 
Proin vehicula congue lacus. Quisque placerat diam nec enim. 
Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.</div></div>

テーブルをグループ化する場合は、各グループに適切な見出し（h1-h6）要素を使用することを検討してください。個々のテーブルは、 ' caption '要素。 'summary'属性は各テーブルでも使用できます。

仕様から：

  

各テーブルには、関連付けられた   キャプション（CAPTION要素を参照）   の簡単な説明を提供します   テーブルの目的。長い説明   提供される場合もあります（概要を介して   属性）人々の利益のために   音声または点字ベースのユーザーを使用する   エージェント。

また、レコードの場合、「fieldset」要素はフォームの外部で使用するためのものではありません。また、フォーム内では、「個人情報」や「請求先住所」などのような入力フィールドのように概念的にグループ化することを目的としています

これは、フィールドセットをナビゲートするときにスクリーンリーダーユーザーが聞くものについて説明する興味深い記事です。 http：// www .rnib.org.uk / wacblog / articles / too-much-accessibility / too-much-accessibility-fieldset-legends /

fieldsetタグは、スクリーンリーダーやその他の支援技術にも使用できます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top