Tabla de formularios complicados frente a div

Question

Busqué en línea ejemplos de implementación del formulario utilizando DIV y todo lo que veo son formularios de una columna bastante simples. Tengo algunas formas bastante complicadas, aquí hay una foto de uno:

http://img835.imageshack.us/img835/8292/formn.jpg

Es fácil de hacer que funcione con mesa (que hago), el único problema que tengo es que a veces Necesito no muestra algunas de las opciones y mueve los valores hacia arriba una fila para evitar huecos.

Empecé a hacer algunas formas usando divs, pero se deshacen cuando cambio el tamaño de la ventana del navegador y no es fácil alinear las cosas.

Este tema es útil: Is it bad design to use table tags when displaying forms in html? pero no resuelve algunas de las inquietudes que tengo.

¿Qué propones como solución? Puedo eliminar/insertar valores dinámicamente en la tabla o intentar hacer los DIV.

Answer 1

Iría por la ruta div. Siempre que tenga cuidado con el ancho cuando aplica flotadores, en realidad es bastante sencillo lograr que los diseños funcionen correctamente en diferentes resoluciones de pantalla.

Aquí hay algunas reglas:

1. Establecer una anchura máxima en su forma o elemento de envoltorio de su forma. Si desea hacer flotar los elementos en una fila, asegúrese de que su ancho agregado no exceda este ancho.
2. Si está agregando relleno horizontal/márgenes a los elementos flotados, recuerde que estos se suman al ancho total del elemento.
3. Evite mezclar anchos de porcentaje con el relleno de píxeles y los márgenes. Aplique el ancho de porcentaje a un elemento principal y el relleno/márgenes de píxeles a un elemento secundario.
4. Usa elementos de limpieza entre tus filas de elementos para mantener todo en línea.

En cuanto al margen de beneficio, puede utilizar los elementos de formulario, junto con CSS para crear una estructura semántica:

<fieldset> 
    <legend>Fieldset Title</legend> 

    <label for="input1">Input 1:</label> 
    <span><input type="text" id="input1" name="input1"/></span> 
    <label for="input2">Input 2:</label> 
    <span><input type="text" id="input2" name="input2"/></span> 

    <br/> 

    <label for="input3">Input 3:</label> 
    <span><input type="text" id="input3" name="input3"/></span> 
    <label for="input4">Input 4:</label> 
    <span><input type="text" id="input4" name="input4"/></span> 
</fieldset> 

Y el CSS:

fieldset { 
    padding: 20px 0; 
    width: 600px; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    background: black; 
    color: white; 
} 

label, span{ 
    float: left; 
    width: 150px; 
} 

input { 
    width: 120px; 
} 

br { 
    clear: both; 
} 

Puede see the result here.

Answer 2

Si se trata de una tabla de ancho fijo, es trivial diseñar con divs y flotadores. Simplemente ajuste cada ancho exactamente a lo que desea.

Para una disposición de tabla líquida y el diseño de líquido es en general muy recomendable, es mucho más difícil organizar una forma sin visualización de tabla, ya que float y position no permiten cálculos como "esta celda es la mitad del ancho restante del elemento principal, después de que se hayan asignado las etiquetas de ancho fijo ".

Por lo tanto, en casos como este, que sin duda incluye el tipo de formulario de dos columnas publicado, los valores de table-* CSS display son su única posibilidad. Si solo apunta a IE8 y a otros navegadores modernos, puede usar divs y establecer display: table-row y otros en la hoja de estilo.Sin embargo, para compatibilidad con IE6-7 y otros navegadores antiguos/móviles/de nicho, tendrá que usar elementos reales <table>/<tr>/<td>, ya que solo los navegadores modernos admiten tabla-CSS independientemente de los elementos de tabla.

No hay de qué avergonzarse. Un formulario es algo así como semipábulo y no existe una desventaja de accesibilidad práctica porque el contenido de la página sigue estando ordenado de forma adecuada.

Nota: para los formularios de diseño líquido, también tiene el problema de dimensionar los campos de entrada para que coincidan con el elemento principal. input { width: 100%; } casi lo hace, pero no del todo, porque el width no incluye el borde o relleno que las entradas obtienen de manera predeterminada. Puede usar CSS3 box-sizing y las versiones específicas del navegador para evitar eso para los navegadores modernos, pero si quiere que se alinee exactamente con el píxel en IE6-7 también debería usar relleno en los elementos padres iguales a el borde/relleno en el campo de entrada del niño.

Answer 3

• General information es algún tipo de lista, lista de claves> valor para ser exactos - <dl /> sería probablemente la mejor estructura para que
• Issues values es una tabla,
• Ratings es una tabla,
• Tanto Redemption y Indicators son listas - listas desordenadas <ul />