如何在 HTML5 中创建多行输入控制文本区域
概述
文本区域是一个 HTML 标签，用于在其中写入多行文本。因此，可以借助一些预定义的 HTML 属性来控制文本区域内的多行文本。这些 HTML 属性包括 maxlength、minlength、rows、column 和 readonly。通过使用这些属性，我们可以控制文本区域内的文本。
语法
在 HTML 中创建文本区域的语法为 -
<textarea name="" id="" cols="" rows=""></textarea>
算法
步骤 1 − 在文本编辑器中创建 HTML 样板代码。
步骤 2 − 将文本区域标签添加到 HTML 代码主体中。
<textarea></textarea>
步骤 3 − 现在使用 maxlength 属性限制最大长度，并为其分配任意数值。
<textarea maxlength="100"></textarea>
步骤 4 - 文本区域已成功创建，并且将显示在您的浏览器中。
示例
在此示例中，我们创建了一个文本区域，其文本由 maxlength 属性控制。此属性帮助我们完全控制文本区域内写入的文本。通过在文本区域标签中使用此属性，可以限制框内可写入的字符数。在本例中，字符的最大长度为"100"，因此我们不能写入超过给定限制的字符。
<html> <head> <title>Text Multiline Control</title> </head> <body> <h2>Text Box With Maxlength Control</h2> <textarea name="textcontrol" id="" cols="30" rows="10" maxlength="100"></textarea> </body> </html>
算法
步骤 1 - 在文本编辑器中创建 HTML 样板。
步骤 2 - 使用 HTML 文本区域标签在 body 标签内添加文本框
步骤 3 - 现在向文本区域添加 readonly 属性，并向文本框添加行数和列数。
步骤 4 - 为文本区域添加占位符属性，然后在其中添加一些文本。
步骤 5 - 带有只读控件的文本区域已准备就绪，可以在浏览器中查看。
示例
在此示例中，我们创建了一个多行控制的文本区域框，该框具有只读属性，这意味着文本区域内写入的文本不可编辑，只能读取。在此示例中，我们还使用 rows 和 cols 属性固定了文本区域的大小。在这些属性中，行数和列数以数值形式指定。文本预先写在占位符属性中。
<html> <head> <title>Text Multiline Control</title> </head> <body> <h2>Text Box With Read Only, Rows and Cols Control</h2> <textarea name="textcontrol" id="" cols="30" rows="5" readonly placeholder="This is a text box which limits the number of character written inside it. This text box is readonly"></textarea> </body> </html>
结论
多行文本的控制有时对于网站的用户界面至关重要，因为HTML中的文本区域具有随着文本框内字符数量的增加而扩展的属性，这会使网站界面看起来不美观。这些文本框通常用于应用程序的反馈部分，因此通过限制文本框内的字符数量可以避免出现长篇垃圾信息。
