HTML - textarea 标签

HTML <textarea> 标签用于表示多行纯文本编辑控件。当您希望允许用户输入大量自由格式文本时，它很有用。<textarea> 标签的最佳示例是对评论、反馈表和故事内容撰写评论。

以下是创建 <textarea> 标签时自动添加的默认属性，如下所示 -

id：它允许 <textarea> 标签与标签元素相关联，以实现可访问性目的。
name：它用于设置提交from时提交给服务器的关联数据点的名称。
rows & cols：HTML 行和列属性指定 <textarea> 的确切大小。

语法


<textarea> .... </textarea>

属性

<textarea> 标签支持 HTML 的全局属性和事件属性。以及下面列出的一些特定属性。

<textarea> 标签示例

下面的示例将说明 <textarea> 标签的用法。在哪里、何时以及如何使用它来创建 textarea，以及我们如何使用 CSS 设置该 textarea 部分的样式。

创建 <textarea> 标签元素

在下面的程序中，我们使用 <textarea> 标签在 HTML 中创建一个不包含任何属性的 textarea 字段。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
</head>
<body>
   <!--create a textarea element(tag)-->
   <textarea></textarea>
</body>
</html>

创建具有属性的<textarea> 标签

以下是 <textarea> 标签的另一个示例。在这里，我们使用 <textarea> 标签创建一个 textarea 元素，其中包含默认属性：name、id、row 和 cols。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
</head>
<body>
   <!--create a textarea element(tag)-->
   <textarea name="feedback" id="demo" 
             cols="30" rows="10">
   </textarea>
</body>
</html>

设置<textarea> 标签CSS样式

在此示例中，我们将使用 HTML <textarea> 标签创建一个 textarea 元素。然后，使用 CSS 对其进行样式设置，并使用占位符属性在 textarea 中指定值的简短提示。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 300px;
         height: 120px;
         background-color: aquamarine;
         padding: 10px 10px;
         font-size: 18px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <h3>Write your feedback: </h3>
   <textarea placeholder="Write your feedback...."></textarea>
</body>
</html>

<textarea> 标签字符限制

考虑以下示例，我们将在其中使用 min 和 max 属性。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 350px;
         height: 120px;
         background-color: rgb(222, 216, 216);
         font-size: 18px;
         padding: 10px 10px;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <p>
      Write your review minimum of 10 characters
      and a maximum of 20 characters: 
   </p>
   <textarea placeholder="Write your review..." 
             minlength="10" maxlength="20">
   </textarea>
</body>
</html>

禁用文本区域

让我们看一下下面的示例，我们将在其中使用 disabled 属性。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Textarea Tag</title>
   <style>
      textarea {
         width: 300px;
         height: 100px;
         background-color: rgb(22, 208, 236);
         font-size: 18px;
         padding: 5px 5px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a textarea element(tag)-->
   <p>Your short story here: </p>
   <textarea placeholder="Your story..." name='story' disabled>
   </textarea>
</body>
</html>

支持的浏览器

浏览器
<textarea>	Yes	Yes	Yes	Yes	Yes

打印本页