Maison > interface Web > tutoriel HTML > le corps du texte

Comment pouvons-nous afficher la zone de texte en HTML ?

王林
Libérer: 2023-08-21 23:25:08
avant
1972 Les gens l'ont consulté

Comment pouvons-nous afficher la zone de texte en HTML ?

La tâche que nous allons effectuer dans cet article est de savoir comment afficher une zone de texte en HTML. Plongeons dans l'article pour avoir une idée claire de la façon dont nous affichons la zone de texte.

La balise HTML textarea définit un contrôle d'édition de texte brut multiligne. Étant donné que l'espace de texte peut contenir un nombre illimité de caractères (généralement Courier), le texte est affiché dans une police à largeur fixe. Dans les formulaires, les zones de texte sont souvent utilisées pour collecter les entrées des utilisateurs, telles que des commentaires ou des évaluations. Une fois le formulaire soumis, l'attribut name sera requis pour les références dans les données du formulaire.

Examinons les exemples suivants pour en savoir plus sur la manière d'afficher une zone de texte en HTML.

Exemple 1

Dans l'exemple ci-dessous, nous utilisons un contrôle d'entrée multi-lignes.

<!DOCTYPE html>
<html>
<body>
   <form action="https://www.tutorialspoint.com/index.htm">
      <label for="name">NAME:</label><br>
      <input type="text" id="name" name="name"><br>
      <p><label for="comment">About Yourself:</label></p>
      <textarea id="comment" name="comment" rows="5" cols="35">
         I'm from Hyderabad,Telengana
      </textarea><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Lors de l'exécution du script ci-dessus, la fenêtre de sortie apparaît, affichant un champ de saisie pour saisir votre nom et une zone de texte pour vous présenter, ainsi qu'un bouton de soumission. Si vous cliquez sur le bouton Soumettre, le formulaire sera soumis.

Exemple 2 : Utiliser JavaScript

En considérant l'exemple suivant, nous exécutons un script pour modifier le contexte dans la zone de texte.

<!DOCTYPE html>
<html>
<body>
   Address:<br>
   <textarea id="tutorial">
      kavuri incore 9
      Hyderabad
   </textarea>
   <button type="button" onclick="myFunction()">Click To Change</button>
   <script>
      function myFunction() {
         document.getElementById("tutorial").value = "Madhapur , Telangana";
      }
   </script>
</body>
</html>
Copier après la connexion
Lorsque le script est exécuté, il génère une sortie contenant une zone de texte avec le champ d'adresse rempli de texte et un bouton cliquer pour modifier

Si l'utilisateur clique sur le bouton, le texte dans la zone de texte est modifié.

La traduction chinoise de

Exemple 3

est :

Exemple 3

Prenons un autre exemple, nous utilisons la balise textarea

<!DOCTYPE html>
<html>
<head>
   <title>HTML textarea Tag</title>
</head>
<body>
   <form action = "/cgi-bin/hello_get.cgi" method = "get">
      Enter subjects
      <br/>
      <textarea rows = "5" cols = "50" name = "description"></textarea>
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>
Copier après la connexion

Lorsque le script est exécuté, la fenêtre de sortie apparaîtra, fournissant le type d'entrée pour textara ainsi qu'un bouton de soumission.

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!

Étiquettes associées:
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