Numéro Entrée HTML

Numéro Entrée HTML
Parfois, tout en créant des formulaires Web, vous avez l'intention de collecter des données numérotées. La grande chose à propos de HTML est qu'il fournit des balises dédiées pour collecter de tels types de données. La balise d'entrée numérique de HTML relève de la catégorie de ces balises, et dans cet article, nous essaierons d'explorer l'utilisation de cette balise HTML en profondeur.

Quelle est la balise d'entrée numérique dans HTML?

La balise d'entrée de numéro dans HTML vous permet d'entrer une entrée numérotée. Cette entrée peut être n'importe quel nombre, y compris des entiers négatifs et non négatifs ainsi que «0». La balise d'entrée de numéro dans HTML vous permet de saisir l'entrée numérotée via le clavier ou de le sélectionner dans la liste fournie par cette balise. De plus, cette balise a également d'autres attributs qui lui sont associés qui sont utilisés pour servir différentes fins. Par exemple, vous pouvez utiliser les attributs «min» et «max» de la balise d'entrée de nombre pour spécifier la limite d'entrée minimale et maximale. De même, vous pouvez utiliser l'attribut «étape» pour spécifier les intervalles d'entrée. Pour en savoir plus sur le fonctionnement de la balise d'entrée de numéro dans HTML, vous devrez passer par les sections précédentes de cet article.

Utilisation de la balise d'entrée de numéro dans HTML:

Pour maîtriser l'utilisation de la balise d'entrée numérique dans HTML, vous devrez comprendre les deux exemples suivants:

Exemple n ° 1: Entrer dans l'âge entre une certaine limite:

Nous concevons cet exemple de telle manière qu'il sera en mesure de collecter l'âge d'un utilisateur dans la limite spécifiée. Le script HTML que nous avons utilisé est illustré dans l'image ci-dessous:


Dans cet exemple, nous avons d'abord défini l'étiquette pour notre entrée numérotée, i.e., Âge. Ensuite, nous avons utilisé la balise d'entrée de nombre pour définir la limite d'âge, que nous avons gardé entre 15 et 30. Cela signifie que ce script HTML demandera à l'utilisateur d'entrer son âge, mais cet âge doit être limité entre 15 et 30 ans. De plus, nous avons ajouté un bouton de soumission à ce script pour le rendre plus présentable.

Lors de l'exécution du script HTML indiqué ci-dessus, la page Web suivante a été affichée dans notre navigateur. Vous pouvez voir que nous avons reçu un champ de saisie numérique dans lequel nous pouvons soit taper un numéro particulier se situant dans la plage spécifiée avec notre clavier, soit même utiliser les touches flèches associées au champ Numéro pour sélectionner l'âge souhaité.


L'image indiquée ci-dessous représente un âge sélectionné au hasard:


De plus, comme la limite d'âge minimum est de 15. Une fois que nous atteignons la limite d'âge minimum, ce nombre sera automatiquement mis en évidence comme indiqué dans l'image suivante, indiquant que nous ne pouvons pas nous déplacer en dessous de cette limite d'âge.


De même, nous ne serons pas non plus autorisés à aller au-delà de la limite d'âge maximale, qui est «30» dans ce cas. Ceci est illustré dans l'image ci-dessous:

Exemple n ° 2: saisir le nombre de pommes avec un intervalle spécifié:

Dans cet exemple, nous vous présenterons un nouvel attribut associé à la balise d'entrée de numéro de HTML, I.e., L'attribut étape. Cet attribut est utilisé pour spécifier les intervalles avec lesquels vous souhaitez augmenter ou diminuer l'entrée numérotée. Pour ce faire, nous avons écrit le script HTML suivant:


Dans cet exemple, nous voulions que l'utilisateur saisisse le nombre de pommes qu'il voulait en kilogrammes en multiples de «2», je.e., Il / elle peut entrer 2, 4, 6, 8, etc. Pour atteindre cette fonctionnalité, nous avons spécifié l'attribut «Step» avec la balise de type d'entrée et avons conservé sa valeur comme «2».

Lorsque nous avons exécuté ce script, on nous a présenté la page Web indiquée dans l'image ci-dessous:


L'image suivante montre que nous avons sélectionné 6 kilogrammes de pommes:


Cependant, dans cet exemple, nous n'avons défini aucune limite inférieure ou supérieure en raison de la possibilité que l'utilisateur puisse finir par sélectionner un nombre négatif (qui serait techniquement invalide), comme indiqué dans l'image ci-dessous:


Pour éviter que cela ne se produise, nous modifierons légèrement le script ci-dessus en utilisant l'attribut «min» pour spécifier que la quantité minimale de pommes ne peut pas être inférieure à 2 kilogrammes comme indiqué dans l'image suivante:


Lorsque nous avons exécuté notre script HTML après avoir apporté cette modification, nous n'avons pas été autorisés à descendre en dessous de 2 kilogrammes, comme indiqué dans l'image ci-dessous:

Conclusion:

Grâce à cet article, nous voulions transmettre l'utilisation de la balise d'entrée de nombre html à nos lecteurs. Nous avons d'abord développé une compréhension de base de cette étiquette en discutant de certains des attributs qui y sont associés. Après cela, nous avons expliqué l'utilisation de cette étiquette à l'aide de deux exemples pertinents. Une fois que vous avez parcouru ce guide, vous comprendrez clairement comment la balise d'entrée de nombre fonctionne dans HTML.