Con el HTML5 color input podemos enriquecer considerablemente nuestros formularios.
Este nuevo input de HTML5 nos proporciona una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales de jQuery como veníamos haciendo hasta ahora.
De esta manera con un solo click y una línea de código podemos elegir facílmente un color.
Vamos a ver la sintaxis de una sola línea de este input extraída de su web oficial:
<input name="color" type="color" />
A la paleta de colores se le puede poner un valor por defecto en hexadecimal, por ejemplo el negro sería así: #000000:
<input name="color" type="color" value="#000000" />
Vamos a ver en este ejemplo cómo funciona este input HTML5:
Selecciona un color: <input name="color" type="color" value="#f3f3f3"/>
Os explico el código del ejemplo:
Os pongo una imagen del ejemplo:
En la imagen superior se aprecia la cajita de color gris, esta cajita es el nuevo input color, que tras clickarse se abre una capa selectora con la paleta de colores.
Depende el navegador la paleta de colores tendrá una apariencia y otra. Ahora solo nos queda elegir el color que queramos.
Es muy fácil obtener el valor del color input con PHP, es simplemente capturar el input por POST o GET y listo…
<?php if ($_POST['color']) echo "El color seleccionado es: " .$_POST['color']; ?>
Voy a usar jQuery change() para obtener el valor introducido en el input color de HTML5. Lo po demos ver funcionando en este segundo ejemplo:
$(document).ready(function(){ $("input[name=color]").change(function(){ alert($('input[name=color]').val()); $('#colorseleccionado').val($(this).val()); }); });
Os explico el código:
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.