Aller au contenu

HTML Formulaires

Les formulaires permettent d’interagir avec l’utilisateur, afin de récupérer ls infos saisies et ainsi réaliser un affichage conditionnel (ex: Bonjour Nom Prénom). Attention, les formulaires sont traités coté serveur.

Création d’un formulaire#

Un formulaire se déclare avec la balise <form>, comme ceci:

<form action="page.php" method="get">
</form>

Lors de l’ouverture de la balise, deux attributs sont obligatoires:

  • action: c’est le script serveur qui contient le traitement du formulaire. L’envoi vers la page s’effectue quand l’utilisateur clique sur le bouton d’envoi.
  • method: c’est le type de méthode HTTP utilisée pour l’envoi:
    • GET : c’est l’action par défaut, les données sont envoyées dans la barre d’adresse du navigateur (adresse suivie d’un point d’interrogation, suivi de variables).
    • POST : les données sont envoyées cachées (en métadonnées), non visible dans la barre d’adresse.

Ajouter des champs#

Pour tous les champs, plusieurs attributs obligatoires :

  • type: c’est le type de champ. (obligatoire sur les input uniquement)
  • name: c’est le nom de variable créée que l’on récupère lors du traitement du formulaire

Champ de type texte#

C’est la balise <input type="text">.

<input type="text" name="prenom">

Le résultat est le suivant:

Champ de type mot de passe#

C’est la balise <input type="password">.

<input type="password" name="password">

Le résultat est le suivant:

Bouton radios#

C’est la balise <input type="radio">.

<label>Oui<input type="radio" name="ouinon" value="1"></label>
<label>Non<input type="radio" name="ouinon" value="0"></label>

Le résultat est le suivant:

L’utilisation de la balise <label> qui entoure le <input> permet de cliquer sur le texte "Oui" ou "Non", afin de faire son choix. C’est bien pour l’accessibilité. (Voir plus bas)

Case à cocher#

C’est la balise <input type="checkbox">.

<label>Voyages<input type="checkbox" name="loisirs[]"></label>
<label>Cinéma<input type="checkbox" name="loisirs[]"></label>
<label>Sport<input type="checkbox" name="loisirs[]"></label>

Le résultat est le suivant:

L’utilisation de la balise <label> qui entoure le <input> permet de cliquer sur les textes afin de faire son choix. C’est bien pour l’accessibilité. (Voir plus bas)

Un menu de sélection#

C’est la balise <select>, à laquelle on lui ajoute des balises option

<select name="age">
  <option value="20">0-20 ans</option>
  <option value="40" selected>21-40 ans</option>
  <option value="60">41-60 ans</option>
  <option value="80">61-80 ans</option>
</select>
  • l’attribut selected permet de choisir quelle option est choisie par défaut
  • l’attribut value renferme la valeur renvoyée par le formulaire si l’option est sélectionnée. Par défaut, cette valeur est la chaîne de caractères constituant l’option ; dans cet exemple, si on ne spécifie pas value, la valeur retournée sera par exemple "0-20 ans"

Le résultat est le suivant:

Champ de type text multiligne#

C’est la balise <textarea>.

<textarea name="infos"></textarea>

Le résultat est le suivant:

Bouton de validation#

C’est la balise <input type="submit"> ou <button>.

<input type="submit" name="envoi" value="OK">

<button>OK</button>
  • cela provoque la validation de tous les champs du formulaire dans lequel il est inclus
  • attention, avec un <button>, pas d'attribut type="button" sinon le formulaire ne se valide plus

Le résultat est le suivant:

D’autres champs#

  • <input type="email"> pour les emails
  • <input type="tel"> pour les numéros de téléphone
  • <input type="search"> pour un champ de recherche
  • <input type="range"> pour un slider
  • <input type="date"> pour un calendrier
  • etc.

Des attributs#

  • placeholder ajoute un texte dans un champ qui sera enlevé lorsque l’utilisateur clique dans le champ.
  • autofocus donne le focus à un champ au chargement de la page.
  • inputmode pour forcer un clavier virtuel spécifique (nombre, email, etc.)

Accessibilité#

Mettre des label#

La balise <label> permet de spécifier ce que l’on attends dans le champ. Elle s’utilise sur tous types de champs, et cela de deux façons :

  • elle entoure le champ (ex: <label>Oui<input type="radio" /></label>)
  • elle fait une référence au champ, avec l’attribut for qui cible l’id du champ (ex: <label for="chRadio">Oui</label><input type="radio" id="chRadio" />

C’est une balise très importante pour l’accessibilité.

Regroupement de champ#

La balise <fieldset> regroupe sémantiquement des champs d’un formulaire. Par exemple, plusieurs champs concernant l’identité d’une personne.

<fieldset>
  <legend>Identité</legend>
  <p><label>Homme<input type="radio"></label><label>Femme<input type="radio"></label></p>
  <p><label>Nom: <input type="text"></label></p>
  <p><label>Prénom: <input type="text"></label></p>
</fieldset>

Exercice 4 - Formulaire#

Créez un formulaire avec les caractéristiques suivantes:

  • le sous-titre "Formulaire"
  • le sous-sous-titre "Informations personnelles"

  • dans le même regroupement de champs :

    • un champ texte pour remplir le nom (nom de variable renseignée : "nom")
    • un champ texte pour le prénom (nom de variable renseignée : "prenom")
    • un menu déroulant permettant de choisir la tranche d’âge (nom de variable renseignée : "age")

  • le sous-sous-titre "Compte à créer"

  • dans le même regroupement de champs :

    • un champ texte pour remplir le pseudo (nom de variable renseignée : "login")
    • un champ password pour remplir le mot de passe (nom de variable renseignée : "pass")
    • deux boutons radio permettant de s’abonner ou non à la newsletter (nom de variable renseignée : "news")

  • un champ submit de validation du fomulaire

  • pensez à la sémantique !

  • validez la syntaxe avec le validateur du W3C