如何限制HTML输入框只接受数字输入？

百变鹏仔 3个月前 (09-22) #HTML

文章标签输入框

在本文中，我们将学习如何限制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输入框只接受数字输入？

Syntax

Example

Example

Example

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8