5

fieldset/legendが HTML でどのように機能するかはわかりました。いくつかのフィールドを持つフォームがあるとします:

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

は何に使えばいいlegendですか？タイトルとして表示されていますが、意味的には凡例は内容の説明ではないでしょうか。私の見解では、できれば次のようなことをしたいと思います：

<form>
    <fieldset>
        <legend>* = required</legend>
        <label for="input1">input 1 *</label><input id="input1" name="input1" />
    </fieldset>
</form>

しかし、フィールドセットがどのようにレンダリングされるかについては、実際にはうまくいきません。これは単なる HTML のあいまいなネーミングですか、それとも英語の「レジェンド」に対する私の誤解ですか?

編集：いくつかのエラーを修正しました;-)

4

5 に答える 5

8

はい、ネーミングがあいまいです。フィールドセットのキャプションと考えるのが最善です。

および要素の HTML 仕様をFIELDSETLEGENDまだ参照していない場合は参照してください。

このLEGEND要素を使用すると、作成者はキャプションを に割り当てることができますFIELDSET。凡例FIELDSETは、非視覚的にレンダリングされる場合のアクセシビリティを向上させます。

于 2008-10-31T13:15:33.553 に答える
1

<legend> 要素は、<fieldset>.

FIELDSET 要素により、作成者はテーマに関連するコントロールをグループ化できます

つまり、fieldsets は、 と の 1 組だけではなく、複数のフォーム コントロールをグループ化する必要が<input>あり<legend>ます。

実際<div>、s、<p>s、またはs は、 +ペア<li>のコンテナーとして非常に適しています。<input><legend>

于 2008-10-31T13:27:23.667 に答える
1

私はあなたが書くつもりだったと思います

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

しかし、あなたは部分的に正しいです。伝説という言葉には、次のようないくつかの意味があります。

  • イラスト付きの説明キャプション。
  • マップまたはチャートに表示されるシンボルの説明表またはリスト。

したがって、実際には両方を意味する可能性があります。

于 2008-10-31T13:17:35.763 に答える
1

凡例が「タイトルとして表示されている」と言うと..明らかに関連するCSSに依存します。CSS を自分で指定しない場合、各ブラウザーは独自の組み込みスタイルを使用します。

凡例はタイトルとは異なることに同意します... "* = required" のようなものに対して凡例が適切な場所であるとは必ずしも思いません (これは、ユーザーにとって単なる注意事項のように見えますが、実際にはフィールドセット自体の説明)。

結局のところ、凡例は、キャプション、またはイラストを伴う簡単な説明 (通常、この場合は画像以外のもの) として定義できます。

どのように表示されるかについては、CSS を使用すると、必要に応じて表示する (または表示しない) ことができます。

于 2008-10-31T13:19:08.380 に答える
1

凡例をグループボックスのタイトルと考えてください。類似のフォーム要素をグループ化するために使用します。「配送先住所」の凡例を持つ 1 つのフィールドセットに配送先住所のすべての入力フィールドを、「請求先住所」の凡例を持つ別のフィールドセットに請求先住所のすべての入力フィールドのセットを含めることができます。

次に例を示します。

Skiviez Checkout のフィールドセット http://piasecki.name/fieldset-legend-example.jpg

CSS を使用してスタイルを設定するのは難しい場合があります (Internet Explorer ではフィールドセットの背景が正しく表示されないためです。IEスタイルシートには良い例がいくつかあります。「#content form fieldset」セクションを参照してください。

于 2008-10-31T13:20:38.613 に答える