Warum sollten Sie anstelle von Tabellen Definitionslisten-Tags (DL, DD, DT) für HTML-Formulare verwenden?

Ich bin kürzlich auf einige Beispiele gestoßen, die Dinge tun wie:

<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 HTML-Formulare. Warum ist das so? Was ist der Vorteil gegenüber der Verwendung von Tabellen?

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 "for" -Attribut im <label> -Tag sollte auf das "id" -Attribut eines <input> -Tags verweisen. Wenn Beschriftungen Feldern zugeordnet sind, wird durch Klicken auf die Beschriftung das zugehörige Feld scharfgestellt.

Sie können auch Tags wie <fieldset> verwenden, um Abschnitte eines Formulars zu gruppieren, und <legend>, um eine Feldmenge zu beschriften.

Ich habe die in diesem Artikel beschriebene Technik mehrmals erfolgreich angewendet .

Ich stimme sjstrutt zu, dass Sie formularbezogene Tags wie labelund formin Ihren Formularen verwenden sollten, aber dem in seinem Beispiel beschriebenen HTML-Code fehlt häufig Code, den Sie als "Hooks" für die Gestaltung Ihres Formulars mit CSS verwenden können.

Infolgedessen markiere ich meine Formulare folgendermaßen:

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

Dieser Ansatz hinterlässt mir einen verständlichen Satz von Tags, der genügend Hooks enthält, um die Formulare auf viele verschiedene Arten zu gestalten.

Dies ist eine Teilmenge des Problems Semantik vs. Formatierung. Eine Definitionsliste sagt, was sie sind, eine Liste verwandter Schlüssel- / Wertattribute, sagt aber nicht, wie sie angezeigt werden sollen. Eine Tabelle enthält mehr Informationen zum Layout und zur Anzeige der Daten als zu den darin enthaltenen Daten. Es schränkt ein, wie die Liste formatiert werden kann, indem sowohl das Format als auch das Format zu wenig angegeben werden.

In der Vergangenheit hat HTML die Semantik mit der Formatierung verwechselt. Schriftarten und Tabellen sind die schlechtesten Beispiele. Die Umstellung auf CSS für die Formatierung und das Entfernen vieler reiner Formatierungs-Tags aus XHTML stellt die Trennung von Bedeutung und Formatierung wieder her. Durch die Trennung der Formatierung in CSS können Sie denselben HTML-Code auf viele verschiedene Arten anzeigen, um ihn für einen breiten Browser, einen kleinen mobilen Browser, Drucken, einfachen Text usw. neu zu formatieren.

Besuchen Sie zur Erleuchtung den CSS Zen Garden .

In diesem Fall, Etiketten und Eingänge sind Ihre semantische Bedeutung und sie stehen auf eigene Faust.

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

Deshalb ist das Semantic Web wichtig. Dadurch kann sich der Inhalt der Seite sowohl für den Menschen als auch für die Technologie genau darstellen. Zum Beispiel gibt es viele Browser- Plugins , mit denen Benutzer Webformulare schnell mit ihren Standardinformationen (Name, Telefonnummer usw.) ausfüllen können. Diese funktionieren selten gut, wenn Eingaben keine Beschriftungen zugeordnet sind.

Hoffentlich hilft das.

Unter Verwendung dl dt, ddfür Formulare ist nur ein weiterer Weg , um Ihre Formen zu strukturieren, zusammen mit ul li, divund table. Sie können immer ein labelin setzen dt. Auf diese Weise behalten Sie das formularspezifische Element labelbei.

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

Definitionslisten haben semantische Bedeutung. Sie dienen zur Auflistung von Begriffen (<dt>) und den zugehörigen Definitionen (<dd>). Daher stellt in diesem Fall ein <dl> die semantische Bedeutung des Inhalts genauer dar als eine Tabelle.

Definitionslisten werden fast nie verwendet, da sie semantisch gesehen selten im Internet angezeigt werden.

In Ihrem Fall wurde der richtige Code veröffentlicht:

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

Sie erstellen ein Formular mit Eingaben und Beschriftungen für diese Eingaben, Sie erstellen keine Liste von Wörtern und definieren sie.

Wenn Sie einen Hilfeabschnitt ausführen, sind Definitionslisten geeignet, z.

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascade Stylesheets</dd>
    <dt>PHP</dt>
    <dd>Hypertext Preprocessor</dd>
</dl>

Ein Grund für die Verwendung von <dl> zum Markieren des Formulars ist, dass es viel einfacher ist, ausgefallene CSS-Layout-Tricks mit einem <dl> als mit einer <table> auszuführen. Der andere Teil ist, dass es die Semantik des Formulars (eine Liste von Beschriftungs- / Feldpaaren) besser widerspiegelt als eine Tabelle.

Ok, Tischhass ist auch ein Teil davon.

Manchmal präsentiert eine Definitionsliste die Informationen einfach so, wie es gewünscht wird, während eine Tabelle dies nicht tut. Persönlich würde ich wahrscheinlich keine Definitionsliste für ein Formular verwenden, es sei denn, sie passt zum Stil der Site.

Praktisch alle Formulare sind tabellarisch. Sehen Sie jemals ein Formular, das nicht tabellarisch ist? In den Richtlinien, die ich gelesen habe, wurde vorgeschlagen, das Tabellen-Tag für die tabellarische Darstellung zu verwenden. Genau dafür sind Formulare, Kalender und Tabellen gedacht. Und jetzt verwenden sie DD und DT anstelle von Tabellen? Wofür kommt das Web?! :) :)

Tabellenlistendaten sehen folgendermaßen aus:

<table>
<tr>
	<td class="title">Name: </td>
	<td class="text">John Don</td>
</tr>
<tr>
	<td class="title">Age: </td>
	<td class="text">23</td>
</tr>
<tr>
	<td class="title">Gender: </td>
	<td class="text">Male</td>
</tr>
<tr>
	<td class="title">Day of Birth:</td>
	<td class="text">12th May 1986</td>
</tr>
</table>

Und Sie können DL-, DT- und DD-Tags-Listendaten wie folgt verwenden:

<dl>
	<dt>Name: </dt>
	<dd>John Don</dd>
	
	<dt>Age: </dt>
	<dd>23</dd>
	
	<dt>Gender: </dt>
	<dd>Male</dd>
	
	<dt>Day of Birth:</dt>
	<dd>12th May 1986</dd>
</dl>