formularios - tablas en html ejemplos

¿Es malo diseñar etiquetas de tabla cuando se muestran formularios en html?

Question

Sigo escuchando que las etiquetas div deben usarse para propósitos de diseño y no etiquetas de table . Entonces, ¿eso también se aplica al diseño del formulario? Sé que un diseño de formulario sigue siendo un diseño, pero parece que crear diseños de formulario con div s requiere más html y css . Entonces, teniendo esto en cuenta, ¿deberían los diseños de formularios usar etiquetas div lugar?

Answer 1

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, más que colocar cuadros en la pantalla en un orden determinado . En general, creo que los diseños de formularios deben usar divs para decidir cómo se muestran los elementos del formulario.

Answer 2

Creo que es un mito que las formas son "difíciles" de diseñar bien con buenos HTML y CSS. El nivel de control que CSS le brinda sobre su diseño va mucho más allá de lo que pueda ofrecer cualquier diseño torpe de la mesa. Esta no es una idea nueva, como lo demuestra este artículo de Smashing Magazine de 2006.

Tiendo a usar 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.

.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 tablas no son malas Son, de lejos, la mejor opción cuando se deben 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 de la manera que desee.

Answer 3

El principio general es que desea utilizar los elementos HTML que mejor transmitan el contenido semántico que se propone y luego confiar en CSS para representar visualmente ese contenido semántico. Seguir ese principio compra muchos beneficios intrínsecos, incluidos cambios visuales generales del sitio más fáciles, optimización del motor de búsqueda, diseños de múltiples dispositivos 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 qué es lo que está tratando de representar. Puede ser un poco más difícil al principio, pero una vez que te acostumbras 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 tomar mucho más marcado para usar el marcado semántico y el CSS, especialmente si confía en las propiedades en cascada de css. Además, si tiene varias formas iguales en muchas páginas de su sitio, el enfoque semántico es mucho más eficiente, tanto para codificar como para mantener.

Answer 4

Es un área gris No todo en el marcado tiene límites claramente definidos, y este es un caso en el que puede usar sus preferencias personales y hacer una llamada de juicio. No encaja del todo con la idea de que los datos se organicen, pero las celdas están relacionadas en varios ejes, y esa es la regla general que uso para decidir si algo encaja en una tabla o no.

Answer 5

La mayoría de las respuestas que he visto aquí parecen apropiadas. Lo único que agregaría, específicamente al apático o al Sr. Matt, es 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>

Es posible que desee volver a diseñar estos, pero esto indica semánticamente lo que está sucediendo, es decir, tiene una lista de "términos" ( <dt> ) y "definiciones" ( <dd> ), con el término como etiqueta y como definición siendo los valores ingresados ​​por el usuario.

Answer 6

Para hacer los formularios 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>

Answer 7

Sí, se aplica para diseños de formularios. Tenga en cuenta que también existen etiquetas como FIELDSET y LABEL que existen específicamente para agregar estructura a un formulario, por lo que no se trata realmente 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>

Answer 8

Si solo necesitas un diseño de tipo de agarre de columna simple, no deberías sentirte culpable usando tablas. No sé cómo alguien puede llamar a ese "mal diseño" solo porque no es CSS. He visto muchos diseños malos 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 avanzo hacia decisiones más importantes y más impactantes.

Answer 9

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

Answer 10

Un formulario no es "presentación", usted solicita datos, generalmente no presenta datos. Uso mucha edición en línea en datos tabulares. Obviamente uso las celdas de datos - td como titulares para los elementos de entrada cuando cambio de presentación a entrada.

Answer 11

Una cosa que no suelo ver discutida en estas preguntas de diseño de formularios, 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 fijo. En el trabajo, recientemente tuvimos que hacer una rápida ''prueba de concepto'' de nuestras aplicaciones web en árabe. Las aplicaciones que usaban tablas para el diseño de formularios estaban básicamente atascadas, mientras que yo era capaz de 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.

Answer 12

Uso CSS principalmente hasta que CSS se convierte en un arrastre. Por ejemplo, es mucho más fácil crear un formulario de columna 3+ (3 conjuntos de etiqueta + campo de formulario) usando una tabla que en css. No pude lograr que el diseño se viera correctamente en todos los principales navegadores usando CSS puro y estuve pasando demasiado tiempo haciendo que funcionara. Entonces dije que lo arruiné y lo hice fácilmente usando una mesa. La mesa no está mal.