Maison >interface Web >tutoriel HTML >Comment limiter la zone de saisie HTML pour n'accepter que la saisie numérique ?
Comment limiter la zone de saisie HTML pour n'accepter que la saisie numérique ?
- PHPzavant
- 2023-09-01 13:37:021433parcourir
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">
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>
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>
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>
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!