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


我们将在本文中执行的任务是如何在 HTML 中显示文本区域。让我们深入了解本文,以清楚地了解如何显示文本区域。

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

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

示例 1

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

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

考虑以下示例,我们正在运行脚本以更改文本区域中的内容。

Open Compiler
<!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 中的文本将更改。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例 3

让我们考虑另一个使用 textarea 标签的示例

Open Compiler
<!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+ 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告