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

htmlfront end technologyweb development更新于 2024/8/10 6:04:17

本文将介绍如何在 HTML 中显示文本区域。让我们深入研究本文，清晰地了解如何显示文本区域。

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

让我们查看以下示例，了解更多关于如何在 HTML 中显示文本区域的信息。

示例 1

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

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

运行上述脚本后，输出窗口会弹出，显示姓名输入框、关于您自己的文本区域以及提交按钮。点击提交按钮后，表单将被提交。

示例 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>

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

如果用户点击该按钮，文本区域中的文本将会更改。

示例 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>

当脚本执行时，将会弹出输出窗口，提供 textara 的输入类型以及提交按钮。