p vs. ol oder UL für Form Styling

Question

Normalerweise I Stil bildet mit dem ungeordneten Liste Tag z.

<fieldset>
    <ul>
        <li>
            <label for="txtName">Name</label>
            <input type="text" id="txtName" />
        </li>
    </ul>
</fieldset>

Doch oft sehe ich Markup, das den <p>-Tag verwendet stattdessen, etwa so:

<fieldset>
    <p>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
    </p>
</fieldset>

Welche von diesen ist semantisch korrekt? Gibt es irgendwelche Vor- oder Nachteile der verschiedenen Methoden, andere als die <p> Stil prägnanter zu sein?

Edit: Ganz klar eine Dose Würmer öffnen hier - mehr Optionen, gah! :) Hat das W3C hier eine Empfehlung haben?

Komisch die W3C-Empfehlung scheint die am wenigsten elegante Lösung zu sein:

<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>

Schade ist es nicht stärker Führung um die beste Konvention für Formularelemente Kennzeichnung auf.

Answer 1

Meiner Meinung nach einer Gruppe von Formular-Steuerelemente ist weder ein Listenelement oder ein Absatz. Als ich Formen markieren, trenne ich meine Gruppen von Etikett / Eingabe von ihnen in <div>s Verpackung. Wenn Sie versuchen, ein div ision zwischen Formular-Steuerelemente zu markieren, dann haben Sie keine Angst, ein <div> zu verwenden.

<fieldset>
  <div class="field">
    <label for="txtName">Name</label>
    <input type="text" id="txtName" />
  </div>
  <div class="field">
    <label for="txtTitle">Title</label>
    <input type="text" id="txtTitle" />
  </div>
</fieldset>

Von Ihren angegebenen Beispielen, <p> wahrscheinlich verschlechtert „besser“, weil Sie nicht Kugeln sehen neben Ihrem Artikel, wenn CSS nicht verfügbar war, und die Gruppen von Kontrollen wahrscheinlich ziemlich gut gestaffelt würden.

Answer 2

Vergessen Definition Liste nicht:

<fieldset>
    <dl>
        <dt><label for="txtName">Name</label></dt>
        <dd><input type="text" id="txtName" /></dd>
    </dl>
</fieldset>

Es gibt keine wirkliche richtige Antwort. Wählen Sie das Markup, die am meisten Sinn macht für Sie. Für uns Formen sind nicht eine ungeordnete Liste. Definitionsliste ist näher in meinem Kopf.

Answer 3

Im Allgemeinen bildet Felder sind weder Ziffern noch Listenelemente, semantisch zu sprechen. Wenn Sie Ihre Formularfelder benötigen zusammen gruppiert werden, sind <div>s mit Klassen wahrscheinlich am besten geeignet, aber wenn Sie nur für einen Behälter um den <label> / <input> Paar suchen, sollten Sie die alternative Methode für ein Etikett mit einem Feld assoziiert:

<fieldset>
    <label>Name <input type="text" id="txtName"/></label>
    <label>Location <input type="text" id="txtLocation"/></label>
</fieldset>

Sie können dann Stil oder manipulieren sie zusammen, ohne eine künstliche Hülle (und ohne jemals über for= wieder Gedanken machen zu müssen).

Answer 4

Ich neige dazu, geordnete Listen zu verwenden,

<fieldset>
<ol>
    <li>
        <label for="txtNameFirst">Name</label>
        <input type="text" id="txtNameFirst" />
    </li>
    <li>
        <label for="txtNameLast">Name</label>
        <input type="text" id="txtNameLast" />
    </li>
</ol>
</fieldset>

Meine semantische Begründung für geordnete Listen ist, dass ein großer Teil der Formen in gedruckter Form ist tatsächlich nummeriert und ist daher eine geordnete Liste von Formulareingaben.

Semantisch, ich denke, eine Definitionsliste Wasser als auch hält, und es hat den zusätzlichen Vorteil, einen Wrapper für jedes Label / Eingang Versorgung sowie jedes einzelne Etikett und Eingangs Paarung, die Ihnen eine Menge Design-Steuerung geben kann ( wenn Sie mit der leichten Plump von Umwickeln einen DL um jedes Etikett / Eingangspaar leben können)

<fieldset>
    <dl>
        <dt><label for="txtNameFirst">Name</label></dt>
        <dd><input type="text" id="txtNameFirst" /></dd>
    </dl>
    <dl>
        <dt><label for="txtNameLast">Name</label></dt>
        <dd><input type="text" id="txtNameLast" /></dd>
    </dl>
</fieldset>

Wenn bestellt / ungeordneten / Definitionslisten sind einfach nicht Ihr Ding ist, dann würde ich mit divs gehen. Ihre einzigen implizite Semantik ist „eine Abteilung“ so sind sie für den Job gut.

Ich habe eine harte Zeit, um die Anwendung des Absatzes zu rechtfertigen (p) Elemente Label / Eingangspaare wickeln wie die implizierte Semantik des p-Elements einfach nicht meiner Meinung nach anwenden. (Auch, ist es schön, das p-Element für erklärenden Text in der Form zur Verfügung zu halten, wenn erforderlich)

Answer 5

Die wichtigsten Dinge, die das W3C Layout für Formulare ist, dass das Formular in einer Art und Weise eingerichtet ist, dass die Etiketten und Formularelemente können leicht programmatisch zusammengefasst werden:

  

1.3.1 Info und Beziehungen: Informationen, Struktur und durch die Darstellung vermittelt Beziehungen können programmatisch oder sind in Text verfügbar bestimmt werden.

Insbesondere HTML-Technik 44: Kennzeichnungselemente Mit und HTML-Technik 71: Bereitstellung einer Beschreibung .

Der Vorteil, den Sie erhalten von jedem Etikett und Eingabe in einem Listenelement Verpackung ist, dass der Benutzer mit einem Screenreader auch einen Hinweis am Anfang bekommen kann, dass die Liste x Elemente in sich hat, die nützlich sein könnte.

Generell sind aber unsere Designer sind mit Zack - unser Formular Zeilen in einem div verpackt, mit einer Klasse von "formrow" oder ähnlichen

.

Answer 6

neigte ich eine <div> pro <label> und <input> Combo zu verwenden, bis ich einen neuen Job bekam, wo die Norm eine ungeordnete Liste war. Ich habe einen Mitarbeiter, der von Tabellen (eine Spalte für Etiketten, ein für Felder) schwört behaupten, dass es nur tabellarische Daten mit Bearbeitungsfunktionen.

An diesem Punkt I-Eingänge glauben als eine ungeordnete Liste ist die beste semantische fit, aber wie Sie beachten Sie, es gibt viele Meinungen zu diesem Thema.

Answer 7

Die WHATWG hält tatsächlich jeder Teil einer Form a Absatz :

  

Jeder Teil eines Formulars ist ein Absatz in Betracht gezogen, und wird in der Regel aus anderen Teilen unter Verwendung von p-Elemente getrennt.

Ich bin mir nicht sicher, ob ich damit einverstanden, aber es scheint, die meist „offizielle“ Antwort auf das Problem zu sein, die Sie bekommen können. Leider konnte ich keine Erklärung finden.