编辑“︁HTML文本域”︁（章节）

= HTML文本域 =

'''HTML文本域'''（Textarea）是HTML表单中用于接收用户多行文本输入的表单控件。与单行文本输入框（<code><nowiki><input type="text"></nowiki></code>）不同，文本域允许用户输入多行文本，适用于评论、反馈、文章内容等场景。

== 基本语法 ==
HTML文本域使用<code><nowiki><textarea></nowiki></code>标签定义，其基本语法如下：

<syntaxhighlight lang="html">
<textarea rows="4" cols="50">
默认文本内容（可选）
</textarea>
</syntaxhighlight>

* '''rows'''：指定文本域的可见行数（高度）
* '''cols'''：指定文本域的可见列数（宽度）
* 标签之间的内容为默认显示的文本（可选）

== 属性详解 ==
文本域支持多种属性来定制其行为和外观：

{| class="wikitable"
|+ 常用文本域属性
! 属性 !! 描述 !! 示例

| <code>name</code> || 指定表单提交时的字段名称 || <code>name="comment"</code>

| <code>id</code> || 为元素指定唯一标识符 || <code>id="userFeedback"</code>

| <code>placeholder</code> || 显示提示文本（浅灰色） || <code>placeholder="请输入您的意见"</code>

| <code>readonly</code> || 设置为只读（不可编辑） || <code>readonly</code>

| <code>disabled</code> || 禁用文本域 || <code>disabled</code>

| <code>maxlength</code> || 限制最大字符数 || <code>maxlength="500"</code>

| <code>autofocus</code> || 页面加载时自动聚焦 || <code>autofocus</code>

| <code>required</code> || 设置为必填字段 || <code>required</code>
|}

== 样式与布局 ==
可以使用CSS来美化文本域：

<syntaxhighlight lang="html">
<style>
  .styled-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none; /* 禁用调整大小 */
  }
</style>

<textarea class="styled-textarea" rows="6"></textarea>
</syntaxhighlight>

== 实际应用示例 ==
=== 用户评论表单 ===
<syntaxhighlight lang="html">
<form action="/submit-comment" method="post">
  <label for="userComment">留下您的评论：</label><br>
  <textarea id="userComment" name="comment" rows="5" cols="80" 
            placeholder="请在此输入您的评论..." required></textarea><br>
  <input type="submit" value="提交">
</form>
</syntaxhighlight>

=== 联系表单 ===
<syntaxhighlight lang="html">
<form>
  <label>姓名：<input type="text" name="name"></label><br>
  <label>邮箱：<input type="email" name="email"></label><br>
  <label>留言：<br>
    <textarea name="message" rows="8" cols="60" required></textarea>
  </label><br>
  <button type="submit">发送</button>
</form>
</syntaxhighlight>

== 高级用法 ==
=== 动态调整大小 ===
可以使用JavaScript动态调整文本域大小：

<syntaxhighlight lang="html">
<textarea id="auto-resize" oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'">
输入文本时自动调整高度...
</textarea>
</syntaxhighlight>

=== 与JavaScript交互 ===
获取和设置文本域值：

<syntaxhighlight lang="javascript">
// 获取值
let text = document.getElementById("myTextarea").value;

// 设置值
document.getElementById("myTextarea").value = "新的文本内容";
</syntaxhighlight>

=== 字符计数 ===
显示剩余可输入字符数：

<syntaxhighlight lang="html">
<textarea id="limitedText" maxlength="200" oninput="updateCounter()"></textarea>
<div id="counter">剩余字符数：200</div>

<script>
function updateCounter() {
  const textarea = document.getElementById("limitedText");
  const counter = document.getElementById("counter");
  const remaining = textarea.maxLength - textarea.value.length;
  counter.textContent = `剩余字符数：${remaining}`;
}
</script>
</syntaxhighlight>

== 最佳实践 ==
1. 始终为文本域添加<code><nowiki><label></nowiki></code>标签以提高可访问性
2. 对必填字段使用<code>required</code>属性
3. 为长文本输入提供足够的空间（行数）
4. 使用<code>placeholder</code>属性提供清晰的输入提示
5. 考虑使用CSS禁用调整大小（<code>resize: none</code>）以保持布局稳定

== 浏览器兼容性 ==
所有现代浏览器都完全支持<code><nowiki><textarea></nowiki></code>元素。一些较新的属性（如<code>maxlength</code>）在旧版浏览器中可能有部分支持限制。

== 相关概念 ==
* HTML表单
* 表单验证
* CSS样式表单
* JavaScript表单处理

通过掌握HTML文本域，您可以创建更丰富、更用户友好的表单界面，收集各种类型的用户输入数据。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]