如何限制 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-09-08

37K+ 閱讀量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.