資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何限制表單輸入文字欄位中允許的字元數？
在本文中，我們將學習如何限制表單輸入文字欄位中允許的字元數。
我們使用<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+ 次瀏覽
廣告