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 de minlength 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 de maxlength doit être un entier positif ou nul et doit être supérieure à la valeur de minlength.

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 de min doit être un entier positif ou nul.
• La valeur maximale du nombre saisi par l’utilisateur sera codé avec l’attribut max. La valeur de max doit être un entier positif ou nul et doit être supérieure à la valeur de min.
• 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’attribut step. 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".

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)(?=.*[@$!%?&amp;])[A-Za-z\d@$!%?&amp;]{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 @$!%?&">

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" />