¿Es un mal diseño utilizar etiquetas de tabla al mostrar formularios en HTML?

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

Pregunta

sigo escuchando eso div Las etiquetas deben usarse con fines de diseño y no table etiquetas.Entonces, ¿eso también se aplica al diseño de formularios?Sé que un diseño de formulario sigue siendo un diseño, pero parece que crear diseños de formulario con divs requiere más html y css.Teniendo esto en cuenta, ¿deberían los diseños de formularios utilizar div etiquetas en su lugar?

¿Fue útil?

Solución

Sí, se aplica a los diseños de formulario.Tenga en cuenta que también hay etiquetas como FIELDSET y LABEL que existen específicamente para agregar estructura a un formulario, por lo que en realidad no se trata simplemente de usar DIV.Debería poder marcar un formulario con HTML mínimo y dejar que CSS haga el resto del trabajo.P.ej.:

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

Otros consejos

Creo que es un mito que los formularios sean "difíciles" de diseñar bien con buen HTML y CSS.El nivel de control que CSS le brinda sobre su diseño va mucho más allá de lo que cualquier diseño torpe basado en tablas jamás tendría.Esta no es una idea nueva, ya que este artículo de la revista Smashing desde hace mucho tiempo en programas de 2006.

Tiendo a utilizar variantes del siguiente marcado en mis formularios.Tengo un estilo .form genérico en mi CSS y luego variantes para entradas de texto, casillas de verificación, selecciones, áreas de texto, etc., etc.

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}
<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

Las mesas no son malas.Son, con diferencia, la mejor opción cuando es necesario mostrar datos tabulares.Los formularios, en mi humilde opinión, no son datos tabulares, son formularios y CSS proporciona herramientas más que suficientes para diseñar formularios como desee.

Si solo necesita un diseño de tipo pinzamiento de columna de fila simple, no debería sentirse culpable al usar tablas.No sé cómo alguien puede llamar a eso "mal diseño" sólo porque no es CSS.He visto muchos Malos diseños basados ​​en CSS.Me encanta CSS y creo que es muy superior en muchos aspectos a los diseños de tablas anidadas tradicionales, pero hago lo que funciona mejor y lo que es más fácil de mantener y tomo decisiones más importantes e impactantes.

El principio general es que desea utilizar cualquier elemento HTML que transmita mejor el contenido semántico que desea y luego confiar en CSS para representar visualmente ese contenido semántico.Seguir ese principio genera muchos beneficios intrínsecos, incluidos cambios visuales generales del sitio más sencillos, optimización de motores de búsqueda, diseños multidispositivo y accesibilidad.

Entonces, la respuesta corta es:puede hacer lo que quiera, pero las mejores prácticas sugieren que solo use etiquetas de tabla para representar datos tabulares y en su lugar use las etiquetas html que mejor transmitan lo que está tratando de representar.Puede que al principio sea un poco más difícil, pero una vez que te acostumbres a la idea, te preguntarás por qué lo hiciste de otra manera.

Dependiendo de lo que intente hacer con su formulario, no debería necesitarse mucho más marcado para usar el marcado semántico y CSS, especialmente si confía en las propiedades en cascada de CSS.Además, si tiene varios formularios iguales en muchas páginas de su sitio, el enfoque semántico es mucho más eficiente, tanto para codificar como para mantener.

Para que los formularios sean lo más accesibles posible y semánticamente correctos, utilizo el siguiente formato:

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

Utilizo CSS principalmente hasta que CSS se vuelve un lastre.Por ejemplo, es mucho más fácil crear un formulario de más de 3 columnas (3 conjuntos de etiquetas + campos de formulario) usando una tabla que en CSS.No pude lograr que el diseño se viera correctamente en los principales navegadores usando CSS puro y estaba dedicando demasiado tiempo a hacerlo funcionar.Entonces dije que se jodiera y lo hice fácilmente usando una mesa.La mesa no está mal.

Es una zona gris.No todo en el marcado tiene límites claramente definidos, y este es un caso en el que puedes usar tus preferencias personales y tomar una decisión.No encaja del todo con la idea de que los datos estén organizados, pero las celdas están relacionadas a través de múltiples ejes, y esa es la regla general que uso para decidir si algo cabe en una tabla o no.

Ciertamente es más fácil usar table que div para diseñar una tabla, pero tenga en cuenta que se supone que una tabla significa algo: presenta datos de manera regular para que el usuario los vea, en lugar de colocar cuadros en la pantalla en un orden determinado. .En general, creo que los diseños de formularios deberían usar divs para decidir cómo se muestran los elementos del formulario.

Una cosa que no veo a menudo discutida en estas preguntas sobre diseño de formulario es que si ha elegido una tabla para diseñar su formulario (con etiquetas a la izquierda y campos a la derecha como se menciona en una de las respuestas), entonces ese diseño es fijado.En el trabajo, recientemente tuvimos que hacer una rápida "prueba de concepto" de nuestras aplicaciones web en árabe.Las aplicaciones que habían usado tablas para el diseño de formularios básicamente estaban atascadas, mientras que pude invertir el orden de todos los campos y etiquetas del formulario en todas mis páginas cambiando unas diez líneas en mi archivo CSS.

Si sus formularios están diseñados en formato tabular (por ejemplo, etiquetas a la izquierda y campos a la derecha), entonces sí, use etiquetas de tabla.

Un formulario no es “presentación”, pides datos, no sueles presentar datos.Utilizo mucha edición en línea en datos tabulares.Obviamente, uso las celdas de datos - td como soportes para los elementos de entrada cuando cambio de presentación a entrada.

La mayoría de las respuestas que he visto aquí parecen apropiadas.Lo único que agregaría, específicamente a apathetic's o Mr.Matt es para usar <dl>/<dt>/<dd>.Creo que estos representan la lista semánticamente.

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

Quizás quieras cambiarles el estilo, pero esto dice semánticamente lo que está pasando, es decir, tienes una lista de "términos" (<dt>) y "definiciones" (<dd>), siendo el término la etiqueta y la definición los valores ingresados ​​por el usuario.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top