Cours 5.4. Les différents champs des formulaires HTML

Case à cocher (checkbox)

Le case à cocher permet à l'utilisateur de cocher une case (réponse oui/non) :

<input type="checkbox" id="spams" name="newsletter" checked>
<label for="spams">Souhaitez-vous recevoir plein de spams ?</label>

Liste déroulante (dropdown)

Les listes déroulantes permettent à l'utilisateur de sélectionner un choix unique parmi une liste :

<select name="day" size="1">
  <option value="1">Lundi</option>
  <option value="2">Mardi</option>
  <option value="3">Mercredi</option>
  <option value="4">Jeudi</option>
  <option value="5" selected="selected">Vendredi</option>
</select>

Bouton radio (radio button)

Les boutons radio permettent à l'utilisateur de sélectionner un choix unique parmi plusieurs :

<input type="radio" name="prefix" value="M." checked> Monsieur<br>
<input type="radio" name="prefix" value="Mme"> Madame<br>
<input type="radio" name="prefix" value="Melle"> Mademoiselle

Zone de texte (text area)

Le champ <input type="text"> ne permet la saisie que d'une ligne. La balise <textarea> permet la saisie d'un texte sur plusieurs lignes :

<label for="message">Votre message :</label><br>
<textarea id="message" name="message" rows="10" cols="33">
Texte par défaut.
</textarea>

Exercice

Écrire le code HTML permettant à l'utilisateur de saisir son email et un commentaire conformément à l'exemple suivant :

Formulaire de saisie d'un commentaire

Le script de traitement devra vérifier que l'utilisateur a saisi les champs email et commentaire avant d'afficher les données reçues dans un tableau comme sur l'exemple suivant :

Traitement du formulaire de commentaire

Quiz

Cochez les balises associées à des champs de formulaire HTML ?

Vérifier Bravo ! La balise <radiobutton> n'existe pas. Essaie encore ...

Comment créer un champ de saisie de mot de passe ?

Vérifier Bravo ! C'est l'attribut type="password" qui va permettre de masquer le mot de passe. Essaie encore ...

Quelle syntaxe permet de créer une case à cocher en HTML ?

Vérifier Bravo ! Bravo ! C'est l'attribut type="checkbox" qui va créer la case à cocher. Essaie encore ...

Comment associer un texte visible par l'utilisateur à une case à cocher ?

Vérifier Bravo ! Le texte associé à une case à cocher doit être dans un label avec l'attribut for="id_checkbox". Essaie encore ...

Voir aussi


Dernière mise à jour : 17/09/2022