Warum werden für HTML-Formulare Definitionslisten (DL, DD, DT) anstelle von Tabellen verwendet?

Question

Ich bin in letzter Zeit auf einige Beispiele gestoßen, die so etwas tun:

<dl>
  <dt>Full Name:</dt>
  <dd><input type="text" name="fullname"></dd>
  <dt>Email Address:</dt>
  <dd><input type="text" name="email"></dd>
</dl>

für die Erstellung von HTML-Formularen. Warum ist das so? Was ist der Vorteil gegenüber der Verwendung von Tabellen?

Answer 1

Ich denke, es liegt an Ihnen, die Semantik zu bestimmen, aber meiner Meinung nach:

Anstelle einer Definitionsliste sollten formularbezogene Eigenschaften verwendet werden.

<form>
  <label for="fullname">Full Name:</label>
  <input type="text" name="fullname" id="fullname">
  <label for="email">Email Address:</label>
  <input type="text" name="email" id="email">
</form>

Das Attribut "for" im <label>-Tag sollte auf das Attribut "id" eines <input>-Tags verweisen. Wenn Beschriftungen mit Feldern verknüpft sind, wird durch Anklicken der Beschriftung das zugehörige Feld in den Fokus gesetzt.

Sie können auch Tags wie <fieldset> verwenden, um Abschnitte eines Formulars zusammenzufassen, und <legend>, um einen Feldsatz zu beschriften.

Answer 2

Ich habe mit Erfolg die Technik angewandt, die in dieser Artikel mehrere Male.

Ich stimme zu mit sjstrutt dass Sie formbezogene Tags verwenden sollten wie label y form in Ihren Formularen, aber dem HTML-Code in seinem Beispiel fehlen oft einige Codes, die Sie als "Haken" für das Styling Ihres Formulars mit CSS verwenden können.

Infolgedessen kennzeichne ich meine Formulare wie folgt:

<form name="LoginForm" action="thispage">
    <fieldset>
        <legend>Form header</legend>
        <ul>
            <li>
                <label for="UserName">Username: </label>
                <input id="UserName" name="UserName" type="text" />
            </li>
            <li>
                <label for="Password">Password: </label>
                <input id="Password" name="Password" type="text" />
            </li>
        </ul>
    </fieldset>
    <fieldset class="buttons">
        <input class="submit" type="submit" value="Login" />
    </fieldset>
</form>

Auf diese Weise erhalte ich einen verständlichen Satz von Tags, der genügend Anknüpfungspunkte enthält, um die Formulare auf viele verschiedene Arten zu gestalten.

Answer 3

Dies ist eine Untergruppe der Frage von Semantik und Formatierung. Eine Definitionsliste sagt, was sie sind, eine Liste von zusammenhängenden Schlüssel/Wert-Attributen, aber nicht, wie sie angezeigt werden sollen. Eine Tabelle sagt mehr über das Layout und die Art der Darstellung der Daten aus als über die Daten selbst. Sie schränkt die Formatierung der Liste ein, indem sie sowohl das Format überspezifiziert als auch den Inhalt unterspezifiziert.

HTML hat in der Vergangenheit die Semantik mit der Formatierung verwechselt. Font-Tags und Tabellen sind die schlimmsten Beispiele. Durch die Umstellung auf CSS für die Formatierung und die Entfernung vieler reiner Formatierungs-Tags aus XHTML wird die Trennung von Bedeutung und Formatierung wieder einigermaßen hergestellt. Durch die Auslagerung der Formatierung in CSS kann derselbe HTML-Code auf viele verschiedene Arten dargestellt werden, z. B. für einen breiten Browser, einen kleinen mobilen Browser, zum Drucken oder als reiner Text.

Besuchen Sie zur Erhellung die CSS Zen-Garten .

Answer 4

Verwendung von dl dt , dd für Formulare ist nur eine weitere Möglichkeit, Ihre Formulare zu strukturieren, zusammen mit ul li , div y table . Sie können jederzeit eine label en dt . Auf diese Weise behalten Sie das formularspezifische Element label an Ort und Stelle.

<form action="/login" method="post"> 
    <dl>
        <dt><label for="login">Login</label></dt>
        <dd><input type="text" name="login" id="login"/></dd>
        <dt><label for="password">Password</label></dt>
        <dd><input type="password" name="password" id="password"/></dd>  
        <dd><input type="submit" value="Add"/></dd>
    </dl>
</form>

Answer 5

In diesem Fall werden Etiketten und Eingaben sind Ihre semantische Bedeutung und sie stehen für sich selbst.

Stellen Sie sich vor, Sie müssten einer blinden Person die Webseite vorlesen. Sie würden nicht sagen: "Okay, ich habe eine Liste der Definitionen hier. Die erste Begriff ist 'Name'." Stattdessen würden Sie wahrscheinlich sagen: "Okay, wir haben einen Formular hier und es sieht so aus, als gäbe es eine Satz von Feldern die erste Eingabe es mit der Bezeichnung Name'."

Aus diesem Grund ist das semantische Web so wichtig. Es ermöglicht, dass sich der Inhalt einer Seite sowohl für den Menschen als auch für die Technik korrekt darstellt. Zum Beispiel gibt es viele Browser Plugins die das schnelle Ausfüllen von Webformularen mit Standardinformationen (Name, Telefonnummer usw.) erleichtern. Diese funktionieren selten gut, wenn die Eingaben nicht mit Bezeichnungen versehen sind.

Ich hoffe, das hilft.