Diseño del formulario usando CSS

Soy consciente de que ya hay un montón de preguntas sobre el diseño del formulario que usa CSS versus Tablas. En general, creo que CSS es el camino a seguir, pero todas las soluciones CSS que he visto tienen el inconveniente de "codificar" el ancho de las etiquetas y/o campos de entrada.Diseño del formulario usando CSS

El resultado es que se deben agregar una o dos reglas personalizadas para cada formulario, suponiendo que el ancho máximo de las etiquetas sea diferente en cada caso.

¿Hay alguna forma de que pueda dar formato a formularios, de manera que alinee automáticamente las etiquetas y las entradas independientemente de cuánto tiempo estén las etiquetas?

Fuente

2010-02-01 Dónal

+1: Esta siempre me molesta también. Hasta ahora he tenido que codificar el tamaño cada vez. –

Si haces un diseño realmente tabular no hay nada de malo usando '

'. – kennytm

@KennyTM: un diseño tabular o no. Las tablas se deben usar para datos tablulares, no para el diseño. El autor de la pregunta incluso reconoce esto. – Finglas

Respuesta

-1

No hay nada de malo en tener reglas para esa página específica incrustadas en el encabezado de página, en lugar de tener diferentes archivos para todo.

Si sus formas son tan diferentes que se dice que son, entonces no hay otra manera de hacerlo que hacer reglas personalizadas para cada ...

Independientemente de si usted quiere poner todos los estilos de forma en una el archivo enorme, o simplemente incluir en el encabezado de la página los que sean relevantes, depende de la cantidad de formularios a los que tendrán acceso los usuarios en una visita promedio. Algunas formas por visita; ponlos en el encabezado. Muchas formas por visita promedio; ponerlos todos en un archivo separado para que el usuario pueda guardarlos en caché.

Fuente

2010-02-01 04:31:39

un vistazo a la forma de la mano izquierda en la siguiente dirección http://www.blueprintcss.org/tests/parts/forms.html

Si se coloca la etiqueta en la línea 1 y el cuadro de entrada en otra línea, entonces no tiene que preocuparse acerca de la alineación de las etiquetas . Estilo un poco más que tendrá un web2.0 limpio y agradable como forma

enter image description here

Saludos

Fuente

2010-02-01 05:15:28 Phradion

+1 para esto. Si va a tener una etiqueta muy larga en un campo, una breve en otro, y luego hacer que sea de 2 columnas será feo, incluso si usa la tabla. Hazlo de 2 líneas, etiqueta en la línea 1, forma el campo en la línea 2. Ya no tendrás que preocuparte por la longitud de la etiqueta. –

Ninguno de esos diseños es comparable. – Greg

bien el tema de la colocación de una etiqueta sobre o adyacente a la entrada es una discusión separada (I recomendamos leer el libro de Luke Wroblewski sobre el tema: http://www.lukew.com/resources/articles/web_forms.html)

Diseñar formularios web es bastante trivial. En primer lugar, debe asegurarse de marcar sus formularios de forma semánticamente adecuada. Esta es una de las principales ventajas que se le permiten ahora que usa CSS para el diseño en lugar de tablas. Para obtener más información al respecto, consulte el excelente artículo de la lista aparte sobre el tema: http://www.alistapart.com/articles/prettyaccessibleforms/

Ahora, en el artículo antes mencionado, el autor utiliza una propiedad de visualización llamada inline-block. Esta es una forma bastante simple de lograr el afecto. Simplemente aplique:

label { 
    display: inline-block; 
    width: 120px; /* Specify the width that works for your design */ 
}

Y sus etiquetas tendrán una longitud fija con la entrada adyacente a ellas. Sin embargo, si no se especifica el ancho y sólo tiene que utilizar:

label, input { 
    display: inline-block; 
}

A continuación, sus etiquetas y entradas a los dos para alinear inline 'automágicamente' como usted dice. El problema aquí no es un problema técnico sino más bien un problema de diseño. Si eres de los insumos para no alinearte verticalmente, será más difícil para un usuario completar tu formulario. Esta es otra consideración que debe tener en cuenta ya que es más fácil colocar la etiqueta y la entrada de esta manera que acomodar anchos fijos.

Otro problema es que Inline-Block no funciona bien en ciertos navegadores. Inline-block no es confiable en versiones anteriores de Firefox o IE.Entonces tiendo a usar un método alternativo. Digamos que marca sus formularios de una manera semánticamente apropiada usando una lista. Bueno, en ese caso podría tener algo como:

<form> 
    <fieldset> 
    <legend>Health information:</legend> 
    <ul> 
     <li><label>Height</label> <input type="text" size="3" /></li> 
     <li><label>Weight</label> <input type="text" size="3" /></li> 
    </ul> 
    </fieldset> 
</form>

En este caso se puede utilizar un ancho fijo y posicionamiento absoluto para alinear nuestros elementos adyacentes:

form li { 
    display: block; 
    padding: 2px; 
    position: relative; 
} 

/* The top and left position of 2px simulate 
    padding since we are using absolute positioning. */ 
form label { 
    display: block; 
    left: 2px; 
    position: absolute; 
    top: 2px; 
    width: 120px; 
} 

form input { 
    display: block; 
    margin-left: 125px; 
}

La etiqueta se coloca en relación con el lista el elemento y la entrada se empuja hacia un lado con un margen izquierdo. Sin embargo, hay un problema con este método. Este método solo funcionará con un ancho codificado. Más importante aún, una etiqueta multilínea no se borrará correctamente. Entonces en esta situación podemos tomar un enfoque similar pero usar flotadores y desbordamiento. Así que podríamos utilizar este CSS alternativo en la misma marcado HTML he mostrado anteriormente:

form li { 
    display: block; 
    overflow: hidden; /* This clears the floating element. */ 
    padding: 2px; 
} 

form label { 
    display: block; 
    float: left; 
    padding-right: 5px; 
} 

form input { 
    display: block; 
}

Ahora, con este método, la etiqueta se hace flotar a la izquierda de la entrada. Si no especifica un ancho, la etiqueta será tan amplia como los contenidos que residan en ella (hasta el punto del ancho de su nodo padre en el documento HTML). Al configurar el desbordamiento como oculto en el objeto principal, no es necesario borrar el elemento. Esta técnica funcionará con un ancho codificado o el predeterminado heredado que es ancho: automático.

Por último, pero no menos importante, si desea utilizar el enfoque de formulario más eficiente (etiquetas en la parte superior de las entradas), que ha demostrado ser el estilo de formulario que los usuarios pueden completar más rápido, el único CSS que necesita en orden de lograr esto es:

label, input { 
    display: block; 
}

otra nota - con el marcado de su HTML, como tal, puede que se pregunte acerca de todos esos elementos de la lista que crean puntos de bala, etc usted debe optar por incluir un restablecimiento CSS en el documento de garantizar la coherencia entre los navegadores. Recomiendo de Eric Meyer:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Fuente

2010-02-01 06:10:21

La pregunta específicamente solicita soluciones donde las etiquetas son de longitud arbitraria. Esto no aborda esa preocupación de ninguna manera. –

Ah, ya veo. Haré algunas ediciones para corregir esto. –

Los métodos publicados, aunque uno, hacen lo que la pregunta pregunta si omite la regla para el ancho. Ahora lo he explicado en la solución y también he proporcionado los tres métodos populares para lograr este estilo de diseño con CSS y HTML. Además, las consideraciones sobre los puntos de respuesta que el diseñador debe tomar al diseñar los formularios de esa manera. Además, hace referencia a los métodos adecuados para marcar formularios web en HTML semánticamente apropiado, ya que la pregunta mencionada indica que están en transición desde los diseños basados en tablas. –

Opinión personal: utilizar una tabla.

Cada vez que escriba algo así como

label { 
    width: 150px; /* or whatever width */ 
}

entonces son contenido y la presentación mezcla debido a que el valor de la etiqueta sólo se puede calcular si se sabe lo que va a contener, lo que va en contra de los principios de los puristas de CSS semántica.

Fuente

2010-02-01 13:28:51

Eso es completamente incorrecto. Cuando usa una tabla, está mezclando contenido con presentación. La razón por la que tenemos CSS es separar esto. Por lo tanto, el diseño se controla especificando el ancho en el archivo CSS. Si usas una mesa El diseño está controlado por el elemento de la tabla ahora integrado en su contenido. –

No dije que no sea así. Dije que * incluso * con una etiqueta de etiqueta con estilo, estás mezclando contenido con presentación. Las definiciones de CSS no deberían depender de lo que contenga un campo, pero lo hacen en este caso. De modo que también podría usar una tabla que funcione de manera confiable en todos los navegadores, que haga lo que OP quiere y solo en unas pocas líneas de código. Las tablas podrían abandonarse si CSS ofreciera alternativas para * todas * necesidades que funcionen en todos los navegadores sin hackers tontos. –

Puede manejar esto flotando las etiquetas y colocándolas en un elemento de bloque flotante, y de manera similar para los campos de entrada. Esto creará un diseño de dos columnas que cambia el tamaño automáticamente en función de los contenidos. Aquí está el código HTML:

<form> 
    <div id='labels'> 
     <div>Name: </div> 
     <div>Street:</div> 
     <div>This is a longer than usual label:</div> 
     <div>City:</div> 
    </div> 

    <div id='inputs'> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
    </div> 

</form>

Y aquí están las reglas CSS:

#labels { 
    float: left; 
} 

#labels div { 
    clear: left; 
    float: left; 
} 

#inputs { 
    float: left; 
} 

#inputs div { 
    clear: left; 
    float: left; 
} 

#labels div, #inputs div { 
    height: 30px; 
}

EDIT: Si desea crear una conexión semántica entre las etiquetas y los insumos, puede etiquetar formalmente cada etiqueta como una etiqueta HTML y luego use los atributos para y id para vincularlos.Por ejemplo, he aquí una definición de etiqueta:

<div><label for='name'>Name: </div>

y aquí está el campo de entrada correspondiente:

<div><input id='name' type="text"></div>

Fuente

2010-02-01 19:42:41 jdigital

+1: un poco detallado, pero funciona como un encanto! –

Lo siento, pero esto no mantiene ninguna conexión entre las etiquetas y sus valores. Están en divs completamente separados y su único vínculo es visual si los colocas uno al lado del otro. No existe una conexión "semántica" y el significado de su contenido depende estrictamente de su presentación. Alinearlos es trivial, el punto es alinearlos de una manera significativa. –

Esto se soluciona fácilmente, y he editado la respuesta en consecuencia. – jdigital

Cuestiones relacionadas