Formulaire

6

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.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos d'input text.

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, mais que la majorité répondront Canada  🇨🇦, il est possible de prépopuler le formulaire avec cette valeur.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Pour en savoir voir cet article MDN à propos de readonly.

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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

Puisque le premier champ n'est pas requis, il est automatiquement valide et donc reçoit la pseudo-classe :valid lui donnant sa bordure verte.

Pour en savoir plus, voir cet article MDN à propos de required.

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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.

La longueur maximale ne déclenche jamais la pseuso-classe :invalid puisque tout texte est tronqué à partir de la longueur maximale permise.

Pour en savoir plus, voir ces articles MDN à propos de minlength et maxlength.

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Attributs de label

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

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

Pour en savoir plus, voir cet article MDN à propos de label.

Form

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

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

Pour en savoir plus, voir cet article MDN à propos de form.

Input submit

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

Voir le CodePen de Simon Arnold (@smnarnold).

Attribut de submit

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

Pour en savoir plus, voir cet article MDN à propos d'input submit.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme