Formulaire avancé

6

Les formulaires sont un incontournable du web, ils sont présents sur la majorité des sites et sont constitués de plusieurs champs. Ces champs sont en fait des balises <input> avec différent type. Visuellement, ils certains se ressemblent, mais ils remplissent tout un rôle spécifique.

Voyons quelques-un des type les plus communs.

Number

  • Parfait pour les valeurs numériques 🔢
  • Ajoute des flèches permettant d'incrémenter/décrémenter le nombre saisi du champ ↕️.
  • Les attributs min et max permettent de spécifier un nombre minimal et maximal à respecter. Par exemple, min="0" interdit les valeurs négatives.
  • L'attribut step permet de définir de combien le nombre peut-être incrémenté. Le step par défaut est de 1, mais il serait possible d'augmenter de 0.5 grâce à step="0.5" par exemple.

Sur mobile, un pavé numérique est affiché comme pour le champ tel, mais sans l'option +*#.

<input type="number" value="0">

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

Range

Permets de choisir une valeur entre deux extrémités. Leur usage est approprié lorsqu'une valeur approximative est suffisante.

Par exemple, choisir plus ou moins de sauce sur sa pizza est plus intuitif à l'aide de ce type de contrôle que de spécifier une quantité en ml:

Voir le CodePen de Simon Arnold (@smnarnold).

Attributs de range

  • name nom de référence lorsque le formulaire est soumis.
  • min et max permettent de spécifier un nombre minimal et maximal à respecter.
  • step définit la granularité. Autrement dit, le saut entre chaque valeur. Par exemple, step: 100 fait en sorte que les valeurs 0, 100, 200, 300 sont possibles, mais pas 150.
  • disabled permet d'afficher en lecture seule un widget range.

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

Password

  • Conviens aux mots de passe 🔑.
  • Permet d'entrer son mot de passe en toute discrétion, puisque les caractères affichés à l'écran sont remplacés par des .
<input type="password" value="démo">

Sur mobile, les boutons 😀 et 🎙 sont retirés puisque les mots de passe ne supportent pas les émojis et que d'utiliser le dictaphone pour dire à voix haute son mot de passe causerait des soucis de confidentialité.

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

Email

  • Conçu pour les courriels ✉️.
  • Ajoute automatiquement les pseudo-classes :valid et :invalid en fonction du texte inséré, permettant ainsi d'ajuster le visuel du champ en CSS afin de fournir une rétroaction à l'utilisateur.
<input type="email">
input:valid { border: solid 2px green; }
input:invalid { border: solid 2px red; }

Sur mobile, le bouton 🎙 du clavier est remplacé par les boutons @ et . qui sont systématiquement présent dans une adresse courriel.

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

Tel

  • Parfait pour les numéros de téléphone 📞.
  • Suggère des numéros de téléphone précédemment utilisés dans le navigateur.
  • Ne fais aucune validation par défaut, puisque les numéros varient grandement de format d'un pays à l'autre.
<input type="tel">

Lorsque l'attribut inputmode="decimal" est ajouté au champs téléphone, les appareils mobiles affichent un pavé numérique agrémenté des symboles +*#.

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

Search

  • Parfait pour les barres de recherche 🔍.
  • Ajoute automatiquement une croix permettant d'effacer rapidement le texte saisi ❌.
  • Certains navigateurs proposent même une autocomplétition sur ces champs avec des valeurs précédemment utilisées.
<input type="search" value="démo">

Sur mobile, le clavier est pratiquement identique à celui par défaut outre le bouton . qui est ajouté.

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

Date

  • Permets de sélectionner une date dans un calendrier 📅.
  • Les attributs min et max permettent de spécifier une date minimale et maximale à respecter. Par exemple, min="1980-01-01" fait en sorte qu'aucune date précédent le 1er janvier 1980 puisse être sélectionnée.
<input type="date">

Sur mobile, un calendrier ou une molette de date comme sur l'image suivante sera affiché.

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

Time

  • Permets de saisir une heure 🕰.
  • Les attributs min et max permettent de spécifier une heure minimale et maximale à respecter. Par exemple, min="09:00" fait en sorte qu'aucune heure avant 9am ne puisse être sélectionnée.
<input type="time">

Sur mobile, une horloge ou une molette d'heures comme sur l'image suivante sera affichée.

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

Color

Permet de choisir une couleur à l'aide d'un sélecteur de couleurs (colors picker) 🎨, plutôt que d'avoir a entrer un code hexadécimal, rgb ou autre.

Voir le CodePen de Simon Arnold (@smnarnold).

Attributs de color

  • name nom de référence lorsque le formulaire est soumis.
  • value code de la couleur par défaut. Si cet attribut est omis, la couleur utilisée par défaut sera (noir ⬛️).
  • disabled permet d'afficher en lecture seule l'outil de sélection de couleur.

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

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