Apprendre HTML Partie 31: Utiliser des éléments de zone de texte dans des formulaires HTML

Dans cette discussion, nous étudierons l'utilisation des éléments de zone de texte dans les formulaires HTML. Cet élément est l'élément le plus souvent utilisé sur un site Web.

Je vais essayer d'expliquer le plus en détail possibleconcernant l'utilisation des éléments de zone de texte suivants avec leurs attributs, à savoir les lignes et les colonnes. En général, l'élément <textarea> ... </texraea> est utilisé pour saisir des données dans une zone de texte. Pour plus de détails sur ces éléments et attributs, regardons le tutoriel ci-dessous

balise <textarea>

La balise <textarea> est utilisée pour créer unzone de texte qui a une zone de texte. Son utilisation est marquée par l'utilisation de la balise <textarea> comme préfixe et de la balise </textarea> comme fermeture. Voici un exemple de code:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Textarea pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Après avoir exécuté dans le navigateur, les résultats sont les suivants:

Cette balise prend en charge plusieurs attributs tels que le nom, les lignes, les cols, la longueur maximale, requis, etc.

1. Attribut de lignes

L'attribut lignes est utilisé pour déterminer le montantligne dans la zone de texte. Les valeurs de cet attribut sont des nombres comme 40, 10 ou avec des pourcentages comme 20%. Où plus la valeur est élevée, plus l'élément textarea est élevé. Voici un exemple d'écriture et d'utilisation de l'attribut lignes dans la balise <textarea> en HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Une fois le code ci-dessus exécuté dans le navigateur, il apparaîtra comme indiqué ci-dessous:

2. Attribut Cols

L'attribut cols est utilisé pour déterminer la largeur(nombre de colonnes) dans l'élément textarea. Comme pour l'attribut lignes, les valeurs de cet attribut peuvent être des nombres tels que 80, 20 ou 20%. Où plus la valeur est élevée, plus l'élément textarea est large. Ci-dessous est un exemple du code pour écrire et utiliser l'attribut cols dans la balise <textarea> en HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Une fois le code ci-dessus exécuté dans le navigateur, il apparaîtra comme indiqué ci-dessous:

Les deux exemples utilisent les attributs lignes et colsci-dessus a montré des différences dans l'utilisation de l'attribut row et cols dans l'élément textarea. Pour être exact, l'attribut row sert à définir la hauteur tandis que l'attribut cols sert à définir la largeur dans l'élément <textarea>. Voici un exemple d'écriture et d'utilisation des attributs lignes et cols ensemble dans la balise <textarea> en HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows dan Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Une fois le code ci-dessus exécuté dans le navigateur, il apparaîtra comme indiqué ci-dessous:

une combinaison de lignes et de cols dans la zone de texte

3. L'attribut maxlength

Cet attribut s'applique également à la balise TextArea, qui a une fonction pour limiter le nombre de caractères entrés dans TextArea. Exemple de code comme celui-ci:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" maxlength="40">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Lorsqu'il est exécuté dans un navigateur, le résultat est le suivant:

Dans le code ci-dessus, j'ai défini la longueur maximale sur 40, vous ne pouvez donc saisir qu'un maximum de 40 caractères, pas plus.

4. Attributs requis

Non seulement l'attribut maxlength, l'attribut requiségalement utilisé dans la zone de texte. Cette fonction d'attribut est utilisée pour définir l'élément (dans ce cas, la zone de texte) à exiger avant la soumission. Exemple de code HTML comme celui-ci:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" required></textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Il ressemble à un navigateur comme celui-ci:

Lorsque vous cliquez directement sur le bouton Envoyer, vous recevrez une notification comme dans l'image ci-dessus, ce qui signifie que vous devez d'abord remplir la zone de texte avant de cliquer sur le bouton Envoyer.

Voilà le matériel concernant l'utilisation de textarea surFormulaire HTML, la zone de texte peut également être utilisée en dehors du formulaire HTML, donc ce n'est pas seulement pour les formulaires HTML. N'oubliez pas de continuer à visiter ce blog pour obtenir les derniers didacticiels sur HTML.

</p>

En savoir plus: