2 astuces HTML pour rendre vos formulaires plus intuitifs [MEMO]

Voici deux bonnes pratiques en HTML que vous devriez appliquer lorsque vous créez des formulaires.

Quand je navigue sur Internet, je ne sais pas vous, mais j'ai horreur de passer trop de temps à remplir un formulaire... Il faut que ça aille vite !

Or, trop souvent; je constate que les checkbox ne peuvent pas être cochés en cliquant sur leur libellé ... Il faut alors que je passe quelques micro secondes à viser la case.

Conseil n°1: Utilisez la balise <label> avec vos checkbox et radios

Il faut prendre se réflexe. Lorsque vous ajoutez une checkbox, entourez le texte associé par les balises

Votre formulaire sera plus intuitif et cela ne vous coûte rien.

Exemple:

Label de ma checkbox 1

Label de ma checkbox 2

Label de ma checkbox 3

<p><input id="cb1" type="checkbox" value="1" /> <label for="cb1">Label de ma checkbox 1</label></p>
<p><input id="cb2" type="checkbox" value="2" /> <label for="cb2">Label de ma checkbox 2</label></p>
<p><input id="cb3" type="checkbox" value="3" /> <label for="cb3">Label de ma checkbox 3</label></p>

Conseil n°2: Utilisez la balise optgroup dans vos select

Ce conseil ne s'applique que si vous avez des valeurs qui peuvent être classées par catégories dans votre balise select. Evitez à vos utilisateurs de perdre du temps à chercher la valeur souhaitée dans votre select.

Simplifiez leur la présentation, utilisez des balises optgroup.

Exemple:

PHP Javascript CSS Ruby Photoshop GIMP

<select name="categorie">
	<optgroup label="Developpement"/>
	<option>PHP</option>
	<option>Javascript</option>
	<option>CSS</option>
	<option>Ruby</option>
	
	<optgroup label="Graphisme"/>
	<option>Photoshop</option>
	<option>GIMP</option>
</select>

Conclusion

2 astuces très basiques mais trop souvent oubliées, à ajouter dans vos reflexes !

Il faut toujours penser à optimiser le temps de vos visiteurs.