如何限制 HTML 表单中文本区域 (textarea) 的字符数?

front end technologyhtmlweb development更新于 2025/4/1 8:44:17

在 HTML 中，我们可以借助各种元素创建表单来接收和存储用户输入的信息。这些元素也称为表单元素，例如:文本框 (textfield)、单选按钮、复选框、下拉列表或组合框、重置按钮和提交按钮。

文本区域 (TextArea) 是可以在表单中创建的元素之一。文本区域 (TextArea) 是一个多行控件，用户可以在其中输入多行多列的数据。

文本区域 (TextArea) 控件用于输入备注、建议、地址信息、电子邮件正文、评论等，其中文本的大小比普通文本框 (TextField) 更大，因为文本框 (TextField) 是单行输入控件，只在一行中输入数据。

示例

让我们了解创建具有默认宽度和高度的文本区域 (TextArea) 的基本 HTML 代码。


<html>
<head><title>Feedback Form..</title>
   <style>
      h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
   </style>
</head>
<body>
   <h1>Feedback Form..</h1>
   <form id="feedback_form">
      <label for="label1">Enter your feedback here:</label>
      <textarea id="t1"> </textarea>
   </form>
</body>
</html>

示例

要设置文本区域的宽度和高度，您可以指定所需的行数和列数。为此，我们可以利用 <textarea> 标签的 rows 和 cols 属性。以下是代码及其输出。


<html>
<head><title>Feedback Form..</title>
   <style>
      h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
   </style>
</head>
<body>
   <h1>Feedback Form..</h1>
   <form id="feedback_form">
      <table>
         <tr>
            <td>
               <label for="label1">Enter your feedback:</label>
            </td>
            <td>
               <textarea id="t1" rows="10" cols="24">Type your valueable feedback here: </textarea>
            </td>
         </tr>
     </table>
   </form>
</body>
</html>

当在文本区域中输入的信息超出其高度时，垂直滚动条将自动激活。

注意 - 默认情况下，我们最多可以在文本区域中输入 5,24,288 个字符。

在某些情况下，需要限制在文本区域中可以输入的字符大小。在这种情况下，我们可以使用 maxlength 属性来控制在文本区域中输入的字符数。

示例

假设，在用户输入其经历、文章或演讲的网站中，字符数必须受到限制。因此，网页设计师可以使用 maxlength 属性来限制在文本区域中输入的字符数。让我们通过一个示例来理解 -


<html>
<body>
   <form id="feedback_form">
      <label for="label1">Enter your feedback (150 words):</label>
      <textarea id="t1" maxlength="150"> </textarea>
   </form>
</body>
</html>

在此程序中，字符数限制设置为 150 个字符，这意味着输入将停止，因为我们不允许输入超过"150"个字符。

我们上面已经讨论过，cols 属性可以指定文本区域的宽度，这意味着我们可以输入的最大列数。但是，如果我们在 <textarea> 标签中同时使用 cols 和 maxlength 属性，那么 cols 属性将仅设置文本区域的宽度，并且无法对字符数施加任何限制，而 maxlength 属性将起作用并设置限制。

示例

您可以尝试此代码 -


<html>
<body>
   <form id="feedback_form">
      <label for="label1">Enter your feedback (150 words):</label>
      <textarea id="t1" cols="20" rows="10" maxlength="5"> </textarea>
   </form>
</body>
</html>