Maison >interface Web >tutoriel HTML >Comment limiter le nombre de caractères saisis dans une zone de texte dans un formulaire HTML ?
Comment limiter le nombre de caractères saisis dans une zone de texte dans un formulaire HTML ?
- 王林avant
- 2023-08-30 11:17:022098parcourir
En HTML, nous pouvons créer des formulaires à l'aide de divers éléments pour accepter et stocker les informations saisies par les utilisateurs. Ces éléments sont également appelés éléments de formulaire, tels que : les champs de texte (zones de texte), les boutons radio, les cases à cocher, les listes déroulantes ou combo, les boutons de réinitialisation et de soumission.
TextArea est l'un des éléments pouvant être créés dans un formulaire. Une zone de texte est utilisée comme contrôle multiligne dans lequel les utilisateurs peuvent saisir des données dans plusieurs lignes et colonnes.
Le contrôle TextArea est utilisé pour saisir des notes, des suggestions, des informations d'adresse, du texte de courrier électronique, des commentaires, etc. La taille du texte est plus grande que celle du champ de texte ordinaire car le champ de texte est un contrôle de saisie sur une seule ligne et nécessite une ligne de données.
Exemple
Comprenons le code HTML de base pour créer une zone de texte avec une largeur et une hauteur par défaut.
<html>
<head><title>Feedback Form..</title>
<style>
h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
</style>
</head>
<body>
<h1>Feedback Form..</h1>
<form id="feedback_form">
<label for="label1">Enter your feedback here:</label>
<textarea id="t1"> </textarea>
</form>
</body>
</html>
Exemple
Pour définir la largeur et la hauteur d'une zone de texte de votre choix, vous spécifiez le nombre de lignes et de colonnes souhaité. Pour ce faire, on peut profiter des attributs rows et cols de la balise
<html>
<head><title>Feedback Form..</title>
<style>
h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
</style>
</head>
<body>
<h1>Feedback Form..</h1>
<form id="feedback_form">
<table>
<tr>
<td>
<label for="label1">Enter your feedback:</label>
</td>
<td>
<textarea id="t1" rows="10" cols="24">Type your valueable feedback here: </textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Lorsque les informations saisies dans la zone de texte dépassent sa hauteur, la barre de défilement verticale sera automatiquement activée.
REMARQUE - Par défaut, nous pouvons saisir des données jusqu'à 5,24,288 caractères dans la zone de texte.
Dans certains cas, il est nécessaire de limiter la taille des caractères pouvant être saisis dans une zone de texte. Ainsi, dans ce cas, nous pouvons utiliser l'attribut maxlength pour contrôler le nombre de caractères saisis dans la zone de texte.
Exemple
Supposons que, sur un site Web où une personne saisit ses expériences, articles ou discours, il doive y avoir une certaine limite sur le nombre de caractères. Par conséquent, les concepteurs Web peuvent utiliser l'attribut maxlength pour limiter le nombre de caractères saisis dans une zone de texte. Comprenons avec un exemple -
<html>
<body>
<form id="feedback_form">
<label for="label1">Enter your feedback (150 words):</label>
<textarea id="t1" maxlength="150"> </textarea>
</form>
</body>
</html>
Dans ce programme, la limite de caractères n'est fixée qu'à 150 caractères, ce qui signifie qu'il arrêtera de taper car nous ne sommes pas autorisés à taper plus de "150" caractères.
Nous avons expliqué ci-dessus que l'attribut cols peut spécifier la largeur de la zone de texte, ce qui signifie que nous pouvons saisir le nombre maximum de colonnes, mais si nous utilisons les attributs cols et maxlength ensemble dans la balise
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!