跳到主要内容

HTML 文本域

HTML文本域（<textarea>）是HTML表单中的一个重要元素，用于允许用户输入多行文本。与单行输入框（<input type="text">）不同，文本域可以容纳更多的内容，适合需要用户输入较长文本的场景，如评论、反馈或描述等。

基本语法​

HTML文本域的基本语法非常简单。使用 <textarea> 标签即可创建一个文本域。以下是一个基本的示例：

html
<textarea rows="4" cols="50">
在这里输入你的文本...
</textarea>

属性解释​

  • rows：指定文本域的可见行数。
  • cols：指定文本域的可见列数（即宽度）。
  • placeholder：在文本域中显示的提示文本，当用户开始输入时消失。
备注

<textarea> 标签是一个双标签，意味着它有开始标签和结束标签。文本域的内容位于这两个标签之间。

实际应用​

示例1：简单的评论框​

假设你正在创建一个博客网站，并希望用户能够在文章下方留下评论。你可以使用 <textarea> 来创建一个评论框：

html
<form action="/submit-comment" method="post">
  <label for="comment">留下你的评论：</label><br />
  <textarea id="comment" name="comment" rows="5" cols="40" placeholder="请输入你的评论..."></textarea><br />
  <input type="submit" value="提交" />
</form>

示例2：联系表单中的消息框​

在联系表单中，用户通常需要输入一条消息。你可以使用 <textarea> 来创建一个消息框：

html
<form action="/contact" method="post">
  <label for="name">姓名：</label><br />
  <input type="text" id="name" name="name" /><br />
  <label for="email">邮箱：</label><br />
  <input type="email" id="email" name="email" /><br />
  <label for="message">消息：</label><br />
  <textarea id="message" name="message" rows="10" cols="50" placeholder="请输入你的消息..."></textarea><br />
  <input type="submit" value="发送" />
</form>

进阶用法​

限制输入长度​

你可以使用 maxlength 属性来限制用户在文本域中输入的最大字符数：

html
<textarea id="message" name="message" rows="10" cols="50" maxlength="500" placeholder="最多输入500个字符..."></textarea>

禁用文本域​

在某些情况下，你可能希望禁用文本域，使其不可编辑。你可以使用 disabled 属性来实现这一点：

html
<textarea id="message" name="message" rows="10" cols="50" disabled>此文本域已被禁用。</textarea>

自动调整大小​

如果你希望文本域能够根据内容自动调整大小，可以使用CSS的 resize 属性：

html
<textarea id="message" name="message" rows="10" cols="50" style="resize: vertical;">可以垂直调整大小。</textarea>
提示

resize 属性可以设置为 none、both、horizontal 或 vertical，分别表示禁止调整大小、允许水平和垂直调整大小、仅允许水平调整大小或仅允许垂直调整大小。

总结​

HTML文本域是一个非常有用的表单元素，适用于需要用户输入多行文本的场景。通过合理使用 rows、cols、placeholder、maxlength 等属性，你可以创建出功能丰富且用户友好的文本域。

附加资源与练习​

  • 练习1：创建一个包含姓名、邮箱和消息的联系表单，并使用 <textarea> 作为消息输入框。
  • 练习2：尝试使用 maxlength 属性限制用户在文本域中的输入长度，并测试其效果。
  • 附加资源：查阅 MDN Web Docs 了解更多关于 <textarea> 的详细信息。

通过不断练习和探索，你将能够熟练使用HTML文本域，并在实际项目中灵活应用。