HTML : L’attribut maxlength de la balise input

Définition de l'attribut maxlength

En HTML, l'attribut maxlengthest utilisé avec la balise <input>pour limiter le nombre maximal de caractères qu'un utilisateur peut entrer dans un champ de saisie. Cet attribut est particulièrement utile pour les champs nécessitant un nombre limité de caractères, comme les numéros de téléphone, les codes postaux ou les identifiants d'utilisateur.

Syntaxe de l'attribut maxlength

La syntaxe de l'attribut maxlengthest simple et se place directement dans la balise <input>. Voici comment l'utiliser :

        <input type="text" maxlength="nombre_de_caracteres" />

Utilisation de l'attribut maxlength

L'attribut maxlengthest principalement utilisé pour contrôler la longueur de saisie dans les champs de formulaire. Il assure une meilleure validation côté client, permettant d'éviter les erreurs liées à une saisie trop longue, tout en améliorant l'expérience utilisateur. Cet attribut peut être utilisé avec divers types de champs, notamment text, passwordet search.

Exemple d'utilisation de l'attribut maxlength

Voici un exemple concret pour illustrer l'utilisation de maxlength. Dans cet exemple, nous créons un champ de texte où l'utilisateur ne peut entrer que jusqu'à 10 caractères :

Exemple : Copier le code

        <label for="username">Nom d'utilisateur :</label>
        <input type="text" id="username" name="username" maxlength="10" placeholder="Max 10 caractères" />

Astuces et conseils d'utilisation de l'attribut maxlength

Combiner avec la validation côté serveur : Bien que maxlengthlimite la saisie côté client, il est recommandé d'effectuer une validation côté serveur pour des raisons de sécurité.
Utiliser avec l'attribut minlength: Pour un contrôle plus précis, combinez maxlengthavec minlength, garantissant ainsi que l'utilisateur saisit le nombre de caractères requis.
Adapter selon le contexte : Pensez à ajuster la valeur de maxlengthselon les besoins spécifiques du champ. Par exemple, un champ de numéro de téléphone pourrait être limité à 10 caractères, tandis qu'un champ de mot de passe pourrait nécessiter une limite plus élevée.

Exemple Un élément <input> avec une longueur maximale de 10 caractères :

Exemple : Copier le code

  <!DOCTYPE html>
  <html lang="fr">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>html5 demo</title>
  </head>
  <body>
  <form action="demo_form.asp">
    Login: <input type="text" name="usrname" maxlength="10"><br><br>
    <input type="submit">
  </form>
  <p>Si vous tapez plus de 10 caractère le surplus ne sera pas pris en
  considération</p>
  </body>
  </html>