Vamos a repasar el HTML5 range input, es un nuevo elemento de formulario para la entrada de datos que nos ofrece HTML5.
Este input es muy parecido al HTML5 number input en cuanto al formato de datos, la diferentecia radica en que los valores se especifican mediante sliders o barras de desplazamiento.
Voy a explicaros su sintaxis básica tal y como viene en su web oficial:
<input type="range" name="edad" min="18" max="99" step="1" value="30">
Como veréis la sintaxis es muy sencilla, os he puesto los atributos más comunes:
En la imagen de abajo vemos como se representa en los navegadores compatibles con los nuevos input HTML5.
Os pongo esta demo de ejemplo de HTML5 range input en la que veremos como se usa e interactua con las barras de desplazamiento o sliders.
<form name="ejemplo" action="13-html5-range-input.php" method="POST"> Introduce tu edad: <input type="range" name="edad" min="18" max="99" step="1" value="40"> <input type="submit" value="Enviar"> </form> <?php //recojo el valor y lo saco por pantalla if ($_POST['edad']) echo "la edad recibida es: " .$_POST['edad']; ?>
Os explico el código anterior probado en Google Chrome:
En la demo anterior no se representa en ningún lado el valor que estamos asignando con el input range. De momento no hay ningún atributo que nos los represente.
Espero que con el paso de los meses mejoren este tema, poque si no, este elemento estaría huérfano y no sabríamos el valor que estamos asignando.
Para salir del paso he realizado esta segunda demo de ejemplo para obtener el valor del HTML5 input range con jQuery change():
<script type="text/javascript"> $(document).ready(function() { $('#edad').change(function() { $('#valoredad').val($(this).val()); }); }); </script> <form name="ejemplo" action="13-html5-range-input.php" method="POST"> Introduce tu edad: <input id="edad" type="range" name="edad" min="18" max="99" step="1" value="40"> <br> Valor: <input type="text" name="valoredad" id="valoredad" value=""> <br> <input type="submit" value="Enviar"> </form>
Os explico la demo:
Voy a listaros los atributos válidos para este input según la W3C.
En esta url tenéis el listado completo de los nuevos input de HTML5.
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.