Sommaire de l'article
Dernière mise à jour : juillet 2021
Les éléments de formulaire HTML5
HTML5 a apporté de nombreux nouveaux éléments dans les formulaires, plus accessibles et surtout proposant de nouvelles fonctionnalités. Nous verrons également les nouveaux attributs. Vous l'aurez compris, dans cet article, nous n'aborderons pas les champs déjà existants.
Input type url :
Si le champ n'est pas complété par une url, le navigateur affiche une infobulle vous invitant à remplir correctement l'input. On peut donner des indications quant à la nature du champ en utilisant l'attribut placeholder (voir cet attribut plus bas).
<input type="url" placeholder="https://">
Input type tel :
HTML
<input type="tel">
NB : Par défaut, le navigateur ne propose pas de vérification côté client. L'exemple ci-dessous propose une vérification grâce à l'attribut pattern (un contrôle côté serveur sera à mettre en place en corrélation) si au moins un chiffre est renseigné.
<input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" required>
Input type email :
HTML
<input type="email">
Input search :
HTML
<input type="search">
Input type date:
Avec l'input de type date, il est possible de sélectionner une date avec le jour, le mois et l'année.
<input type="date">
Input type time :
HTML
<input type="time">
Input type datetime-local :
💡 NB : l'input de type datetime est obsolète . Il est remplacé par datetime-local :
L'input datetime-local permet de sélectionner une date spécifique sous forme de : jour / mois / année / heure / minute.
<input type="datetime-local">
Input type week :
Le nouvel input week permet de pouvoir choisir une semaine spécifique ainsi qu'une année. La balise se présente tout simplement sous cette forme (qui diffère selon les navigateurs) :
<input type="week">
Input type month :
L'input month permet de sélectionner un mois spécifique sous forme de : mois / année (apparence qui diffère selon les navigateurs).
<input type="month">
Input range :
HTML
<input type="range">
Input type color :
HTML
<input type="color">
Input number :
HTML
<input type="number">
L'élément datalist :
HTML
<label for="jeux">Quel est votre jeu vidéo préféré ?</label>
<input list="liste_jeux" id="jeux">
<datalist id="liste_jeux">
<option value="Zelda">
<option value="Call of Duty">
<option value="Fifa">
<option value="Street Fighter">
</datalist>
Il est possible de combiner l'élément datalist avec des champs de formulaire tels que range, number... Une page d'exemples (EN) .
Les attributs de formulaire HTML5
Attribut placeholder :
L'attribut HTML5 placeholder permet d'ajouter du texte dans un champ de saisie d'un formulaire, ceci afin de renseigner le visiteur. Par exemple, vous pouvez placer un texte à l'intérieur soit à l'intérieur d'un élément input de type text, search, password, url, tel ou email, soit d'un élément textarea.
Auparavant, le meilleur moyen de faire apparaître du texte dans un élément remplacé au sein d'un formulaire était le recours à JavaScript.
Ne vous contentez pas de placer uniquement cet attribut . En effet, cela peut créer une confusion chez le visiteur qui peut croire que le champ est déjà renseigné, quand bien même le texte de l'attribut placeholder s’efface dès lors que l’utilisateur commence à saisir du contenu. Il est vivement conseillé d'utiliser cet attribut en corrélation avec des labels pour vos formulaires.
<label>Votre texte</label>
<input type="text" placeholder="votre texte">
Une certaine incompréhension peut régner sur placeholder. En effet, il est un pseudo-élément CSS (::placeholder) qui sert à styliser le texte contenu dans l'attribut placeholder.
Attribut required :
L'attribut required permet de rendre obligatoire le remplissage d'un champ. Par conséquent, la validation du formulaire sera bloquée si l'un des champs qui contient cet attribut n'a pas été renseigné.
<label>Votre nom :</label>
<input placeholder="Votre nom">
Cet attribut est pris en charge pour tous les types d'éléments input exceptés color, hidden, range, submit, image, reset et button.
Lorsqu'un champ contient cet attribut, la pseudo-classe CSS :required lui est appliqué. Vous pouvez donc styliser l'élément.
:required{
1px solid red
}
Attribut pattern :
L'attribut pattern va permettre de pouvoir ajouter des contraintes sur un élément de formulaire. Il va effectuer une vérification côté client. Si l'information saisie ne correspond pas à l'expression régulière, un message apparaît, demandant à l'utilisateur de remplir le champ au bon format.
Cet attribut peut être utilisé pour les champs de type text, tel, email, url, password ou encore search.
Ci-desous, un simple pattern qui oblige l'utilisateur à entrer uniquement des lettres :
<input type="text" pattern="^[( )a-zA-Z]+$">
Attribut autocomplete :
Cet attribut permet d'indiquer si la valeur saisie doit automatiquement être complétée par le navigateur.
HTML
<input autocomplete="on">
Plus de détails sur l'attribut autocomplete .
Attribut autofocus :
Cet attribut permet de mettre le focus sur un élément de formulaire au chargement de la page. Cependant son utilisation n'est pas recommandée du fait du manque d'accessibilité.
<label>Votre nom :</label>
<input autofocus placeholder="Votre nom">
Article (EN) sur le sujet.
Input attribut readonly :
Cet attribut empêche de modifier un champ dans un formulaire. Cependant, contrairement à l'attribut disabled, il est possible de le tabuler, le mettre en surbrillance ou encore de copier son contenu.
<input value="Essayez de changer ce message" readonly>
Input attribut multiple :
Cet attribut permet à l'utilisateur de saisir plusieurs fichiers. Il s'applique uniquement sur les types email et file.
<input type="file" multiple>
Voir aussi sur ce blog comment personnaliser les messages d'erreur dans un formulaire HTML5 avec CSS.
Vous rencontrez un problème avec cet article ?
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.