FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 4.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

Voir aussi


Dernière mise à jour : 20/11/2019