HTML-Struktur Semantik für Datenseiten

Question

Was ist die beste Struktur zu verwenden, in ein Formular / Details für maximale Lesbarkeit sehen (Zugänglichkeit) und Vielseitigkeit?

Als Beispiel des ASP.NET MVC-Framework des Gerüst erstellt eine Fieldset mit einer Legende an der Spitze und alle Felder in P (ein Etikett und dann die Eingabe / Editor Satz).

Was ist die vielseitigste Struktur zu verwenden, denken Sie?

Zum Beispiel, wenn ich will später das Layout ändern, zwei oder drei Felder Side-by-Side statt Top-down, ich würde nur das über CSS tun wollen, da es strukturell nicht relevant ist.

Danke,
Kieron

EDIT: Eine Freundin Empfehlung war dl, dt und dds zu verwenden ... hat jemand irgendwelche Gedanken auf, dass

Answer 1

Ich verwende eine sehr ähnliche Struktur wie die eine, die von ASP.NET Gerüsten, außer dass ich benutze divs statt ps:

<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>

Ich benutze divs weil ich Das ist mehr semantisch korrekt als p-Elemente, wie sie für Textabsätze vorgesehen sind.

Wenn es darum geht, es ist auch eine vielseitige Struktur Styling, weil Sie zum Beispiel könnte die Fieldset 500px breit und die Fieldset div 250px breit und schwebte machen, so nebeneinander zu erreichen. Oder Sie könnten die gleiche Breite für Fieldset als Fieldset div haben. Oder Sie könnten die Fieldset haben und Fieldset div die gleiche Breite und klebe dann eine Klasse auf einige divs (sagen wir „Hälfte“), die die Hälfte der Breite und schwebte sind. Die Möglichkeiten sind wirklich endlos.

Auf jeden Fall ist dies genau das, was ich für Tag zu Tag Dinge verwenden -. Obwohl seine vielseitig, sie nicht alle Anforderungen passen

Bearbeiten Was Definitionslisten betrifft, so sind sie spezielle Elemente, die semantisch nicht verwendet werden sollte, eine Form zu legen.

Answer 2

Ich würde nur eine Grundform erstellen und die Struktur lasse um die wachsen.

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

Und dann, wenn Sie brauchen Gruppierungen

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

Und dann tun alle Ihre Präsentation in CSS. Der beste Weg, die Zugänglichkeit zu testen ist es, alle Stylesheets zu deaktivieren und sehen, ob die Website sinnvoll ist.

Formulare sind auf Blockebene Elemente, so dass sie für die anderen Elemente enthalten semantisch korrekt sind.