Labels et validation native (`<label>`, `required`, `placeholder`)

Un label relie un texte à un champ pour l'accessibilité et l'ergonomie.

Association avec for et id

<label for="fname">Prénom :</label>
<input type="text" id="fname" name="user_firstname">

Cliquer sur le label place le focus dans l'input.

Ce comportement améliore fortement l'ergonomie sur mobile et pour les petites cibles.

Variante : input imbriqué dans le label

Alternative : envelopper directement l'input dans le label.

<label>
	Accepter les conditions
	<input type="checkbox" name="terms">
</label>

Attributs utiles

placeholder

<input type="email" name="user_mail" placeholder="exemple@gmail.com">

Affiche une indication dans le champ vide.

required

<input type="email" name="user_mail" required>

Empêche l'envoi du formulaire si le champ est vide.

minlength et maxlength

<input type="password" name="pwd" minlength="5" maxlength="10">

Permet de poser des contraintes simples sans JavaScript.

Ces validations natives sont un premier niveau, mais ne remplacent pas une validation côté serveur.