在本文中，我們將學習如何限制HTML輸入框，使其只接受數位輸入。
We use the to limit an HTML input box so that it only accepts numeric inputs. By using this, we will get a numeric input field.
Syntax
以下是限制HTML輸入框只接受數字輸入的語法。
<input type="number">
登入後複製
Example
以下是一個範例程序，用於限制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>
登入後複製
如果我們嘗試輸入數字以外的任何值，它將不允許。因此，它嚴格只允許數字值。
Example
Following is another example program to limit an HTML input box so that it only accepts numeric input -
<!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>
登入後複製
After limiting the input box to number, if a user enters text and press submit button, then the following can be seen “Please enter a number.”
We can also limit the value of the number input field.
在將輸入框限制為數字後，如果使用者輸入的值大於限制值並點擊提交按鈕，那麼將會顯示以下內容：「值必須小於或等於指定的限制值（20）」
Example
Following is another example program to limit an HTML input box so that it only accepts numeric input -
<!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。
以上是如何限制HTML輸入框只接受數位輸入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
