Agrupando visualmente conceptos en formularios

He investigado sobre el tema de agrupar visualmente los elementos de los formularios para diferenciarlos y facilitar su uso. El experimento consiste en separar cada concepto utilizando la menor cantidad de código posible.

He intentado evitar el uso de tags html (<p> <div>) como contenedores de elementos.

Inputs y textarea

Para separar visualmente los <input> realmente no necesitamos un contenedor. Entendemos que la etiqueta <label> y el campo <input> forman un conjunto (visualmente hablando) pero no necesitamos agruparlos para separarlos uno de otro.

El marcado Html sería:

<label for="nombre">Nombre</label>
<input type="text" id="nombre" placeholder="Escribe tu nombre completo">

<label for="email">Correo electrónico</label>
<input type="email" id="email" placeholder="Tu dirección de Email">

<label>Deja tu comentario</label>
<textarea></textarea>

Para separar visualmente estos dos elementos primero debemos asegurarnos de que los <input> se comporten como un elemento de bloque y después con margin separándolo más por debajo que por encima, así conseguimos el efecto visual deseado. Este comportamiento también lo podemos aplicar a <select> y <button>.

Si elegimos <input> y no <label> como el elemento del que dependen las distancias (margin) estamos también asegurandonos de que si un <input> no lleva una etiqueta <label> se separa del resto de elementos adecuadamente, un ejemplo podría ser el <input type="submit">

Css

input, textarea{
    display: block;
    margin: 5px 0 30px 0;
}

De esta manera la distancia entre el <label> superior es menor al <label> inferior y agrupando visualmente cada concepto y separandolo uno de otro.

Checkbox y radiobuttoms

Group radio buttons together with the fieldset and legend elements.

Estos elementos constan de varios <input> y <label> así que es necesario agruparlos con un contenedor para poder separarlos visualmete del resto. Para esto utilizarenis <fieldset> que además de funcionar como elemento de bloque nos permita añadirle una etiqueta <legend> que engloba el conjunto de opciones con un titular. Para separar las opciones de cada botón he utilizado un salto de línea <br />.

<fieldset>
    <legend>¿StarWars o StarTrek?</legend>
    <input type="checkbox" id="starwars"> <label for="starwars">StarWars</label>
    <br />
    <input type="checkbox" id="startrek"> <label for="startrek">StarTrek</label>
</fieldset>

De esta manera podemos añadir al <input> y <textarea> el tag de <fieldset> en la Css para utilizar las mismas distancias de separación.

input, textarea, fieldset{
    display: block;
    margin: 5px 0 30px 0;
}

Como hemos modificado el comportamiento del elemento <input> (ahora block) con anterioridad, deberemos reescribir la regla para que los <input> incluidos en el <fieldset> se mantengan en la misma linea que los checkbox y los radio.

input[type="checkbox"], input[type="radio"]{
    display: inline-block;
}

Nota: Si queremos cambiar el color de la línea que genera <fieldset> debemos escribir todos atributos.

fieldset{
    border: 1px solid #eee;
}  

Mejorando la experiencia

Es conveniente añadir role=“search” en el elemento form si se trata de un formulario de búsqueda.

También podemos separar visualmente un poco más los elementos destacando las etiquetas de cada conjunto de elementos, dandoles negrita, por ejemplo:

label, legend{
        font-weight: bold;
} 

Sin olvidarnos de resetear el estilo para los label que están en los fieldset acompañando a los checkbox y a los radiobuttoms.

fieldset label{
        font-weight: normal;
}

Tened en cuenta que todos los elementos necesitan un label y que los placeholders no son "labels" válidos.

All form elements need a label! And I mean, a programmatic label. The label element is best. Placeholders are not acceptable labels.

Esta ha sido mi aproximación a este tema. Os dejo un enlace al código completo con algún estilo más, para que tengais una visión más completa del tema.

Demo en codepen