表单元素-textarea标签-多行文本输入-前端-HTML5-书闪BookChips

84 - 表单元素 - textarea标签 - 多行文本输入

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:11:52

前端 - HTML5 《表单元素 - textarea标签 - 多行文本输入》

在前端开发中，表单是与用户进行交互的重要组成部分。而textarea标签作为 HTML5 表单元素里用于多行文本输入的利器，为用户提供了一个可以输入大量文本内容的区域，比如留言、评论、反馈等场景都少不了它。本文将深入探讨textarea标签的使用方法、属性以及一些实用技巧。

基本用法

textarea标签用于创建一个多行文本输入框，它不像input标签那样是单标签，而是需要有开始标签和结束标签，文本内容就写在这两个标签之间。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea 基本用法</title>
</head>
<body>
    <form action="#">
        <label for="message">请输入留言：</label>
        <br>
        <textarea id="message" name="message" rows="4" cols="50">
            这里可以填写默认文本。
        </textarea>
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这个例子中，我们创建了一个包含textarea的表单。rows属性定义了文本框的行数，cols属性定义了文本框的列数。用户可以在这个文本框中输入多行文本，并且默认显示了一段文本。

常用属性

1. `name`属性

name属性用于标识表单数据的名称，当表单提交时，服务器会根据这个名称来获取相应的数据。例如：

<textarea name="user_comment"></textarea>

2. `id`属性

id属性用于为textarea元素指定一个唯一的标识符，通常用于与label元素关联，增强表单的可访问性。例如：

<label for="user_comment">评论：</label>
<textarea id="user_comment" name="user_comment"></textarea>

3. `rows`和`cols`属性

rows属性指定文本框的行数，cols属性指定文本框的列数。不过需要注意的是，这两个属性在现代布局中更多是起到初始占位的作用，实际的大小可以通过 CSS 来精确控制。例如：

<textarea rows="3" cols="20"></textarea>

4. `placeholder`属性

placeholder属性用于在文本框中显示一段提示信息，当用户开始输入时，提示信息会自动消失。例如：

<textarea placeholder="请输入您的建议"></textarea>

5. `disabled`属性

disabled属性用于禁用textarea，用户无法在禁用的文本框中输入内容。例如：

<textarea disabled>这个文本框是禁用的。</textarea>

6. `readonly`属性

readonly属性使文本框变为只读状态，用户可以看到文本框中的内容，但无法修改。例如：

<textarea readonly>这是一段只读文本。</textarea>

结合 CSS 进行样式控制

虽然rows和cols属性可以设置文本框的初始大小，但在实际开发中，我们通常会使用 CSS 来更灵活地控制textarea的样式。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea 样式控制</title>
    <style>
        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none; /* 禁止用户调整文本框大小 */
            font-size: 16px;
        }
    </style>
</head>
<body>
    <form action="#">
        <label for="description">产品描述：</label>
        <br>
        <textarea id="description" name="description"></textarea>
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这个例子中，我们使用 CSS 为textarea设置了宽度、高度、内边距、边框、圆角等样式，并且通过resize: none禁止用户调整文本框的大小。

总结

属性	描述
`name`	标识表单数据的名称，用于服务器获取数据
`id`	为元素指定唯一标识符，可与`label`关联
`rows`	指定文本框的行数
`cols`	指定文本框的列数
`placeholder`	显示提示信息
`disabled`	禁用文本框
`readonly`	使文本框变为只读状态

通过以上的介绍，相信你已经对textarea标签有了更深入的了解。在实际开发中，合理运用textarea标签及其属性，结合 CSS 进行样式控制，可以为用户提供更好的表单输入体验。

84 - 表单元素 - textarea标签 - 多行文本输入

前端 - HTML5 《表单元素 - textarea标签 - 多行文本输入》

基本用法

常用属性

1. name属性

2. id属性

3. rows和cols属性

4. placeholder属性

5. disabled属性

6. readonly属性