Formularios: alineación y formateo de labels

Los elementos <input> y <label> de los formularios son elementos en línea, por lo que el aspecto que muestran los formularios por defecto, es similar al de la siguiente imagen:

El código HTML para el ejemplo anterior es el siguiente:

<form>
<fieldset>
<legend>Alta en el servicio</legend>

<label for="nombre">Nombre</label>
<input type="text" id="nombre" />

<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="50" />

<label for="dni">DNI</label>
<input type="text" id="dni" size="10" maxlength="9" />

<label for="contrasena">Contraseña</label>
<input type="password" id="contrasena" />

<input class="btn" type="submit" value="Darme de alta" />
</fieldset>
</form>

Aprovechando los elementos <label>, se pueden aplicar unos estilos CSS sencillos que permitan mostrar el formulario con el aspecto de la siguiente imagen:

El código aplicado ha sido el siguiente:

label {
display: block;
margin: .5em 0 0 0;
}
.btn {
display: block;
margin: 1em 0;
}

Los elementos <label> se mostrarán como elementos de bloque para que añadan una separación para cada campo del formulario.

Además, se añade un margen superior para no mostrar juntas todas las filas del formulario. El botón del formulario también se muestra como un elemento de bloque y se le añade un margen para obtener el aspecto final.


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO