26

通常、私はフォームでそれを見てきましたが、関連するデータのセットをグループ化すると便利であることがわかりました (たとえば、ページに複数のテーブルがある場合、各テーブルまたは関連するテーブルのグループの周りにフィールドセットを使用して、目に見える意味を定義します)およびグループ名 (凡例))。これは、fieldset タグを悪用して、私の使用ではセマンティックな意味がなくなったのでしょうか?

4

6 に答える 6

21

これは虐待になると思います。http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 には、「FIELDSET 要素を使用すると、作成者はテーマに関連するコントロールとラベルをグループ化できます」と述べられています。

于 2008-11-24T15:31:09.707 に答える
5

名前の「フィールド」ビットは、フィールドfieldsetを指し<form>ます。

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

ただし、HTML は検証され、神が子猫を殺すことはありません。

于 2008-11-24T19:22:28.147 に答える
3

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

これは、フィールドセットがフォーム内のフィールドを常にグループ化することを意味するものではありません。仕様では、ユーザーがフォームと対話するコンテキスト内でのみフィールドセットについて説明しています...

そのため、「乱用」は、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>
于 2008-11-24T15:34:48.013 に答える
2

表をグループ化する場合は、グループごとに適切な見出し (h1-h6) 要素を使用することを検討してください。個々のテーブルは、「キャプション」要素を使用して記述できます。「概要」属性も各テーブルで使用できます。

仕様から：

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

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

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

于 2008-11-24T19:15:15.510 に答える
1

凡例を含むフィールドセットにコンテンツをブロックすることには、セマンティックな利点があります。

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

個人的には、フィールドセットの「フィールド」はフォームフィールドに固有のものではないと思います。form タグ内での使用から関係を継承しただけです。フィールドはグループ化を参照しています。

地元の公園やレクリエーションに行って、友達とソフトボールをすることを想像してみてください。利用可能なフィールドは 3 つあります。いずれもフェンスに「BASEBALL ONLY」の看板あり

荷物をまとめて家に帰りますか？

フォームタグの乱用以外のフィールドセットと凡例の使用にラベルを付けるのは視野が狭いです。

定義のどこにもフォームについて言及していません。

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>
于 2009-11-29T18:23:04.930 に答える
1

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

于 2008-11-24T15:30:41.750 に答える