Una mirada a los formularios de entrada de HTML5 Formas Fecha, color y rango

Los formularios se encuentran en todas partes en los sitios web. Facebook, Twitter, Google (solo para nombrar unos pocos) requieren que iniciemos sesión o nos registremos en el sitio a través de un formulario, de hecho, también usamos un formulario para twittear y actualizar el estado de los sitios sociales. En breve, El formulario es una parte muy importante para poder interactuar con un sitio web..

Un formulario web se construye con entradas, en el pasado, solo tenemos algunas opciones para los tipos de entrada; como texto, contraseña, radio, caja y enviar. Ahora, HTML5 viene con grandes mejoras e introduce muchos nuevos tipos de entrada en la especificación.

Entonces, en este post vamos a profundizar en algunas de las nuevas piezas interesantes de la Formularios HTML5 que creemos que deberías probarlos; vamos a verlos.

Selector de fechas

Lo primero que nos gustaría echar un vistazo es el selector de fecha. La fecha de selección es una cosa común que puede encontrar en el formulario de registro, particularmente en algunos sitios o aplicaciones como vuelos y reservas de hoteles.

Hay muchas bibliotecas de JavaScript para crear un selector de fechas. Ahora, también podemos crear uno de una manera mucho más fácil con la entrada HTML5 fecha, como sigue;

los selector de fechas en HTML5 básicamente funciona muy similar a cómo lo hicieron las bibliotecas de JavaScript; cuando nos centramos en el campo, aparecerá un calendario y luego podremos navegar por los meses y años para seleccionar la fecha..

Sin embargo, cada navegador que actualmente soporta el fecha el tipo de entrada, es decir, Chrome, Opera y Safari, muestra este tipo de entrada de manera un poco diferente, lo que potencialmente conduce a un problema de inconsistencia en la experiencia del usuario, y aquí es cómo se ve;

Algunas diferencias notables se pueden ver de un vistazo en la captura de pantalla anterior; La Ópera usó la abreviatura de tres letras en inglés para el nombre de los días: Sol, Lun, Jue, etc. Mientras que Chrome usó mi idioma local, el Safari, por otro lado, funciona de forma bastante extraña, no muestra un calendario. en absoluto.

También hay algunos nuevos entrada tipos para Seleccione la fecha o la hora más específicamente; mes, semana, hora, fecha y hora y datetime-local, que estamos seguros de que la palabra clave en sí es bastante descriptiva para decir lo que hace.

Puede verlos todos en acción desde el enlace a continuación, pero asegúrese de verlos en Opera 11 y versiones posteriores, ya que, al momento de escribir, es el único navegador que admite todos esos tipos de entrada.

• Demostración de Datepicker

Selector de color

Selector de color a menudo es necesario en ciertas aplicaciones basadas en web, como este generador de gradiente CSS3, pero durante todo este tiempo los desarrolladores web también dependen de una biblioteca de JavaScript, como jsColor, para hacer el trabajo. Pero ahora podemos crear un selector de color de navegador nativo con HTML5 color tipo de entrada;

Una vez más, los navegadores, en este caso Chrome y Opera, hacen que este tipo de entrada sea ligeramente diferente;

La Opera primero muestra la opción de color básico al hacer clic, así como el formato hexadecimal del color seleccionado en un menú desplegable, mientras que Chrome mostrará directamente la paleta de colores en una nueva ventana cuando se haga clic..

Además, también podemos establecer el color por defecto con el valor atributo, de la siguiente manera;

De esa manera, cuando se ve en los navegadores no compatibles, el entrada se degradará en un campo de texto y se verá el valor predeterminado que puede dar una especie de sugerencia para los usuarios sobre lo que se debe ingresar en el campo.

Mostrar el valor del color

En lugar de abrir Photoshop solo para copiar el maleficio En este formato de color, puede crear una herramienta simple en este tipo de entrada para hacer el trabajo, ya que el color generado ya está en hexadecimal, esto sería realmente fácil;

Primero, añadimos ID selector de color a la entrada y también añadimos un vacío div con identificación hexcolor Junto a él para contener el valor.

Necesitamos el jQuery vinculado en el cabeza de nuestro documento. Luego almacenamos el valor del color y el recién agregado. div en una variable, como tal;

 var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); 

Obtener el valor inicial de la #selector de color;

 hexcolor.html (color); 

... y, por último, cambiar el valor cuando también se cambia el color elegido;

 $ ('# colorpicker'). on ('change', function () hexcolor.html (this.value);); 

Eso es; ahora vamos a verlo en acción.

• Colorpicker Demo

Distancia

los distancia El tipo de entrada nos permite agregar un control deslizante en el navegador para seleccionar el número en un rango que también podemos encontrar en jQuery UI.

El fragmento anterior es básico para la implementación de distancia tipo de entrada. También podemos cambiar la orientación del control deslizante a vertical usando CSS, de la siguiente manera;

 entrada [tipo = rango] ancho: 20px; altura: 200px; -webkit-apariencia: deslizante-vertical;  

Además, podemos configurar el min y max rango de los números, por ejemplo;

En el siguiente fragmento ponemos la min a cero y 225 para el maximo Cuando no se especifican explícitamente, por defecto el navegador tomará 0 por lo mínimo a 100 para el máximo.

Mostrar el número

Sin embargo, hay una restricción, el número es invisible, no podemos ver el número / valor generado desde el control deslizante en el navegador. Para mostrar el número necesitamos agregar un poco de JavaScript o jQuery, y aquí es cómo lo hacemos;

Primero agregamos un vacío div al lado de la entrada, el estilo div lo suficiente para que parezca una caja.

Luego, coloque el siguiente código que hará lo mismo que el código anterior en el selector de color fuerte, excepto Ahora obtenemos el valor del control deslizante.

 $ (function () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider'). change (function ( ) output.html (this.value););); 

Ahora puedes ver la demo. Solo un recordatorio, vea la demostración en estos navegadores: Chrome, Opera y Safari, ya que Firefox e IE no son compatibles con distancia tipo de entrada en el momento.

• Demostración de rango

Ultimas palabras

Está claro que HTML5 facilita nuestras vidas al introducir muchos nuevos tipos de entrada. Pero como cualquier otra característica de HTML5, el soporte es muy limitado, especialmente en los navegadores más antiguos, por lo que deberíamos usar estas nuevas características con cautela, especialmente los nuevos tipos de entrada que hemos analizado en esta publicación; Fecha, color y rango.

Pero en última instancia, esperamos que ahora tengas más información sobre Formularios HTML5. Gracias por leer este post, y esperamos que lo hayan disfrutado..

• Manifestación
• Descargar fuente

Otras lecturas

A continuación se muestran algunos enlaces útiles para que pueda profundizar en los formularios HTML..

• Nuevas características de formulario en HTML5 - Opera Dev.
• El estado actual de las formas HTML5 - Wufoo
• Atributos del formulario HTML5 - w3school.org
• ¿Cuándo puedo usar formularios HTML5? - CanIUse.com