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.

Le style du placeholder est modifiable via le pseudo-élément ::placeholder. Dans l'exemple précédent, afin de différencier le placeholder du texte normal, la couleur bleue lui est attribuée.

Tant que le placeholder est visible (que l'usager n'a pas inscrit de nouvelle valeur), le champ aura la pseudo-classe :placeholder-shown permettant de changer l'apparence du champ. Dans l'exemple précédent, le champ à une bordure bleue tant qu'une nouvelle valeur n'est pas inscrite grâce à cette pseudo-classe.

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.

Dès qu'un champ à l'attribut readonly, la pseudo-classe :read-only lui est attribuée. Permettant ainsi de fournir une indication visuelle en CSS à l'usager que ce champ ne peut être modifié. Comme dans l'exemple précédent où le fond grisâtre est ajouté via à cette pseudo-classe.

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:

Dès qu'une valeur est saisie dans le champ requis la pseudo-classe :valid est ajoutée au champ. Cette pseudo-classe est régulièrement utilisée en CSS afin de fournir une rétroaction positive à l'utilisateur. Comme dans l'exemple précédent, une bordure verte indique que l'information entrée est valide 🟢.

À l'opposée, la pseudo-classe :invalid est ajoutée, tant que le champ est vide, permettant ainsi d'attirer l'attention de l'utilisateur à l'aide d'une rétroaction négative, telle qu'une bordure rouge 🔴.

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:

Si le nombre minimal et maximal sont respectés, la pseudo-classe :valid est ajoutée au champ. À l'opposée, si le nombre minimal n'est pas respecté, la pseudo-classe :invalid est ajoutée.

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.

Form

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

Attributs de form

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

• 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.

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é.