Introduction aux formulaires HTML
Les formulaires sont omniprésents sur le Web pour recueillir des informations utilisateur. Leur traitement nécessite généralement un langage serveur comme PHP, Perl ou ASP. C'est l'élément clé pour interagir avec vos visiteurs, que ce soit pour une connexion, un commentaire ou une commande.
Une zone de formulaire se définit avec les balises <form action="" method="post"></form>. La méthode peut être post (envoyer des données de manière sécurisée) ou get (recevoir des données via l'URL). L'attribut action indique quant à lui la page qui traitera les données reçues.
Comment créer des cases à cocher en HTML
Les cases à cocher permettent à l'utilisateur de sélectionner une ou plusieurs options parmi une liste.
Pour créer une case cochée par défaut :
<input type="checkbox" name="monNom" value="" checked>
Pour une case non cochée :
<input type="checkbox" name="monNom" value="">
Les champs masqués (hidden)
Les champs masqués permettent d'envoyer des données que l'utilisateur ne doit pas voir ou modifier, comme un identifiant technique.
<input type="hidden" name="monNom" value="">
Comment créer un champ de mot de passe
Ce champ masque les caractères saisis par des points ou des astérisques, indispensable pour la sécurité.
<input type="password" name="monNom" value="" size="">
Comment créer un menu déroulant en HTML
Le menu déroulant (ou balise <select>) est idéal lorsque l'espace est limité ou que les choix sont nombreux.
<select name="monNom">
<option value="option1" selected>Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
L'attribut selected définit l'option sélectionnée par défaut.
Comment utiliser les boutons radio
Contrairement aux cases à cocher, les boutons radio ne permettent qu'un seul choix dans un groupe (l'attribut name doit être identique pour tous les boutons du groupe).
Pour un bouton sélectionné par défaut :
<input type="radio" name="monNom" value="" checked>
Pour un bouton non sélectionné :
<input type="radio" name="monNom" value="">
Le bouton de réinitialisation du formulaire
Ce bouton permet à l'utilisateur d'effacer toutes les données saisies et de revenir aux valeurs par défaut.
<input type="reset" value="Réinitialiser">
Le bouton d'envoi du formulaire
C'est le déclencheur qui envoie les données au serveur pour traitement.
<input type="submit" name="monNom" value="Envoyer">
Comment créer une zone de texte multiligne
La balise <textarea> est parfaite pour les commentaires ou messages longs. Les attributs rows et cols définissent respectivement le nombre de lignes et la largeur en caractères.
<textarea name="monNom" rows="5" cols="20" wrap="virtual"></textarea>
Le champ de texte simple
Ce champ standard est utilisé pour des saisies courtes comme un nom, un prénom ou une ville.
<input type="text" name="monNom" value="" size="20">
