Atributos min y max HTML5 para los input numéricos

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>

</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.