romanos - listas ordenadas desordenadas y de definicion html

¿Por qué usar etiquetas de definición(DL, DD, DT) etiquetas para formularios HTML en lugar de tablas?

Question

Recientemente me he encontrado 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?

Answer 1

A veces, una lista de definiciones simplemente presenta la información de la manera que se desea, mientras que una tabla no. Personalmente, probablemente no use una lista de definiciones para un formulario, a menos que se adapte al estilo del sitio.

Answer 2

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

Imagine que tiene que leer la página web, fuera de carga, a una persona ciega. No dirías "Bueno, tengo una lista de definiciones aquí. El primer término es ''nombre''". En cambio, probablemente diría "Bien, tenemos un formulario aquí y parece que hay un conjunto de campos , la primera entrada está etiquetada como ''nombre''".

Esta es la razón por la cual la web semántica es importante. Permite que el contenido de la página se represente con precisión tanto para los humanos como para la tecnología. Por ejemplo, hay many plugins browser que ayudan a las personas a completar rápidamente formularios web con su información estándar (nombre, número de teléfono, etc.). Estos raramente funcionan bien si las entradas no tienen etiquetas asociadas.

Espero que ayude.

Answer 3

Este es un subconjunto del tema de la semántica frente al formato. Una lista de definiciones dice cuáles son, una lista de atributos de clave / valor relacionados, pero no dice cómo mostrarla. Una tabla dice más sobre el diseño y cómo mostrar los datos, y luego cuáles son los datos dentro. Limita la forma en que se puede formatear la lista tanto al sobreespecificar el formato como al especificar lo que es.

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

Para la iluminación, visita el CSS Zen Garden .

Answer 4

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 el formulario como label y form en sus formularios, pero el HTML que se describe en su ejemplo, a menudo carecerá de algún código que pueda usar como "ganchos" para diseñar su formulario con CSS.

Como consecuencia de esto, marqué 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 las formas de muchas maneras diferentes.

Answer 5

La tabla de datos de la tabla será así:

Y puede usar DL, DT, DD List List Data como este: -

Answer 6

Las listas de definiciones casi nunca se usan 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á creando un formulario con entradas y etiquetas para dichas entradas, no está estableciendo una lista de palabras y definiéndolas.

Si está haciendo algún tipo de sección de ayuda, entonces 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>

Answer 7

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, a <dl> representa el significado semántico del contenido con más precisión que una tabla.

Answer 8

Parte del motivo por el que se usa <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 de la forma (una lista de pares etiqueta / campo) que una tabla.

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

Answer 9

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

Answer 10

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

En lugar de una lista de definiciones, se deben usar las 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 se asocian con campos, al hacer clic en la etiqueta se enfocará el campo asociado.

También puede usar etiquetas como <fieldset> para agrupar secciones de un formulario y <legend> para captar un fieldset.

Answer 11

Usar dl dt , dd para formularios es solo otra forma de estructurar sus formularios, junto con ul li , div y table . Siempre puedes poner una label en dt . De esta forma, mantendrá la label elemento específico del formulario en 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>