Champs et étiquettes

<form action="/connexion" method="post">
    <label for="email">Adresse e-mail</label>
    <input type="email" id="email" name="email" required>

    <label for="mdp">Mot de passe</label>
    <input type="password" id="mdp" name="mdp" required>

    <button type="submit">Se connecter</button>
</form>

• action : où envoyer les données ; method="post" : les envoyer dans le corps de la requête, et non dans l'adresse -- indispensable pour un mot de passe, qui finirait sinon dans l'historique du navigateur.
• type : email, password, number, date... Le navigateur adapte le clavier sur téléphone, masque le mot de passe, vérifie le format.
• name : le nom sous lequel la valeur est envoyée. Un champ sans name n'est pas envoyé du tout.
• required : le formulaire ne part pas tant que le champ est vide. Une aide pour l'utilisateur, pas une sécurité : le serveur doit toujours revérifier.

L'étiquette

<label for="email"> est relié au champ dont l'id vaut email. Deux effets : cliquer sur le texte place le curseur dans le champ, et un lecteur d'écran annonce « Adresse e-mail » en arrivant sur le champ. Un champ sans étiquette est annoncé « champ de saisie », sans plus.

Un texte d'exemple dans placeholder ne remplace pas l'étiquette : il disparaît dès qu'on commence à écrire.

Les boutons radio

Des choix exclusifs partagent le même name, et se regroupent dans un <fieldset> dont <legend> donne la question :

<fieldset>
    <legend>Atelier</legend>
    <input type="radio" id="jardinage" name="atelier" value="jardinage">
    <label for="jardinage">Jardinage</label>
    ...
</fieldset>