Maison > interface Web > tutoriel HTML > Comment limiter le nombre de caractères autorisés dans un champ de texte de saisie de formulaire ?

Comment limiter le nombre de caractères autorisés dans un champ de texte de saisie de formulaire ?

王林
Libérer: 2023-09-08 14:49:02
avant
1382 Les gens l'ont consulté

Comment limiter le nombre de caractères autorisés dans un champ de texte de saisie de formulaire ?

Dans cet article, nous apprendrons comment limiter le nombre de caractères autorisés dans un champ de texte de saisie de formulaire.

Nous utilisons la balise pour obtenir les entrées de l'utilisateur en HTML. Pour donner une limite (ou une plage) à un champ de saisie, nous utilisons les attributs min et max, qui spécifient respectivement les valeurs maximale et minimale du champ de saisie.

Pour définir la limite maximale de caractères dans un champ de saisie, nous utilisons l'attribut maxlength. Cet attribut est utilisé pour spécifier le nombre maximum de caractères pour le champ de saisie .

Pour définir la limite minimale de caractères dans un champ de saisie, nous utilisons l'attribut minlength. Cet attribut permet de préciser le nombre minimum de caractères pour saisir le champ .

Tout d'abord, voyons comment définir la limite maximale de caractères pour un champ de saisie -

Grammaire

Voici la syntaxe permettant de définir la limite maximale de caractères d'un champ de saisie.

<input maxlength="enter_number">
Copier après la connexion

Exemple

Ce qui suit est un exemple de programme pour définir la limite maximale de caractères d'un champ de saisie -

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "#">
      Email Id:
      <br>
      <input type = "text" name = "email_id" maxlength = "30" />
      <br>
      Password: <br>
      <input type = "password" name = "password" maxlength = "10" />
      <br>
      <input type = "submit" value ="Submit" />
   </form>
</body>
</html>
Copier après la connexion

Définir une limite minimale de caractères

Voyons maintenant comment définir la limite minimale de caractères pour un champ de saisie

 ;

Grammaire

Voici la syntaxe permettant de définir la limite minimale de caractères d'un champ de saisie en JavaScript -

<input minlength="enter_number">
Copier après la connexion

Exemple

Ce qui suit est un exemple de programme pour définir la limite minimale de caractères d'un champ de saisie en JavaScript -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action="#">
      Username:
      <input type="text" name="username"
      minlength="10"><br><br>
      Password:
      <input type="password" name="password"
      minlength="8"><br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Utilisez le nombre maximum et minimum de caractères dans les champs de saisie

Voyons maintenant comment utiliser les caractères de limite minimale et les caractères de limite maximale dans les champs de saisie -

Exemple

Voici un exemple de programme pour définir les limites minimales et maximales de caractères d'un champ de saisie en JavaScript -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action="#">
      Username:
      <input type="text" name="username"
      minlength="10" maxlength="20"><br><br>
      Password:
      <input type="password" name="password"
      minlength="8" maxlength="10"><br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal