小白都能看懂的 textarea 的用法

40 阅读2分钟

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

这篇文章是关于 标签的用法,相信零基础的前端初学者看了就会用,

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

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

在上面的示例中, 元素被用于收集用户的反馈意见。让我们详细解释每个属性的含义:

1.id:这是元素的唯一标识符,通常与 元素的 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 会在提交表单时验证字段是否已填写。

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

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

<!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 的全部用法了,相信零基础的你已经学会了,将上面的示例复制到编辑器中试试把。

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

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