Input number en HTML5

El input number es para los nuevos formularios en HTML5. Sólo permite números y se puede introducir el valor o usar los botones para aumentarlo o disminuirlo. Sin embargo, en pantallas táctiles mostrará sólo el pad numérico.

input number validar

Resultado del código

El input number puede usar los atributos max y min para establecer un rango de valores. Además, no será preciso añadir más código para validar si el valor introducido es un número o si está dentro de un rango establecido.

number validar       number validar rango

Ejemplo de validación

A diferencia de otros input, no puede usar el atributo pattern no pudiendo usar una expresión regular.

Si quieres cambiar cuanto sumar o restar al usar las flechas puedes emplear el atributo step.

Atributos más usados

Otros atributos que puede emplear este input que podrían serte útiles:

  • disabled: Permite desactivar el input.
  • form: Permite asociar el form al input introduciendo el id del form.(form = “form-busca”)
  • autocomplete: Esto autorellenará el campo con valores introducidos previamente por el usuario. autocomplete=”off”, autocomplete=”on”)
  • required: Establece que el input debe ser rellenado. Determina si el input tiene que ser rellenado obligatoriamente (required=”required”)
  • placeholder: Leyenda en el input para explicar al usuario como debe introducir el valor.

Y hasta aquí el tutorial de hoy. Espero que os ayude. A seguir picando 🙂