HTML | DOM Textarea 占位符属性

在 HTML 中，Textarea 元素的占位符属性是一种显示在文本框中的预定义文本，即该文本框为空时占用的文本。它们通常用于为用户提供有关该字段的输入格式或预期输入的信息，在输入文本之前为其提供一些上下文。

该属性也称为提示文本，占位符文本或占位符标记。在大多数用例中，它被用作输入提示，即创建一个灰色文本，告诉用户应将文本输入到该字段。

语法

以下是 Textarea 元素的占位符属性的基本语法：

<textarea placeholder="Enter your text here"></textarea>

特性

Textarea 占位符属性的一些特性如下：

• 它是一个可选属性，因此用户不必在输入文本之前删除它。
• 它可以接受任何文本字符串并支持相应的 HTML 实体。
• 它必须在单引号或双引号中包含。
• 它支持所有主流浏览器。

样式

Textarea 占位符文本可以通过 CSS 处理和样式化，其样式如下：

::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999;
  opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
}

其中 ::placeholder 是一个伪元素，允许开发人员对该元素的占位符文本应用样式。

示例

以下是一个例子，展示了如何在 Textarea 标记中使用占位符属性：

<label for="bio">Biography:</label>
<textarea id="bio" name="bio" placeholder="Enter your bio here"></textarea>

总结

Textarea 占位符属性为用户提供了更容易的输入方式，以及具有上下文的提示和帮助。在设计 Web 表单时，它应该作为标准的 UI 元素之一被考虑，以提高用户的体验和减少错误。