Os formulários HTML são um elemento essencial dos sites, mas raramente são agradáveis de trabalhar. Não só usam elementos e atributos muito específicos, como esbatem a fronteira entre o conteúdo estático e a interação com o utilizador. Os formulários quebram muitas vezes a forma como as pessoas esperam interagir com o teu site ou com a tua aplicação, e isso acaba por frustrar quem os preenche. Estas quatro boas práticas vão ajudar-te, enquanto programador ou designer, a construir formulários mais intuitivos e menos irritantes.
Dar uma legenda aos campos dos teus formulários HTML
Um fieldset sem nome é difícil de justificar. Podemos melhorar o código acima dando um título ao fieldset com o elemento legend. A legenda fica sobre o contorno do fieldset, que tem uma borda por omissão.
<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>⚠️ Preferir labels nos teus formulários HTML
Não há nada de errado em marcar os campos com um span, mas a etiqueta label é naturalmente mais adequada.
<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 aos labels o atributo for
O atributo for permite-te associar um <label> a um <input>. O identificador do campo que queres ligar tem de ser igual ao 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 as opções de um select
O optgroup é um elemento pouco conhecido que permite indentar e dar um título às opções. Repara que também aqui o atributo label é essencial.
<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>Conclusão
Com estas dicas, os teus formulários HTML ficam melhor estruturados e mais fáceis de formatar, o que ajuda os utilizadores a percebê-los. Se gostaste deste artigo, aconselho-te a ler o meu texto sobre os erros de HTML a evitar.
E se ainda te faltam as bases da linguagem, a secção dedicada aos formulários em Aprender HTML revisita o par <label for> / id e o atributo name, sem o qual um campo não envia nada.
