L'attributminlength définit lalongueur minimale de chaîne de caractères que l'utilisateur·ice peut saisir dans un élément HTML<input> ou un élément<textarea>. L'attribut doit avoir une valeur entière supérieure ou égale à 0.

La longueur est mesurée enunités de code UTF-16, ce qui correspond souvent, mais pas toujours, au nombre de caractères. Si aucunminlength n'est défini, ou si une valeur invalide est définie, la saisie n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur demaxlength, sinon la saisie ne sera jamais valide, car il est impossible de satisfaire les deux critères.

Le champ échouera à la validation des contraintes si la longueur du texte saisi est inférieure au nombre d'unités de code UTF-16 défini parminlength, avecValidityState.tooShort retournanttrue. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur·ice. En cas d'échec de la soumission, certains navigateurs afficheront un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.

minlength n'implique pas l'attributrequired : un champ ne viole la contrainteminlength que si l'utilisateur·ice a saisi une valeur. Si un champ n'est pasrequired, une chaîne vide peut être soumise même siminlength est défini.

Exemple interactif

<label for="name">Nom du produit&nbsp;:</label><input   name="name"  type="text"  value="Shampoing"  minlength="3"  maxlength="20"  required /><label for="description">Description du produit&nbsp;:</label><textarea   name="description"  minlength="10"  maxlength="40"  required></textarea>

label {  display: block;  margin-top: 1em;}input:valid,textarea:valid {  background-color: palegreen;}

Exemples

En ajoutantminlength="5", la valeur doit soit être vide, soit comporter cinq caractères ou plus pour être valide.

<label for="fruit">Entrez un nom de fruit d'au moins 5 lettres.</label><input type="text" minlength="5" />

Nous pouvons utiliser des pseudo-classes pour donner un style à l'élément en fonction de la validité de la valeur. La valeur sera valide tant qu'elle sera soit nulle (vide), soit longue de cinq caractères ou plus.Vert est invalide,Citron est valide.

input {  border: 2px solid currentcolor;}input:invalid {  border: 2px dashed red;}input:invalid:focus {  background-image: linear-gradient(pink, lightgreen);}

Spécifications

Compatibilité des navigateurs

html.elements.input.minlength

html.elements.textarea.minlength

Voir aussi

• L'attributmaxlength
• L'attributsize
• L'attributpattern
• Validation des contraintes
• Validation de formulaire
• L'élément<input>