HTML 中的文本区域标签-html教程-PHP中文网

属性

HTML 中的 TextArea 标签示例

示例#4

结论

首页

web前端

html教程

HTML 中的文本区域标签

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:29 PM

html html5 HTML Tutorial HTML Properties HTML tags

tag 是众多 HTML 标签之一。标签格式分为三个主要部分：开始标签()、内容和结束标签()。用户可以通过使用表单中的 HTML 标记创建文本区域来输入多行文本。标签创建一个可以容纳很多字符的文本区域。

如何标签可以在 HTML 中使用吗？

textarea 元素创建使用 cols、rows 或两者等属性指定的区域或空间。 CSS 样式以及高度和宽度属性可以格式化外观和感觉。

语法：

<textarea rows="3" cols="20">
Enter your text here...
</textarea>

登录后复制

属性

标签与所有其他 HTML 标签一样，接受许多其他属性，这些属性在中也很常见。表单元素。它们如下：

autofocus：autofocus 属性确保页面加载时文本区域自动获得焦点。
cols：‘cols’属性指定文本区域的宽度。该值应该是一个正整数。如果不指定，‘cols’的默认值为 20。
disabled：此功能禁用文本区域，将其冻结，并且不接受用户输入更改。禁用文本区域将导致 Tab 键跳过它。
form：‘form’属性指定文本区域所属的表单id。
name：它为文本控件分配一个名称。
占位符：此属性通过提供提示或示例文本来指导应在文本框中写入的内容来帮助用户。
readonly：该属性将文本区域设置为只读模式；也就是说，它不受用户输入的影响或无法更改其内容。
wrap：此功能指定文本区域如何换行文本。如果未指定，则默认值为“soft”。

HTML 中的 TextArea 标签示例

要更多地了解文本区域元素的工作，请查看以下包含的示例标签正在运行，

示例#1

代码：

<form>
<p>Leave your Comment:</p>
<br />
<textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form>

登录后复制

输出：

HTML 中的文本区域标签

上面的例子很简单，演示了的特性。元素。例如，“id”属性是为了可访问性目的。此示例中使用的另一个有趣的功能是 cols 和 rows 属性。

行和列允许程序员设置文本区域大小的边界值，即文本区域将获取的确切空间。使用这些属性有助于跨浏览器支持和格式一致性，因为浏览器默认值可能不同。

示例#2

代码：

<!DOCTYPE html>
<html>
<head>
<title> Textarea HTML Tag Demo </title>
</head>
<body>
<form>
<p>Fill the Detail:</p>
<br />
<textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" required="required">Enter your name</textarea>
<br />
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>

登录后复制

输出：

HTML 中的文本区域标签

上面的示例显示了与一起使用的另一组属性。标签、最大长度和最小长度。 maxlength 指定用户可以在文本区域中输入的最大字符数。所以在这里，用户可以输入“60”个字符，包括特殊字符。

HTML5中添加了最大长度属性； HTML 不支持此属性。文本区域至少需要 10 个字符，由“minlength”属性设置。 “required”属性表示用户不得将文本区域留空才能被视为有效并提交。这是对标签的简单验证。

示例 #3

代码：

<form id="Form1">
<label>Textarea Box 1</label>
<br />
<textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" disabled="disabled"> This is Disabled</textarea>
<br />
<label>Textarea Box 2</label>
<br />
<textarea rows="5" cols="40" required="required"></textarea>
<br />
<label>Textarea Box 3</label>
<br />
<textarea rows="5" cols="40" placeholder="This is readonly textarea" readonly="readonly"></textarea>
<br />
<input type="submit" name="Submit" value="Submit" />
</form>

登录后复制

输出：

观察到“Textarea Box 2”文本区域是必需的文本区域，而“Textarea Box 1”被禁用。

HTML 中的文本区域标签

示例#4

代码：

<form id="label2" action="textareaDemo.html">
<fieldset>
<legend><b>Form 2</b></legend>
<input type="text" name="FN" value="Name" />
<br />
<input type="submit" name="Submit" value="Submit" />
<br />
</fieldset>
</form>
<textarea rows="5" cols="40" form="label2" required="required"></textarea>
<br />
<p>Above Text Area belongs to 'Form 2'</p>

登录后复制

输出：

注意下面的输出。下面的文本区域框是“必填”字段，如上面代码中所述，该字段与表单“Form 2”相关联。因此，当我们尝试提交带有空文本区域的表单时，它会显示一条警报。

HTML 中的文本区域标签