Attribut HTML : minlength

L'attribut minlength définit la longueur minimale de chaîne de caractères que l'utilisateur·rice 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 en unités de code UTF-16, ce qui correspond souvent, mais pas toujours, au nombre de caractères. Si aucun minlength n'est spécifié, ou si une valeur invalide est spécifiée, la saisie n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de maxlength, 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 par minlength, avec validityState.tooShort retournant true. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur·rice. 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'attribut required : un champ ne viole la contrainte minlength que si l'utilisateur·rice a saisi une valeur. Si un champ n'est pas required, une chaîne vide peut être soumise même si minlength est défini.

Exemple interactif

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

<label for="description">Description du produit&nbsp;:</label>
<textarea
  id="description"
  name="description"
  minlength="10"
  maxlength="40"
  required></textarea>

label {
  display: block;
  margin-top: 1em;
}

input:valid,
textarea:valid {
  background-color: palegreen;
}

Exemples

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

html

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

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.

css

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