資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何限制HTML輸入框，使其只接受數字輸入？
在本文中，我們將學習如何限制HTML輸入框，使其只接受數字輸入。
我們使用<input type="number">來限制HTML輸入框，使其只接受數字輸入。使用此方法，我們將獲得一個數字輸入欄位。
語法
以下是限制HTML輸入框以僅接受數字輸入的語法。
<input type="number">
示例
以下是一個限制HTML輸入框以僅接受數字輸入的示例程式：
<!DOCTYPE html> <html> <center> <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"> <style> input[type=number] { width: 10%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid mediumseagreen; border-radius: 4px; } </style> </head> <body> <h1>Tutorialspoint</h1> <form action = "" method = "get"> Enter your Mobile number - <input type="number"> <br><br> Enter your area Pincode - <input type="number"> <br><br> <input type="submit" value="Submit"> </form> </body> </center> </html>
如果我們嘗試輸入任何非數字值，它將不允許。因此，它嚴格只允許數字值。
示例
以下是另一個限制HTML輸入框以僅接受數字輸入的示例程式：
<!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 = "" method = "get"> Phone Number: <input type="number" name="num" min="1" max="20"><br> <input type="submit" value="Submit"> </form> </body> </html>
限制輸入框為數字後，如果使用者輸入文字並按下提交按鈕，則會顯示“請輸入數字”。
我們還可以限制數字輸入欄位的值。
限制輸入框為數字後，如果使用者輸入的值超過限制並按下提交按鈕，則會顯示“值必須小於或等於指定的限制值(20)”。
示例
以下是另一個限制HTML輸入框以僅接受數字輸入的示例程式：
<!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 = "" method = "get"> <h3>Select the quantity, and we cannot deliver more than 5.</h3><br> Pizza<input type="number" name="num" min="0" max="5"><br> Burger<input type="number" name="num" min="0" max="5"><br> Garlic Bread<input type="number" name="num" min="0" max="5"><br> Pepsi<input type="number" name="num" min="0" max="5"><br> </form> </body> </html>
如果編譯並執行上述程式碼，它將顯示4個框，您可以將限制設定為最小值0到最大值5。
更新於：2023年9月8日
37K+ 瀏覽量
廣告