小白都能看懂的 textarea 的用法

最新推荐文章于 2025-09-19 10:14:57 发布

原创最新推荐文章于 2025-09-19 10:14:57 发布 · 5.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

HTML 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了HTML中的textarea元素及其在表单中的应用，包括元素属性详解、多行文本输入以及如何实现动态计算输入数据字数的示例。适合前端学习者，特别是零基础者回顾基础知识。

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

当在 HTML 表单中需要用户输入多行文本时，会使用 <textarea> 元素，它是一个文本域控件。文本域允许用户输入多行文本，例如评论、反馈等长文本内容。以下是 <textarea> 元素的详细用法：

<form>
  <label for="feedback">请输入您的反馈意见：</label>
  <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
  <input type="submit" value="提交">
</form>

在上面的示例中，<textarea> 元素被用于收集用户的反馈意见。下面详细解释每个属性的含义：

1.id：这是元素的唯一标识符，通常与 <label> 元素的 for 属性关联，以提高可用性。

2.name：指定文本域的名称，将在提交表单时用作标识字段的名称。

3.rows 和 cols：这些属性定义文本域的行数和列数。rows 指定文本域显示的行数，cols 指定文本域显示的列数。

4.placeholder：可以设置一个占位符文本，提示用户输入的内容。类似于输入框的 placeholder 属性。

5.readonly：设置为 readonly 将文本域设置为只读，用户可以看到内容但无法修改。

6.disabled：设置为 disabled 将禁用文本域，用户无法与之交互。

7.maxlength：限制用户输入的最大字符数。

8.wrap：定义文本在何处换行。可选值为 soft（在单词边界处换行）和 hard（在指定的列数换行）。

9.autofocus：设置为 autofocus 会在页面加载时自动将焦点设置在文本域上。

10.required：设置为 required 会在提交表单时验证字段是否已填写。

通过使用 <textarea> 元素，你可以方便地收集多行文本输入，为用户提供更大的输入空间。

下面是一个能够动态计算输入的数据字数的零基础前端代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>动态计算输入数据字数</title>
</head>
<body>
  <h1>动态计算输入数据字数示例</h1>
  <p>请输入您的评论：</p>
  
  <textarea id="comment" rows="4" cols="50" oninput="countCharacters()"></textarea>
  
  <p>字数：<span id="charCount">0</span></p>
  
  <script>
    function countCharacters() {
      const textarea = document.getElementById("comment");
      const charCountSpan = document.getElementById("charCount");
      
      const charCount = textarea.value.length;
      charCountSpan.textContent = charCount;
    }
  </script>
</body>
</html>

今天的内容就是这些了，这就是 textarea 的全部用法了，相信零基础的你已经学会了，将上面的示例复制到编辑器中试试把。

希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。