如何在HTML中显示文本区域？

本文将介绍如何在HTML中显示文本区域。让我们深入了解如何在HTML中显示文本区域。

HTML 的 textarea 标签定义了一个多行纯文本编辑控件。文本以固定宽度的字体显示，因为文本区域可以容纳无限数量的字符（通常为 Courier 字体）。在表单中，textarea 通常用于收集用户的输入，例如评论或评价。提交表单后，表单数据中的引用将需要 name 属性。

让我们看看下面的例子，了解更多关于如何在HTML中显示 textarea 的信息。

示例 1

在下面的例子中，我们使用多行输入控件。

<!DOCTYPE html>
<html>
<body>
   <form action="https://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>

运行上述脚本后，输出窗口会弹出，显示名称输入字段和一个关于你自己的 textarea，以及一个提交按钮。如果点击提交按钮，表单就会提交。

示例 2：使用 JavaScript

考虑下面的例子，我们运行脚本更改文本区域中的内容。

<!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>

脚本执行后，将生成一个输出，其中包含一个用于地址字段的 textarea，其中填充了文本以及一个“点击更改”按钮。

如果用户点击按钮，textarea 中的文本就会更改。

示例 3

让我们考虑另一个使用 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>

脚本执行后，输出窗口将弹出，提供 textarea 输入类型和一个提交按钮。

更新于：2022年12月15日

3K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告