CSS: Dar estilo a nuestros formularios sin tablas ni párrafos

Hace unos días os explicaba como crear un formulario estructurado, accesible y válido según los estándares w3c, si lo leísteis os habréis dado cuenta de que no está dentro de una tabla ni contiene etiquetas de párrafos.

Al principio puede parecer muy complicado darle un poco de forma sin ninguna etiqueta de las de siempre, pero tenéis que saber que si hay una etiqueta (da igual la que sea) hay un estilo aplicable con css, y en nuestro formulario accesible no tenemos <p> pero sí <label>.

Si no aplicamos ningún estilo, nuestro formulario aparecería de la siguiente forma:

form1
Flickr: form1

Puedes ver el ejemplo en funcionamiento.

¿Un poco feo, verdad? Pues arreglarlo un poquito es bien sencillo, hay dos estilos básicos para aplicarle:

label { display:block; margin:2px; }

Con esto conseguimos que cada input aparezca debajo de su etiqueta, uséase cada etiqueta ocupando una linea completa. Ejemplo:

form2
Flickr: form2
div { clear:both; margin:2px; }
div label { width:30%; float:left; }
div input { width:65%; float:right; }

Para este ejemplo hemos envuelto los label e inputs en un div, y lo que hacemos es que se muestren de manera similar a si estuvieran contenidos en una tabla, pero sin necesidad de ésta. Ejemplo:

form3
Flickr: form3

Puedes ver los dos ejemplos en funcionamiento.

Con estos dos métodos podemos tener nuestros formularios mejor estructurados visualmente. Pero si esta explicación se os queda corta y lo que queréis es que vuestro formulario sea el más sexy del barrio, nada mejor que Sexy Forms.

  • 2 junio 2009
  • Maquetación
  • , ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *