Share
En este tutorial, veremos cómo presentar formularios HTML5 a los navegadores modernos, mientras compensamos los navegadores más antiguos utilizando una combinación de Webforms2, Modernizr, jQuery UI y una variedad de complementos de jQuery..
Los formularios con HTML5 proporcionan una gran cantidad de marcado semántico y eliminan la necesidad de una gran cantidad de JavaScript.
Uno de los primeros esfuerzos hacia HTML5 fue Web Forms 2.0 de WHATWG, originalmente llamado XForms Basic. La especificación introdujo nuevos controles de formulario y validación, entre otras cosas. Más tarde, se incorporó a HTML5 y posteriormente se eliminó el modelo de repetición, lo que resulta en lo que hoy conocemos como HTML5 Forms..
El problema siempre presente, la compatibilidad con versiones anteriores, sigue siendo un dolor de cabeza, desafortunadamente. Los desarrolladores tienen que lidiar con el temido Internet Explorer, que, como habrás adivinado, no proporciona mucho apoyo para el último avance en formularios, incluso en la última versión beta disponible de IE9. Versiones anteriores de IE? Fagetaboutit.
No obstante, queremos usar estas nuevas funciones, y usarlas, ¡lo haremos! Hoy vamos a ver algunos de estos nuevos elementos. Comprobaremos si el navegador es compatible con estas características y, de no ser así, proporcionar recursos alternativos mediante CSS y JavaScript..
Proporcionaremos reservas solo a los navegadores que no admiten formularios HTML5 o ciertas partes de ellos. Pero en lugar de confiar en el rastreo del navegador, la técnica adecuada es utilizar la detección de características. Usaremos la popular biblioteca Modernizr..
Modernizr es una pequeña biblioteca de JavaScript que prueba el navegador actual con una gran cantidad de características HTML5 y CSS3.
Si desea obtener más información acerca de Modernizr, puede consultar el tutorial premium "A Crash-Course in Modernizr" disponible en Tuts + Marketplace.
Webforms2 es una biblioteca de JavaScript de Weston Ruter, que proporciona una implementación en varios navegadores de la versión "anterior" de formularios HTML5, la especificación "WHATWG Web Forms 2.0"..
Lo utilizaremos para validar y ampliar la funcionalidad de los elementos actuales..
La especificación describe el rango de entrada como un control impreciso para establecer el valor del elemento en una cadena que representa un número.
Aquí hay una vista previa de cómo se ve en Opera 10.63:
Para proporcionar un respaldo para otros navegadores, utilizaremos el control deslizante de jQuery UI.
primero, creamos nuestra función de inicialización, que crea el control deslizante desde el elemento de rango de entrada.
Accentsconagua
var initSlider = function () $ ('input [type = range]'). each (function () var $ input = $ (este); var $ slider = $ (''); var step = $ input.attr ('step'); $ input.after ($ slider) .hide (); $ slider.slider (min: $ input.attr ('min'), max: $ input.attr ('max'), step: $ input.attr ('step'), change: function (e, ui) $ (this) .val (ui.value);); ); ; Creamos un nuevo <div> elemento para cada una de nuestras entradas de rango, y llamar al control deslizante en ese nodo. Esto se debe a que el control deslizante de jQuery UI no funcionará llamándolo directamente en el elemento de entrada.
Tenga en cuenta que estamos obteniendo atributos de la entrada, como
mínimo máximoypaso,, y luego los están utilizando como parámetros para el control deslizante. Esto ayuda a nuestro control deslizante alternativo a imitar el control deslizante HTML5 real en funcionalidad.
Siguiente, utilizaremos Modernizr para determinar si el navegador actual admite este tipo de entrada. Modernizr añade clases al elemento de documento (html), lo que le permite apuntar a la funcionalidad específica del navegador en su hoja de estilo. También crea un objeto de JavaScript global homónimo que contiene propiedades para cada característica: si un navegador lo admite, la propiedad evaluará cierto y si no, será falso.
Con ese conocimiento, para detectar soporte para tipos de entrada, usaremos Modernizr.inputtypes [tipo].
if (! Modernizr.inputtypes.range) $ (document) .ready (initSlider); ;
Si no hay soporte para el rango de entrada, adjuntamos el initSlider funciona para jQuery document.ready, para inicializar nuestra función después de que la página se haya cargado.
Así es como debería verse el control deslizante en un navegador sin soporte nativo para el rango de entrada.
Para citar a Mark Pilgrim:
Pedir un número es más complicado que pedir una dirección de correo electrónico o web.
Es por eso que se nos proporciona un control de formulario separado que trata específicamente con los números: el control numérico, también denominado paso a paso numérico.
En el momento de escribir este artículo, es compatible con los navegadores basados en Opera y Webkit; Aquí hay una instantánea de Opera 10.6.
Debido a que jQuery no proporciona un control numérico, usaremos un complemento jQuery de Brant Burnett, creado como un widget de interfaz de usuario jQuery.
Implementamos la misma técnica que antes; construya la función para crear el control de giro, pruebe con Modernizr y adjunte la función a $ (documento) .ready.
var initSpinner = function () $ ('input [type = number]'). each (function () var $ input = $ (this); $ input.spinner (min: $ input.attr ('min' ), max: $ input.attr ('max'), step: $ input.attr ('step'));); ; if (! Modernizr.inputtypes.number) $ (document) .ready (initSpinner); ; Porque las entradas de números también soportan mínimo máximo y paso, obtenemos los atributos del campo, y los usamos como parámetros para inicializar el complemento numérico del spinner.
Y nuestro widget de reserva se ve así:
No hay menos de seis tipos de entrada para servir como seleccionadores de fecha.
En el momento de escribir este artículo, el único navegador que los admite correctamente es Opera, versiones 9+.
Por ahora, solo proporcionaremos respaldo para el fecha de entrada, utilizando el jQuery UI Datepicker. Siéntase libre de usar cualquier otro complemento para imitar completamente la funcionalidad del selector de fecha HTML5 en su implementación.
var initDatepicker = function () $ ('input [type = date]'). each (function () var $ input = $ (this); $ input.datepicker (minDate: $ input.attr ('min' ), maxDate: $ input.attr ('max'), dateFormat: 'yy-mm-dd');); ; if (! Modernizr.inputtypes.date) $ (document) .ready (initDatepicker); ; 
En este momento, ningún navegador proporciona soporte para el color. entrada. Entonces, hasta que se pongan al día, todos necesitarán usar nuestra técnica alternativa..
Usaremos el plugin jQuery ColorPicker de Stefan Petre, ya que la interfaz de usuario jQuery aún no incluye el paquete base.
var initColorpicker = function () $ ('input [type = color]'). each (function () var $ input = $ (this); $ input.ColorPicker (onSubmit: function (hsb, hex, rgb, el) $ (el) .val (hex); $ (el) .ColorPickerHide (););); ; if (! Modernizr.inputtypes.color) $ (document) .ready (initColorpicker); ; Y nuestro resultado:
El nuevo buscar el tipo de entrada se usa implícitamente para la semántica, pero podría proporcionar muchas funcionalidades interesantes en el futuro.
Actualmente, solo los navegadores basados en Webkit ofrecen soporte para esta característica. La especificación también soporta un resultados atributo para mostrar una serie de términos buscados en un menú desplegable.
Debería verse así en Safari en OS X:
El resto de los navegadores muestran esto como un campo de texto estándar, por lo que puede usarlo con confianza con el marcado estándar.
Estos dos tipos de entrada, url y correo electrónico, Se utilizan para fines de validación. Pueden ser particularmente útiles en los navegadores móviles, donde la distribución del teclado en pantalla se puede cambiar para adaptarse al campo enfocado. Esto ya está implementado en Safari en iOS (iPhone, iPad, iPod) y algunas versiones de Android.
Estos tipos de entrada pueden ser implementados por Webforms2 en otros navegadores..
Puede utilizar libremente estos tipos en sus nuevos proyectos, ya que se convierten en simples cuadros de texto. En su teléfono, encontrará que el teclado cambia en consecuencia, si suministra estos tipos a sus entradas.
La nueva especificación introduce el muy práctico necesario atributo. En lugar de usar JavaScript sofisticado para ocuparnos de nuestros campos requeridos, ahora podemos usar este atributo fácilmente.
Para los navegadores que no admiten este atributo, podemos usar de nuevo Webforms2. Entonces, como lo hemos incluido desde el principio, no hay nada de qué preocuparse..
Nota: Asegúrese de asignar un nombre atribuir a sus elementos de formulario, o la necesario atributo no tendrá efecto.
los modelo atributo se utiliza para la validación de campo y acepta valores solo si coinciden con un formato específico, definido con expresiones regulares. Si el valor introducido no coincide con el patrón, el formulario no se enviará.
Por ejemplo, para validar un número de teléfono, tendríamos que usar lo siguiente modelo, o expresión regular:
los modelo atributo puede implementarse en navegadores que no lo admiten, mediante el uso de Webforms2.
los enfoque automático el atributo hace exactamente lo que dice: enfoca automáticamente uno de nuestros controles. Actualmente es compatible con navegadores basados en Webkit (Safari, Chrome, etc.) y Opera. Recuerde: solo un control de formulario puede recibir este atributo.
Webforms2 se encarga de la implementación en navegadores no compatibles..
los marcador de posición atributo es algo que hemos estado haciendo con JavaScript durante años. Agrega una información sobre el campo, como una breve descripción, que desaparece cuando el campo está enfocado..
Este atributo es compatible con los últimos navegadores Beta Firefox y Webkit..
Para imitar el comportamiento en navegadores antiguos, usaremos el plugin Placehold jQuery, del Laboratorio de Diseño de Viget..
var initPlaceholder = function () $ ('input [placeholder]'). placehold (); ; if (! Modernizr.input.placeholder) $ (document) .ready (initPlaceholder); ; los mínimo máximo y paso los atributos de entrada especifican restricciones para ciertos controles de formulario, como el selector de fecha, el número y el rango. Seguramente puedes adivinar el propósito de min y max de sus nombres. los paso atributo especifica el rango múltiple para cada clic, o "paso". Por ejemplo, si el valor del paso es 2, los valores aceptados podrían ser 0, 2, 4, etc..
Estos atributos solo son compatibles con los navegadores Opera y Webkit en este momento, y se implementan, como alternativa para otros navegadores, por Webforms2.
Hoy hemos aprendido que crear formularios y proporcionar respaldo para la mayoría de las nuevas adiciones es una tarea bastante fácil. Si la gente todavía está tratando de asustarte por el uso de HTML5 hoy en día, no les prestes atención; Comience a usar las increíbles herramientas que tiene a su disposición ahora mismo.!
Asegúrate también de revisar los fantásticos html5Widgets de Zoltan "Du Lac" Hawryluk, que ofrecen soluciones similares, con widgets de JavaScript nativos.
