Contrôle de la saisie
La mise en place d'un contrôle de ce qui est saisi dans un champs de formulaire favorise l'accessibilité du formulaire. Cela n'empêchera pas ensuite de vérifier que la saisie de l'utilisteur est conforme à l'attendu en effectuant ensuite des vérifications côté serveur.
Contrôle simple de la saisie des champs
Selon le type de champs déclaré, le navigateur effectuera un contrôle de la saisie et affichera une infobulle informative en cas d’erreur de saisie.
Champ obligatoire
Le champ obligatoire sera codé avec l’attribut required
.
<form ...>
<p>Les champs signalés par une étoile(*) sont obligatoires.</p>
<label for="nom">Nom *</label>
<input type="text" name="nom" id="nom" required>
[...]
</form>
Champ d’adresse électronique
Le champ d’adresse électronique sera codé avec l’attribut type="email"
.
Par défaut, la saisie doit respecter la forme nom@domaine.ext.
Visuel
N.B. Pour les besoins de la démonstration, le champ a été rendu obligatoire.
Code HTML
<label for="mail">Votre adresse électronique <small>(de la forme nom@domaine.com)</small></label>
<input type="email" name="mail" id="mail" required>
Champ date
Le champ de type date sera codé avec l’attribut type="date"
.
La zone de saisie propose de manière native le format (jj/mm/aaaa) et utilise la calendrier cliquable natif du navigateur plus besoin d’avoir recours à une librairie javascript comme c’était le cas en HTML 4.
Ces deux interactions natives font que ce champ est accessible.
Visuel
Renseigner une date ou cliquer sur l’icône en forme de calendrier. Pour les besoins de la démonstration, le champ a été rendu obligatoire.
Code HTML
<label for="dateNaissance">Date de naissance *</label>
<input type="date" name="dateNaissance" id="dateNaissance" required>
Champ « fichier »
Le champ de type « fichier » sera codé avec l’attribut type="file"
.
Il permet de charger un fichier de puis son ordinateur.
Visuel
Code HTML
<label for="fichier">Choisissez un fichier</label>
<input type="file" name="fichier" id="fichier">
Champ « mot de passe »
Le champ « mot de passe » sera codé avec l’attribut type="password"
.
Le texte saisi sera masqué par des ronds ou des étoiles selon le type de navigateur.
Visuel
Code HTML
<label for="mdp">Votre mot de passe</label>
<input type="password" name="mdp" id="mdp" required>
Champ numérique
Le champ numérique sera codé avec l’attribut type="number"
.
La saisie est libre et des flèches haut et bas sont implémentées nativement pour sélectionner, par défaut, un nombre entier négatif ou positif.
Visuel
Code HTML
<label for="ChiffrePorteBonheur">Votre chiffre porte-bonheur</label>
<input type="number" name="ChiffrePorteBonheur" id="ChiffrePorteBonheur">
Champ « numéro de téléphone »
Le champ « numéro de téléphone » sera codé avec l’attribut type="tel"
.
La saisie est libre ; par défaut, le champ affichera un clavier de saisie sur les supports numériques de type « mobile ».
Visuel
Code HTML
<label for="telephone">Votre numéro de téléphone</label>
<input type="tel" name="telephone" id="telephone">
Champ « URL »
Le champ « URL » sera codé avec l’attribut type="url"
.
La saisie est libre ; par défaut, la valeur saisie doit respecter la forme schema://restedelurl.
Visuel
Code HTML
<label for="url">URL de votre site <small>(de la forme schema://restedelurl)</small></label>
<input type="url" name="url" id="url">
Contrôles supplémentaires sur la valeur saisie
Des attributs supplémentaires peuvent être ajoutés au champ input
pour contrôler, côté utilisateur, la saisie du champs.
Taille minimum et maximum de la valeur saisie
- Le nombre minimum de caractères que l’utilisateur peut saisir dans le champ sera codé avec l’attribut
minlength
. La valeur deminlength
doit être un entier positif ou nul. - Le nombre maximum de caractères que l’utilisateur peut saisir dans le champ sera codé avec l’attribut
maxlength
. La valeur demaxlength
doit être un entier positif ou nul et doit être supérieure à la valeur deminlength
.
Le champ n’a pas besoin d’avoir l’attribut required
pour que le contrôle s’effectue. En l’absence d’attribut required
, le contrôle s’effectuera à partir du moment où l’utilisateur aura saisie quelque chose dans le champ.
Visuel
Exemple HTML
<label for="prenom">Votre prénom <small>(de 3 à 50 caractères)</small></label>
<input type="text" id="prenom" name="prenom" minlength="3" maxlength="50">
Valeur minimale, maximale et incrémentation d’un nombre
Pour un champ de type number, il est possible d’imposer aussi le pas d’incrémentation du chiffre saisi.
- La valeur minimale du nombre saisi par l’utilisateur sera codé avec l’attribut
min
. La valeur demin
doit être un entier positif ou nul. - La valeur maximale du nombre saisi par l’utilisateur sera codé avec l’attribut
max
. La valeur demax
doit être un entier positif ou nul et doit être supérieure à la valeur demin
. - Le pas d’incrémentation du nombre sera codé avec l’attribut
step
. Si on veut autoriser les valeurs décimales, elle sera spécifiée dans la valeur de l’attributstep
. Ainsi :- Si on veut autoriser 2 chiffres après la virgule, on codera :
step="0.01"
. - Si on veut autoriser uniquement les valeurs entières et les demis (xx,5), on codera :
step="0.5"
.
- Si on veut autoriser 2 chiffres après la virgule, on codera :
Visuel
Cliquer les flèches haut et bas de la zone de saisie pour afficher les chiffres.
Code HTML
<label for="nb1">Chiffre à 2 décimales <small>(de 0 à 10)</small></label>
<input type="number" id="nb1" name="nb1" min="0" max="10" step="0.01" >
<label for="nb2">Chiffre entier et demi <small>(de 1 à 10 : 1, 1.5, 2, ...)</small></label>
<input type="number" id="nb2" name="nb2" min="1" max="10" step="0.5">
Motif de saisie
Pour imposer un motif de saisie à respecter, on aura recours à l’attribut pattern
. Cet attribut comportera une expression régulière (RegExp) à respecter.
Visuel
Pour les besoins de la démonstration, le champ « mot de passe » ne porte pas l’attribut type="password"
mais type="text"
.
Exemple HTML
<label for="mdpMotif">Votre mot de passe <small>(12 à 30 caractères contenant au moins une lettre majuscule, une lettre minuscule, un chiffre et un caractère spécial parmi @$!%?&)</small></label>
<input id="mdpMotif" name="mdpMotif" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%?&])[A-Za-z\d@$!%?&]{12,30}$" type="password" title="Un mot de passe de 12 à 30 caractères contenant au moins une lettre majuscule, une lettre minuscule, un chiffre et un caractère spécial parmi @$!%?&">
astuce
Pour vous aider sur les expressions régulières, voici quelques ressources :
- Exemples de la documentation MDN.
- regexr.com, site de documentation et de test des expressions régulières.
Formats de fichier acceptés
Pour imposer un format de fihcier à charger, on aura recours à l’attribut accept
.
Exemple HTML
<input
type="file"
id="docMicrosoft"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />