HTML <textarea> 标签详解与使用实例

<textarea> 是多行纯文本输入控件，适用于用户需要输入较长文本的场景。

一、基本语法与属性

二、基本使用实例

<!-- 基础文本域示例 -->
<form action="/submit" method="post">
    <label for="feedback">用户反馈：</label><br>
    <textarea id="feedback" name="user_feedback" rows="6" cols="50" 
              placeholder="请详细描述您的问题或建议...">
    </textarea>
    <br>
    <input type="submit" value="提交">
</form>

三、常见应用场景实例

四、JavaScript操作实例

<!-- 动态操作文本域 -->
<textarea id="dynamicText" rows="5" cols="50">初始内容</textarea><br>
<button onclick="getTextareaValue()">获取内容</button>
<button onclick="setTextareaValue()">设置内容</button>
<button onclick="clearTextarea()">清空内容</button>

<script>
function getTextareaValue() {
    const textarea = document.getElementById('dynamicText');
    alert('当前内容：' + textarea.value);
}

function setTextareaValue() {
    const textarea = document.getElementById('dynamicText');
    textarea.value = '这是新设置的内容！';
}

function clearTextarea() {
    document.getElementById('dynamicText').value = '';
}
</script>

五、与CSS样式结合

<style>
/* 基础样式 */
.styled-textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    border: 2px solid #3498db;
    border-radius: 8px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical; /* 控制拖拽方向 */
    box-sizing: border-box;
}

/* 焦点状态 */
.styled-textarea:focus {
    outline: none;
    border-color: #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
}

/* 禁用状态样式 */
.styled-textarea:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}
</style>

<textarea class="styled-textarea" placeholder="请输入带样式的文本...">
</textarea>

六、重要注意事项

1. 标签内容：初始文本应放在开始标签和结束标签之间，而不是value属性中
2. 尺寸控制：建议使用CSS的width和height属性替代rows和cols进行精确控制
3. resize属性：可通过CSS的resize属性控制拖拽调整方向（vertical、horizontal、both、none）
4. 表单提交：文本域内容会以name属性指定的字段名随表单提交
5. 换行处理：输入的换行符在提交时会转换为%0D%0A（CRLF）

七、兼容性提示

• 所有现代浏览器都支持<textarea>标签
• HTML5新增属性（如placeholder、required、maxlength）在IE9及以下版本不支持
• 可通过JavaScript为老旧浏览器提供回退支持

总结： <textarea>是HTML表单中处理多行文本输入的标准控件，通过合理的属性配置和样式设计，可以创建出功能完善、用户体验良好的文本输入区域。