4

読みやすさ (アクセシビリティ) と汎用性を最大限に高めるために、フォーム/詳細ビューを設計するときに使用する最適な構造は何ですか?

例として、ASP.NET MVC フレームワークのスキャフォールディングは、上部に凡例があり、すべてのフィールドが p にあるフィールドセットを作成します (ラベル、次に入力/エディター セット)。

使用するのに最も用途の広い構造は何だと思いますか?

たとえば、後からレイアウトを変更して、2 つまたは 3 つのフィールドをトップダウンではなく横に並べる場合、構造的に関連性がないため、CSS を介してのみ行いたいと思います。

ありがとう、
キーロン

編集：友人の推奨は、dl、dt、およびddsを使用することでした...誰かそれについて何か考えがありますか?

4

2 に答える 2

5

ps の代わりに div を使用することを除いて、ASP.NET スキャフォールディングによって生成される構造と非常によく似た構造を使用します。

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

div を使用するのは、テキストの段落を対象としているため、p 要素よりも意味的に正しいからです。

たとえば、フィールドセットを 500px 幅にし、フィールドセット div を 250px 幅にしてフローティングにすることで、並べて実現できるため、スタイリングに関しても汎用性の高い構造です。または、フィールドセットの div と同じ幅のフィールドセットを使用することもできます。または、フィールドセットとフィールドセット div を同じ幅にしてから、半分の幅でフロートされたいくつかの div (「半分」など) にクラスを貼り付けることができます。可能性は本当に無限大です。

いずれにせよ、これは私が日常的に使用しているものにすぎません。用途は広いですが、すべての要件に適合するとは限りません。

EDIT定義リストに関する限り、フォームをレイアウトするために意味的に使用すべきではない特殊な要素です。

于 2009-09-20T06:34:04.047 に答える
0

基本的なフォームを作成し、その周りに構造を成長させます。

<form>
  <input>
  <input>
  <input>
</form>

そして、グループ化が必要な場合

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

そして、すべてのプレゼンテーションを CSS で行います。アクセシビリティをテストする最善の方法は、すべてのスタイルシートを無効にして、サイトが適切かどうかを確認することです。

フォームはブロック レベルの要素であるため、他の要素を含む意味として正しいです。

于 2009-09-20T06:22:20.043 に答える