Número Entrada HTML

Número Entrada HTML
A veces, mientras crea formularios web, tiene la intención de recopilar datos numerados. Lo mejor de HTML es que proporciona etiquetas dedicadas para recopilar tales tipos de datos. La etiqueta de entrada numérica de HTML se encuentra en la categoría de tales etiquetas, y en este artículo, intentaremos explorar el uso de esta etiqueta HTML en profundidad.

¿Cuál es la etiqueta de entrada numérica en HTML??

La etiqueta de entrada de número en HTML le permite ingresar una entrada numerada. Esta entrada puede ser cualquier número, incluidos enteros negativos y no negativos, así como "0". La etiqueta de entrada de número en HTML le permite ingresar la entrada numerada a través del teclado o seleccionarla de la lista proporcionada por esta etiqueta. Además, esta etiqueta también tiene algunos otros atributos asociados con ella que se utilizan para servir diferentes propósitos. Por ejemplo, puede usar los atributos "min" y "máximo" de la etiqueta de entrada de número para especificar el límite de entrada mínimo y máximo. Del mismo modo, puede usar el atributo "paso" para especificar los intervalos de entrada. Para obtener más información sobre cómo funciona la etiqueta de entrada numérica en HTML, tendrá que pasar por las secciones anteriores de este artículo.

Uso de la etiqueta de entrada numérica en html:

Para dominar el uso de la etiqueta de entrada de números en HTML, deberá comprender los siguientes dos ejemplos:

Ejemplo # 1: Ingresar la edad entre un cierto límite:

Diseñaremos este ejemplo de tal manera que pueda recolectar la edad de un usuario dentro del límite especificado. El script HTML que hemos usado se muestra en la imagen a continuación:


En este ejemplo, primero hemos definido la etiqueta para nuestra entrada numerada, yo.mi., Edad. Luego, usamos la etiqueta de entrada numérica para definir el límite de edad, que mantuvimos entre 15 y 30. Significa que este script HTML le pedirá al usuario que ingrese su edad, pero esa edad debe estar limitada entre 15 y 30. Además, hemos agregado un botón de envío a este script para que parezca más presentable.

Al ejecutar el script HTML que se muestra arriba, la siguiente página web se mostró en nuestro navegador. Puede ver que se nos ha proporcionado un campo de entrada de números en el que podemos escribir un número particular que se encuentra dentro del rango especificado con nuestro teclado o incluso podemos usar las teclas de flecha asociadas con el campo de entrada de números para seleccionar la edad deseada.


La imagen que se muestra a continuación representa una edad seleccionada al azar:


Además, dado que el límite de edad mínimo es 15, no podremos escribir nada debajo de él ni poder seleccionar un número inferior a 15 utilizando las flechas. Una vez que alcancemos el límite de edad mínima, ese número se resaltará automáticamente como se muestra en la siguiente imagen, lo que indica que no podemos movernos por debajo de este límite de edad.


Del mismo modo, tampoco se nos permitirá ir más allá del límite de edad máximo, que es "30" en este caso. Esto se muestra en la imagen que se muestra a continuación:

Ejemplo # 2: ingresar el número de manzanas con un intervalo especificado:

En este ejemplo, le presentaremos un nuevo atributo asociado con la etiqueta de entrada numérica de HTML, I.mi., el atributo de paso. Este atributo se usa para especificar los intervalos con los que desea aumentar o disminuir la entrada numerada. Para hacer eso, hemos escrito el siguiente script HTML:


En este ejemplo, queríamos que el usuario ingresara la cantidad de manzanas que él/ella quería en kilogramos en múltiplos de "2", yo.mi., Él/ella puede ingresar 2, 4, 6, 8, y así sucesivamente. Para lograr esta funcionalidad, hemos especificado el atributo de "paso" con la etiqueta de tipo de entrada y hemos mantenido su valor como "2".

Cuando ejecutamos este script, se nos presentó la página web que se muestra en la imagen a continuación:


La siguiente imagen muestra que hemos seleccionado 6 kilogramos de manzanas:


Sin embargo, en este ejemplo, no definimos ningún límite inferior o superior debido a la posibilidad de que el usuario termine seleccionando un número negativo (que técnicamente no sería válido), como se muestra en la imagen a continuación:


Para evitar que esto suceda, modificaremos ligeramente el script anterior haciendo uso del atributo "min" para especificar que la cantidad mínima de manzanas no puede ser inferior a 2 kilogramos como se muestra en la siguiente imagen:


Cuando ejecutamos nuestro script HTML después de hacer esta modificación, no se nos permitió ir por debajo de 2 kilogramos, como se muestra en la imagen a continuación:

Conclusión:

A través de este artículo, queríamos transmitir el uso de la etiqueta de entrada numérica oin html a nuestros lectores. Primero desarrollamos una comprensión básica de esta etiqueta discutiendo algunos de los atributos asociados con ella. Después de eso, explicamos el uso de esta etiqueta con la ayuda de dos ejemplos relevantes. Una vez que pase por esta guía, comprenderá claramente cómo funciona la etiqueta de entrada de número en HTML.