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


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

我們使用<input>標籤來獲取HTML中的使用者輸入。為了限制輸入欄位的範圍,我們使用`min`和`max`屬性,分別指定輸入欄位的最大值和最小值。

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

要設定輸入欄位中的最小字元限制,我們使用<input>的`minlength`屬性。此屬性用於指定輸入<input>欄位的最小字元數。

首先,我們來看看如何在輸入欄位中設定最大字元限制:

語法

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

<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>

更新於:2023年9月2日

67K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.