Atributos min y max HTML5 para los input numéricos y de fecha

Voy a repasar los atributos min y max HTML5 que nos sirven para fijar los valores mínimos y máximos de los input con valor numérico o de fecha.

Los input compatibles con estos 2 atributos HTML5 son: number, range, date, datetime, datetime-local, month, time y week.

Sintaxis de los atributos min y max HTML5

Os pongo la sintaxis de estos 2 atributos HTML5 extraída de su web oficial:

<input type="date" name="dia" min="2000-01-01" max="2014-12-31">

<input type="number" name="cantidad" min="1" max="10">

En la sintaxis superior podéis ver 2 ejemplos que he puesto sobre 2 input de tipo ‘date‘ y ‘number‘. En la primera línea he limitado la fecha del input y en la segunda he limitado el valor a insertar.

Ejemplos de los atributos min y max HTML5

Ahora vamos con un ejemplo de estos atributos min y max para ver las validaciones automáticas que se realizan, cogemos como base del ejemplo la sintaxis anterior.

<form name="formulario" id="formulario" action="035-ejemplo-atributos-min-max-html5.php" method="POST">
 <input type="date" name="dia" min="2000-01-01" max="2014-12-31">
 <input type="number" name="cantidad" min="1" max="10">
</form>

Os explico el ejemplo:

• La limitación que he puesto en el input de tipo tipo ‘date‘ ha sido que la fecha no sea inferior al 1 de enero del año 2000 ni superior al 31 de diciembre de 2014.
• La limitación en el input de tipo ‘number‘ ha sido que el valor sea como mínimo 1 y como máximo 10.

De no cumplir las limitaciones saldrán por pantalla las validaciones automáticas, os pongo unos pantallazos de las validaciones que saldrían en la demo.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.