Diseñando Formularios con CSS (II Parte)

Después de haber visto como diseñar un formulario de identificación, veamos ahora como darle vida a uno de registro, sin tablas, pero con unas pocas líneas de código css, y como siempre, muy fácil de personalizar.

Empecemos viendo como se verá nuestro diseño:

Muy bueno verdad?... Pero claro.

Las Líneas Html: Fieldset, Legend y Label

El código html que vamos a utilizar no necesita de ninguna tabla para mantener su orden, margen y estructura. De manera que vamos a utilizar, como se debe, los tags html especiales para los formularios. Fieldset y legend devienen en importantes. Estos tags se merecen un apartado especial, que no es el momento de tocar. Simplemente decir, que con fieldset podemos organizar el formulario en secciones lógicas y con legend asignamos un título a un área específica del fieldset.

Teniendo claro esto, veamos el código html. Dentro del body colocamos:

Este código es muy simple y no necesita mayor explicación. Veamos el CSS.

Un poco de CSS

Dentro de las etiquetas head, colocamos lo siguiente:

Fíjate que primero formateamos la capa registro, definimos el ancho, margen, borde y color de fondo. Luego el fieldset, legend y label de igual manera. Pero nota que para lograr este diseño, es importante colocar todo dentro de un párrafo y hacer un salto de carro con la etiqueta BR, sin embargo el float: left que aplicamos al label se repetiría, por lo que tenemos que limpiar el float después de cada salto.

Con esto ya tenemos un bonito, llamativo y bien estructurado formulario de registro.