如何在 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>

当脚本执行时,输出窗口将弹出,提供文本区域的输入类型以及一个提交按钮。

更新于: 2022-12-15

3K+ 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.