Formulaire

Les formulaires sont un incontournable du web, ils sont présents sur la majorité des sites et sont constitués de plusieurs balise. Voyons quelques une des balises de base permettant de réaliser un formulaire.

Input text

Génère un champ texte sur une seule ligne. Ce champ est parfait pour les informations textuelles à caractère généralistes.

Le type text est le type par défaut de la balise <input>. Si aucun type n'est spécifié ou que le type utilisé n'est pas reconnu par le navigateur, celui-ci assumera automatiquement qu'il s'agit d'un champ texte.

Plusieurs attributs sont disponibles sur les champs texte. Voyons quelques-uns des plus populaires.

Value

L'attribut value permet de définir la valeur par défaut d'un champ.

Par exemple, si des répondants doivent indiquer leur pays de résidence et que la majorité répondront Canada  🇨🇦, il est possible de prépopuler le formulaire avec cette valeur.

Placeholder

L'attribut placeholder permet d'afficher un exemple de valeur possible à saisir dans le champ. Bien que visible, cette valeur n'est pas réellement présente dans le champ contrairement à l'attribut value. Qui plus est, cette valeur disparaitra dès que l'utilisateur commencera à inscrire une nouvelle valeur.

Par exemple, pour indiquer que le nom du pays est requis et que le nom complet est désiré (Canada) et non l'abréviation (Can), il est possible d'utiliser cet attribut.

Readonly

L'attribut readonly permet d'indiquer à l'aide d'un booléen (true/false) si un champ est en lecture seule (impossible à modifier). Si l'attribut readonly est ajouté sans booléen, le navigateur considèrera que le champ est en lecture seule, soit un équivalent de readonly="true".

Par exemple, un formulaire de modification de profil permettant de mettre à jour ses informations personnelles et de voir son nom d'usager, mais ne permettant pas de modifier ce dernier.

Required

L'attribut required permet d'indiquer à l'aide d'un booléen (true/false) si un champ est requis. Si l'attribut required est ajouté sans booléen, le navigateur considèrera que le champ est requis, soit un équivalent de required="true".

Par exemple, un champ non requis vs un champ requis:

Minlength & Maxlength

Les attributs minlength & maxlength permettent de définir un nombre minimal et maximal de caractères pouvant-être inscrit dans un champ.

Par exemple, un champ de code postal acceptant de 3 à 6 caractères:

Label

Les libellés ou <label> permettent d'indiquer le rôle d'un élément (ex: un champ texte) au sein d'un formulaire. Le libellé peut être associé à un élément de formulaire via l'attribut for ou encore en plaçant l'élément de formulaire à l'intérieur même de la balise <label>.

Par exemple, les deux méthodes suivantes de définition de libellé sont valides:

For

L'attribut for permet d'associer un élément avec son libellé. Pour se faire, sa valeur doit correspondre au id de l'élément qu'il désigne.

Note

Lorsqu’un libellé est cliqué, le focus est automatiquement attribué à l’élément qu’il désigne.

Form

La balise <form> regroupe tous les éléments d'un formulaire.

Attributs de form

1. action permets de spécifier l'url où les informations du formulaire doivent être soumises.

2. method méthode http utilisée par le navigateur afin de soumettre le formulaire. Ses valeurs peuvent-être

   • GET (par défaut) stock les informations du formulaire dans l'URL après le symbole ?.
   • POST envois les informations du formulaire dans la requête soumise à la page. Les informations ne sont donc pas visibles.

Warning

Il est impossible d’avoir un formulaire à l’intérieur d’un autre formulaire.

Input submit

Génère un bouton permettant de soumettre un formulaire.

Value L'attribut value définit le texte à l'intérieur du bouton généré.

Exercices

Exercice Carte de crédit
Pour cet exercice vous devrez compléter un formulaire de carte de crédit déjà entamé.
Carte de crédit

Crédits : Simon Arnold