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

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

王林

發布： 2023-09-08 14:49:02

轉載

1358 人瀏覽過

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

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

我們使用標籤來取得 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中文網其他相關文章！