Formulaires
Champs de saisie, boutons, labels… (bref, on te parle)
Imagine : ton site est comme un hall d’accueil. Le formulaire, c’est la personne derrière le comptoir : elle demande ton nom, ton email et ton message, puis transmet tout ça au bon endroit.
8.1Le squelette d’un formulaire
Tout commence par <form>. Dedans, tu ajoutes des champs, des labels et un bouton d’envoi. Donne toujours un name à tes champs, sinon… rien ne part.
<form action="/contact" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="toi@exemple.com" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" placeholder="Dis-moi tout..." required></textarea>
<button type="submit">Envoyer</button>
</form>8.2Types de champs utiles
<input type="text">: texte libre (pseudo, ville…)<input type="email">: email (validation native, merci le navigateur)<input type="password">: mot de passe (masqué)<input type="checkbox">/radio: choix simple(s)<select>: menu déroulant<textarea>: texte long
<form>
<fieldset>
<legend>Préférences</legend>
<label for="news">
<input type="checkbox" id="news" name="newsletter" checked> Recevoir la newsletter
</label>
<p>Ton rôle préféré ?</p>
<label><input type="radio" name="role" value="designer" checked> Designer</label>
<label><input type="radio" name="role" value="dev"> Développeur</label>
<label for="pays">Pays</label>
<select id="pays" name="pays">
<option value="">- Choisir -</option>
<option>France</option>
<option>Belgique</option>
<option>Suisse</option>
</select>
</fieldset>
<button type="submit">Valider</button>
</form>Bons réflexes (vraiment utiles)
- Associe chaque champ à un
<label>(clic plus facile, accessibilité +++) - Mets des
placeholderparlants, pas des devinettes - Utilise
requiredet les bonstype(le navigateur t’aide pour la validation) - Ajoute
namesur chaque champ (sinon aucune donnée n’est envoyée)