Los formularios HTML son un elemento esencial de los sitios web, pero pueden resultar difíciles de usar. No solo emplean elementos y atributos HTML muy concretos: también difuminan la frontera entre el contenido estático y la interacción con el usuario. Los formularios rompen a menudo la forma en que la gente espera interactuar con tu sitio o tu aplicación, y eso acaba frustrando a quien los rellena. Estas cinco buenas prácticas te ayudarán, como desarrollador o diseñador, a construir formularios más intuitivos y menos frustrantes.
Poner leyendas a los campos de tus formularios HTML
Cuesta justificar el uso de un fieldset sin darle un nombre. Podemos mejorar el código anterior titulando el fieldset con el elemento legend. La leyenda se coloca sobre el borde del fieldset, que tiene un borde por defecto.
<fieldset>
<legend>Adresse de facturation</legend>
<span>Nom</span><input type="text" name="nom"/>
<span>Prénom</span><input type="text" name="prenom"/>
<span>Adresse</span><input type="text" name="adresse"/>
<span>Complément d'adresse</span><input type="text" name="adresse2"/>
<span>Ville</span><input type="text" name="ville"/>
<span>Département</span><input type="text" name="departement"/>
<span>Pays</span><input type="text" name="pays"/>
</fieldset>⚠️ Usar labels en tus formularios HTML
Aunque no hay nada de malo en usar un span para etiquetar los campos, la etiqueta label encaja mucho mejor con ellos.
<fieldset>
<legend>Adresse de facturation</legend>
<label>Nom</label><input type="text" name="nom"/>
<label>Prénom</label><input type="text" name="prenom"/>
<label>Adresse</label><input type="text" name="adresse"/>
<label>Complément d'adresse</label><input type="text" name="adresse2"/>
<label>Ville</label><input type="text" name="ville"/>
<label>Département</label><input type="text" name="departement"/>
<label>Pays</label><input type="text" name="pays"/>
</fieldset>Dar a los labels el atributo for
El atributo for permite asociar un <label> a un <input>. El identificador del campo con el que quieres enlazarlo tiene que coincidir con el valor de for.
<fieldset>
<legend>Adresse de facturation</legend>
<label for="nom">Nom</label><input id="nom" type="text" name="nom"/>
<label for="prenom">Prénom</label><input id="prenom" type="text" name="prenom"/>
<label for="adresse">Adresse</label><input id="adresse" type="text" name="adresse"/>
<label for="adresse2">Complément d'adresse</label><input id="adresse2" type="text" name="adresse2"/>
<label for="ville">Ville</label><input id="ville" type="text" name="ville"/>
<label for="departement">Département</label><input id="departement" type="text" name="departement"/>
<label for="pays">Pays</label><input id="pays" ype="text" name="pays"/>
</fieldset>Usar optgroup para agrupar las opciones de un select
El optgroup es un elemento poco conocido que permite sangrar y titular las opciones. Conviene recordar que aquí el atributo label vuelve a ser imprescindible.
<select>
<optgroup label="France">
<option>Paris</option>
<option>Lille</option>
<option>Lyon</option>
</optgroup>
<optgroup label="Espagne">
<option>Madrid</option>
<option>Bercelone</option>
<option>Valence</option>
</optgroup>
</select>Conclusión
Con estos trucos deberías estructurar mejor tus formularios HTML y facilitar su maquetación, para que tus usuarios los entiendan a la primera. Si te ha gustado este artículo, te recomiendo leer el que dedico a los errores de HTML que hay que evitar.
Y si todavía te faltan las bases del lenguaje, la sección dedicada a los formularios de Aprender HTML repasa la pareja <label for> / id y el atributo name, sin el cual un campo no envía nada.
