HTML - <textarea> 标签

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

以下是创建 <textarea> 标签时自动添加的默认属性：

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

语法

<textarea>
  ....
</textarea>

属性

HTML 文本区域标签支持 HTML 的全局和事件属性。以及一些特定的属性，如下所示。

属性	值	描述
autofocus	autofocus	指定在页面加载时文本区域应自动获得焦点。
cols	数字	根据可见字符宽度的数量指定文本区域的宽度。
dirname	textareaname.dir	指定将提交文本区域的文本方向。
disabled	disabled	根据可见字符宽度的数量指定文本区域的宽度。
form	form_id	指定一个或多个表单。
maxlength	数字	指定文本区域中字符的最大数量。
name	name	为输入控件分配名称。
placeholder	文本	指定文本区域中值的简短提示。
readonly	readonly	将输入控件设置为只读。它不允许用户更改值。但是，控件可以接收焦点，并且在通过表单控件进行制表时会包含在内。
required	required	指定文本区域是必需的。
rows	数字	根据可见文本行的数量指定文本区域的高度。如果文本超出此限制，用户可以使用文本区域的滚动条进行滚动。
wrap	hard soft	指定在文本区域中换行文本。

HTML 文本区域标签示例

下面的示例将说明文本区域标签的用法。在哪里、何时以及如何使用它来创建文本区域，以及我们如何使用 CSS 样式化该文本区域部分。

创建文本区域元素

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

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

创建具有属性的文本区域元素

以下是 HTML <textarea> 标签的另一个示例。在这里，我们使用包含默认属性（名称、ID、行和列）的 <textarea> 标签创建一个文本区域元素。

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

样式化文本区域

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

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

文本区域的字符限制

考虑以下示例，我们将使用 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	是	是	是	是	是

html_tags_reference.htm

打印页面