Maquetar formularios alineados

Name: Maquetar formularios alineados
Brand: Jose Aguilar
SKU: joseaguilarblog-3829
Availability: InStock
Rating: 5 (7 reviews)

En este artículo vamos a ver como programar con HTML y CSS un formulario cuadrando las etiquetas <label> con las etiquetas <input> sin emplear para ello tablas.

El aspecto resultante de lo que se quiere ilustrar en este artículo es el siguiente:

Para obtener este resultado deberemos crear las siguientes classes en una hoja de estilos CSS.

label {
    background: none repeat scroll 0 0 #F3F3F3;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 24px;
    margin: 0 10px 0 0;
    padding: 3px 7px;
    width: 150px;
}

.input {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    height: 16px;
    padding: 7px;
    width: 435px;
}

.select {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    height: 32px;
    padding: 4px;
    width: 451px;
}

Y luego en nuestro <body> tendremos el formulario:

<form action="index.php" method="post">
    <p><label>Nombre</label>
    <input type="text" value="Jose Manuel" class="input" name="name"></p>
    <p><label>Apellidos</label>
    <input type="text" value="Aguilar Nuñez" class="input" name="lastname"></p>
    <p><label>Dirección</label>
    <input type="text" value="Avenida Roma nº450" class="input" name="address"></p>
    <p><label>Código Postal</label>
    <input type="text" value="08145" class="input" name="postalcode"></p>
    <p><label>Ciudad</label>
    <input type="text" value="Barcelona" class="input" name="city"></p>
    <p><label>País</label>
    <select class="select" name="country">
        <option selected="" value="1">España</option>
        <option value="2">Francia</option>
        <option value="3">Portugal</option>
    </select></p>
</form>

Ver ejemplo en funcionamiento