html - periodic - p vs. ol o ul para el estilo de la forma
html elements list (6)
Generalmente, los campos de formularios no son párrafos ni elementos de lista, semánticamente hablando. Si necesita agrupar los campos de su formulario, es probable que los <div> s con clases sean los más apropiados, pero si solo está buscando un contenedor alrededor del par <label> / <input> , considere el método alternativo para asociar un formulario. etiqueta con un campo:
<fieldset>
<label>Name <input type="text" id="txtName"/></label>
<label>Location <input type="text" id="txtLocation"/></label>
</fieldset>
Luego puede peinarlos o manipularlos sin una envoltura artificial (y sin tener que preocuparse for= nuevamente).
Normalmente, yo formo formularios con la etiqueta de la lista desordenada, por ejemplo
<fieldset>
<ul>
<li>
<label for="txtName">Name</label>
<input type="text" id="txtName" />
</li>
</ul>
</fieldset>
Sin embargo, a menudo veo marcas que usan la etiqueta <p> lugar, así:
<fieldset>
<p>
<label for="txtName">Name</label>
<input type="text" id="txtName" />
</p>
</fieldset>
¿Cuál de estos es más semánticamente correcto? ¿Hay algún pros o contras para los diferentes métodos, aparte del estilo <p> que es más sucinto?
Editar: abrir una lata de gusanos aquí - más opciones, ¡gah! :) ¿El W3C tiene una recomendación aquí?
De manera divertida, la recomendación del W3C parece ser la solución menos elegante:
<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>
Una pena que no haya una guía más sólida en torno a la mejor convención para marcar los elementos de la forma.
No olvides la lista de definiciones:
<fieldset>
<dl>
<dt><label for="txtName">Name</label></dt>
<dd><input type="text" id="txtName" /></dd>
</dl>
</fieldset>
No hay una respuesta correcta. Elija el marcado que tenga más sentido para usted. Para mí, los formularios no son una lista desordenada. La lista de definiciones está más cerca en mi mente.
En mi opinión, un grupo de controles de formulario no es un elemento de lista o un párrafo. Cuando marque formularios, separaré mis grupos de etiqueta / entrada envolviéndolos en <div> s. Si intenta marcar una división entre los controles de formulario, entonces no tenga miedo de usar un <div> .
<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>
Según sus ejemplos, <p> probablemente degrada "mejor" porque no verá viñetas al lado de sus artículos si CSS no estuviera disponible, y los grupos de controles probablemente estarían espaciados bastante bien.
Solía usar un combo <div> por <label> y <input> , hasta que conseguí un nuevo trabajo donde la norma era una lista desordenada. Tengo un compañero de trabajo que jura por tablas (una columna para etiquetas, una para campos) afirmando que solo se trata de datos tabulares con capacidades de edición.
En este punto creo que las entradas como una lista desordenada es el mejor ajuste semántico, pero como se nota hay muchas opiniones sobre el tema.
Tiendo a usar listas ordenadas
<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>
Mi razonamiento semántico para usar listas ordenadas es que una gran cantidad de formularios impresos están en realidad numerados y, por lo tanto, son una lista ordenada de entradas de formularios.
Semánticamente, creo que una lista de definición también contiene agua, y tiene el beneficio adicional de suministrar un envoltorio para cada etiqueta / entrada, así como también cada etiqueta y entrada individual que puede darle mucho control de diseño (si puede vivir con la ligera mano dura de envolver un DL alrededor de cada etiqueta / par de entrada)
<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>
Si las listas de orden / desorden / definición simplemente no son lo tuyo, entonces iría con divs. Su única semántica implícita es "una división", por lo que están bien para el trabajo.
Me es difícil justificar el uso de elementos de párrafo (p) para envolver pares etiqueta / entrada ya que la semántica implícita del elemento p simplemente no se aplica en mi opinión. (también, es bueno mantener el elemento p disponible para usar dentro del formulario para un texto explicativo si es necesario)
Los aspectos clave que el W3C establece para los formularios es que el Formulario se configura de forma que las etiquetas y los elementos del formulario se puedan agrupar fácilmente mediante programación:
En particular HTML Técnica 44: Uso de elementos de etiqueta y HTML Técnica 71: Proporcionar una descripción .
La ventaja que obtiene al envolver cada etiqueta y entrada en un elemento de la lista es que el usuario con un lector de pantalla puede obtener al principio una indicación de que la lista contiene x elementos, lo que podría ser útil.
Generalmente, aunque nuestros diseñadores están con Zack , nuestras filas de formularios están envueltas en un div, con una clase de "formrow" o similar.