Comment limiter la zone de saisie HTML pour n'accepter que la saisie numérique ?-tutoriel HTML-php.cn

Comment limiter la zone de saisie HTML pour n'accepter que la saisie numérique ?

PHPz

Libérer： 2023-09-01 13:37:02

avant

1406 Les gens l'ont consulté

Comment limiter la zone de saisie HTML pour naccepter que la saisie numérique ?

Dans cet article, nous apprendrons comment restreindre une zone de saisie HTML afin qu'elle n'accepte que la saisie numérique.

Nous utilisons le pour limiter une zone de saisie HTML afin qu'elle n'accepte que les entrées numériques. En utilisant cela, nous obtiendrons un champ de saisie numérique.

Syntaxe

Voici la syntaxe permettant de limiter la zone de saisie HTML à n'accepter que la saisie numérique.

<input type="number">

Copier après la connexion

Exemple

Ce qui suit est un exemple de programme permettant de limiter la zone de saisie HTML pour n'accepter que la saisie numérique -

<!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>

Copier après la connexion

Si nous essayons de saisir une valeur autre qu'un nombre, cela ne sera pas autorisé. Par conséquent, seules les valeurs numériques sont autorisées.

Exemple

Voici un autre exemple de programme permettant de limiter une zone de saisie HTML afin qu'elle n'accepte que la saisie numérique -

<!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>

Copier après la connexion

Après avoir limité la zone de saisie au nombre, si un utilisateur saisit du texte et appuie sur le bouton Soumettre, le message suivant peut s'afficher : "Veuillez saisir un nombre."

Nous pouvons également limiter la valeur du champ de saisie du nombre.

Après avoir limité la zone de saisie aux nombres, si l'utilisateur saisit une valeur supérieure à la valeur limite et clique sur le bouton Soumettre, le contenu suivant s'affichera : "La valeur doit être inférieure ou égale à la valeur limite spécifiée (20) "

Exemple

Voici un autre exemple de programme permettant de limiter une zone de saisie HTML afin qu'elle n'accepte que la saisie numérique -

<!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>

Copier après la connexion

Si vous compilez et exécutez le code ci-dessus, il affichera 4 cases et vous pourrez définir la limite de la valeur minimale 0 à la valeur maximale 5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!