formularios CSS en lugar de tablas 2011

Dejé de usar CSS para el estilo de formulario cuando toco inconvenientes como requerir 3 cuadros de texto adyacentes uno al otro (como un número de teléfono) o una lista desplegable al lado de un cuadro de texto. No pude encontrar una forma confiable de diseñarlo sin buenos TABLAS.formularios CSS en lugar de tablas 2011

Estoy pensando en volver a CSS para el diseño de formularios; No sé:

Si es más útil tener leyendas en la parte superior oa la izquierda del campo.
Cómo estilizar las cosas para que se ubiquen bien incluso con un par de elementos de formulario adyacentes.

Referencias? ¿Sigue siendo un sueño?

Fuente

2011-01-04 Caveatrob

¿Así que está diciendo que no sabe cómo funciona el flotador o el modelo de caja? – rxgx

Hay un par de plantillas CSS diseñado específicamente para el trazado de formas.

espero que esto le ayuda a apuntar en una dirección productiva y temible. Cuídate.

Fuente

2011-01-04 12:06:18

No, es muy posible, y yo (y muchos otros) lo he estado haciendo durante años.

Mire float: (left|right) y display: (inline|inline-block).

Fuente

2011-01-04 02:44:15 alex

¿Utiliza etiquetas arriba de los campos o a la izquierda? ¿Qué haces cuando tienes que colocar cuadros de texto uno al lado del otro (como el código de área, el prefijo, el sufijo de un número de teléfono)? ¿Tienes ejemplos? – Caveatrob

@Caveatrob Compruebe el CSS y HTML de cualquier otro sitio que lo haga. Mire en las carrozas. – alex

@Caveatrob Si tuviera tres cuadros de texto y los quisiera uno al lado del otro, habría dejado cada flotador (probablemente con algo de relleno). Entonces borrarás: ambos; después. Si puede proporcionar algo de HTML, podemos marcarlo con CSS para usted. –

¿Te refieres a esto?

alt text

Básicamente creamos un pseudotable

.mxrow { 
clear: both; 
width: 100%; 
height: 50px; 
} 


.mxcell { 
float: left; 
padding-top: 10px; 
padding-bottom: 10px; 
height: 26px; 
} 

.mxcell_firstcell{ 
width: 25%; 
}

Y el margen de beneficio sería

<div class = "mxrow"> 
    <div class = "mxcell mxcell_firstcell"><input element /></div> 
    <div class = "mxcell mxcell_secondcell"><another form element/></div> 
</div>

La célula individual classnames sirven para aplicar CSS específica (mi margen de beneficio es una cuadrícula)

Fuente

2011-01-04 02:58:44

Sí. Tuve un poco de tiempo haciéndolo cuando inventé mi primer conjunto de CSS flotante/dividido para formularios. Cada ejemplo que parece encontrar en línea tiene una sola etiqueta/control de formulario único por línea. – Caveatrob

Bueno, lo hice porque muchas animaciones de JavaScript funcionan mal con las tablas. Déjame buscar un poco de css –

sin embargo, aquí no hay degradación elegante. –

Otras personas te dan alguna sugerencia válida iones ... si todavía tiene problemas que pueden probar un framework de formularios css como formée ... http://www.formee.org/

Fuente

2011-01-04 07:56:58 Nextneed

formularios CSS en lugar de tablas 2011

Respuesta

Cuestiones relacionadas