¿Por qué utilizar etiquetas de listas de definiciones (DL, DD, DT) para formularios HTML en lugar de tablas?

Recientemente me encontré con algunos ejemplos que hacen cosas como:

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

para hacer formularios HTML. ¿Porqué es eso? ¿Cuál es la ventaja sobre el uso de tablas?

Supongo que depende de usted determinar la semántica, pero en mi opinión:

En lugar de una lista de definiciones, se deben utilizar propiedades relacionadas con el formulario.

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

El atributo "for" en la etiqueta <label> debe hacer referencia al atributo "id" de una etiqueta <input>. Tenga en cuenta que cuando las etiquetas están asociadas con campos, hacer clic en la etiqueta pondrá el campo asociado en foco.

También puede usar etiquetas como <fieldset> para agrupar secciones de un formulario y <legend> para poner título a un fieldset.

He utilizado con éxito la técnica descrita en este artículo varias veces.

Estoy de acuerdo con sjstrutt en que debe usar etiquetas relacionadas con formularios como labely formen sus formularios, pero el HTML descrito en su ejemplo, a menudo carecerá de código que pueda usar como "ganchos" para diseñar su formulario con CSS.

Como consecuencia de esto, marco mis formularios de esta manera:

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

Este enfoque me deja con un conjunto comprensible de etiquetas, que contiene suficientes ganchos para diseñar los formularios de muchas maneras diferentes.

Este es un subconjunto de la cuestión de la semántica frente al formato. Una lista de definiciones dice cuáles son, una lista de atributos clave / valor relacionados, pero no dice cómo mostrarlos. Una tabla dice más sobre el diseño y cómo mostrar los datos que los datos que contiene. Limita cómo se puede formatear la lista al sobreespecificar el formato y al subespecificar lo que es.

HTML, históricamente, ha mezclado la semántica con el formato. Las etiquetas de fuentes y las tablas son los peores ejemplos. El cambio a CSS para el formateo y la eliminación de muchas de las etiquetas de formato puro de XHTML restaura, en cierto modo, la separación entre el significado y el formato. Al separar el formato en CSS, puede mostrar el mismo HTML de muchas formas diferentes y reformatearlo para un navegador amplio, un navegador móvil pequeño, impresión, texto sin formato, etc.

Para la iluminación, visite CSS Zen Garden .

En este caso, las etiquetas y las entradas son su significado semántico y se mantienen por sí solas.

Imagina que tuvieras que leer la página web, descargarla, a una persona ciega. No diría "Está bien, tengo una lista de definiciones aquí. El primer término es 'nombre'". En su lugar, probablemente diría "Bien, tenemos un formulario aquí y parece que hay un conjunto de campos , la primera entrada tiene la etiqueta 'nombre'".

Por eso la web semántica es importante. Permite que el contenido de la página se represente a sí mismo con precisión tanto para los humanos como para la tecnología. Por ejemplo, existen muchos complementos de navegador que ayudan a las personas a completar rápidamente formularios web con su información estándar (nombre, número de teléfono, etc.). Rara vez funcionan bien si las entradas no tienen etiquetas asociadas.

Espero que ayude.

Utilizando dl dt, ddpara las formas es sólo otra manera de estructurar sus formas, junto con ul li, divy table. Siempre se puede poner un labelen dt. De esta manera, mantiene el elemento específico del formulario labelen su lugar.

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

Las listas de definiciones tienen un significado semántico. Son para enumerar términos (<dt>) y sus definiciones asociadas (<dd>). Por lo tanto, en este caso, un <dl> representa el significado semántico del contenido con más precisión que una tabla.

Las listas de definiciones casi nunca se utilizan porque, semánticamente hablando, rara vez aparecen en Internet.

En su caso, se ha publicado el código correcto:

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

Estás creando un formulario con entradas y etiquetas para dichas entradas, no estás estableciendo una lista de palabras y definiéndolas.

Si está haciendo algún tipo de sección de ayuda, las listas de definiciones serían apropiadas, por ejemplo:

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

Parte de la razón para usar <dl> para marcar el formulario es que es mucho más fácil hacer trucos de diseño CSS sofisticados con un <dl> que con una <table>. La otra parte es que refleja mejor la semántica del formulario (una lista de pares de etiqueta / campo) que una tabla.

Ok, el odio a la mesa también es parte de esto.

A veces, una lista de definiciones simplemente presenta la información de la forma deseada, mientras que una tabla no lo hace. Personalmente, probablemente no usaría una lista de definiciones para un formulario, a menos que se adapte al estilo del sitio.

Prácticamente todas las formas son tabulares. ¿Alguna vez ha visto un formulario que no es tabular? Las pautas que he leído sugirieron usar la etiqueta de tabla para la presentación tabular y para eso son exactamente los formularios, los calendarios y las hojas de cálculo. ¿Y ahora usan DD y DT en lugar de tablas? ¿A qué se dirige la Web? :)

Los datos de la lista de tablas serán así:

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

Y puede usar datos de lista de etiquetas DL, DT, DD como este:

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