如何限製表單輸入文字欄位中允許的字元數量？-html教學-PHP中文網

首頁

web前端

html教學

如何限製表單輸入文字欄位中允許的字元數量？

王林

Sep 08, 2023 pm 02:49 PM

表單輸入字元限制欄位數量

如何限製表單輸入文字欄位中允許的字元數量？

在本文中，我們將學習如何限製表單輸入文字欄位中允許的字元數。

我們使用標籤來取得 HTML 中的使用者輸入。為了賦予輸入欄位限制（或範圍），我們使用 min 和 max 屬性，分別指定輸入欄位的最大值和最小值。

要設定輸入欄位中的最大字元限制，我們使用 maxlength 屬性。此屬性用於指定輸入欄位的最大字元數。

要設定輸入欄位中的最小字元限制，我們使用 minlength 屬性。此屬性用於指定輸入欄位的最少字元數。

首先，我們來看看如何設定輸入欄位的最大字元限制 -

文法

以下是設定輸入欄位最大字元限制的語法。

<input maxlength="enter_number">

範例

以下是設定輸入欄位最大字元限制的範例程式 -

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "#">
      Email Id:
      <br>
      <input type = "text" name = "email_id" maxlength = "30" />
      <br>
      Password: <br>
      <input type = "password" name = "password" maxlength = "10" />
      <br>
      <input type = "submit" value ="Submit" />
   </form>
</body>
</html>

設定最小字元數限制

現在，我們來看看如何設定輸入欄位的最小字元限制；

文法

以下是在 JavaScript 中設定輸入欄位最小字元限制的語法 -

<input minlength="enter_number">

範例

以下是在 JavaScript 中設定輸入欄位最小字元限制的範例程式 -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action="#">
      Username:
      <input type="text" name="username"
      minlength="10"><br><br>
      Password:
      <input type="password" name="password"
      minlength="8"><br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

在輸入欄位中使用最大和最小字元

現在讓我們看看如何在輸入欄位中使用最小限製字元和最大限製字元 -

範例

以下是在 JavaScript 中設定輸入欄位最小和最大字元限制的範例程式 -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action="#">
      Username:
      <input type="text" name="username"
      minlength="10" maxlength="20"><br><br>
      Password:
      <input type="password" name="password"
      minlength="8" maxlength="10"><br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

以上是如何限製表單輸入文字欄位中允許的字元數量？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。