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

王林
發布: 2023-09-08 14:49:02
轉載
1370 人瀏覽過

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

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

我們使用 標籤來取得 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.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板