Share
Dans ce didacticiel, nous allons voir comment servir les formulaires HTML5 aux navigateurs modernes, tout en compensant les navigateurs plus anciens en utilisant une combinaison de Webforms2, Modernizr, de l'interface utilisateur jQuery et de divers plugins jQuery..
Les formulaires utilisant HTML5 génèrent une grande quantité de balises sémantiques et suppriment le recours à beaucoup de JavaScript..
L'un des premiers efforts en matière de HTML5 a été le Web Forms 2.0 du WHATWG, appelé à l'origine XForms Basic. La spécification a introduit de nouveaux contrôles de formulaire et validation, entre autres choses. Plus tard, il a été incorporé à HTML5 et a ensuite été dépouillé du modèle de répétition, pour aboutir à ce que nous connaissons aujourd'hui sous le nom de HTML5 Forms..
Le problème omniprésent, la compatibilité ascendante, reste malheureusement toujours un casse-tête. Les développeurs doivent faire face à Internet Explorer tant redouté, qui, comme vous l’auriez peut-être deviné, ne fournit pas beaucoup d’aide pour les dernières avancées en matière de formulaires, même dans la dernière version bêta disponible d’IE9. Anciennes versions d'IE? Fagetaboutit.
Néanmoins, nous souhaitons utiliser ces nouvelles fonctionnalités, et nous les utiliserons! Aujourd'hui, nous allons examiner certains de ces nouveaux éléments. Nous vérifierons si le navigateur prend en charge ces fonctionnalités et, dans le cas contraire, fournissons des solutions de secours à l'aide de CSS et de JavaScript..
Nous fournirons des solutions de remplacement uniquement aux navigateurs qui ne prennent pas en charge les formulaires HTML5 ou certaines parties de ceux-ci. Mais au lieu de compter sur le reniflement du navigateur, la technique appropriée consiste à utiliser la détection de fonctionnalités. Nous utiliserons la bibliothèque populaire Modernizr.
Modernizr est une petite bibliothèque JavaScript qui teste le navigateur actuel par rapport à une multitude de fonctionnalités HTML5 et CSS3..
Si vous souhaitez en savoir plus sur Modernizr, vous pouvez consulter le didacticiel premium "Un cours intensif en vidéo dans Modernizr" disponible sur le marché Tuts +..
Webforms2 est une bibliothèque JavaScript de Weston Ruter, qui fournit une implémentation inter-navigateur de la version "précédente" des formulaires HTML5, la spécification "WHATWG Web Forms 2.0"..
Nous allons l'utiliser pour la validation et l'extension de fonctionnalités pour les éléments actuels.
La spécification décrit l’entrée de plage comme un contrôle imprécis pour définir la valeur de l'élément sur une chaîne représentant un nombre.
Voici un aperçu de son apparence dans Opera 10.63:
Pour fournir une solution de secours aux autres navigateurs, nous utiliserons le widget curseur de jQuery UI..
Premier, nous créons notre fonction d'initialisation, qui crée le curseur à partir de l'élément de plage d'entrée.
Accentsconagua
var initSlider = function () $ ('input [type = plage]'). each (function () var $ input = $ (ceci); 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'), modification: function (e, ui) $ (this) .val (ui.value);); ); ; Nous créons un nouveau <div> élément pour chacune de nos entrées de plage et appelez le curseur sur ce nœud. En effet, le curseur de l'interface utilisateur de jQuery ne fonctionnera pas en l'appelant directement sur l'élément input..
Notez que nous obtenons des attributs de l'entrée, tels que
min maxetétape,, et les utilisent ensuite comme paramètres du curseur. Cela aide notre curseur de repli à imiter le véritable curseur HTML5 dans ses fonctionnalités..
Suivant, nous utiliserons Modernizr pour déterminer si le navigateur actuel prend en charge ce type de saisie. Modernizr ajoute des classes à l'élément de document (html), vous permettant de cibler des fonctionnalités spécifiques du navigateur dans votre feuille de style. Il crée également un objet JavaScript global portant le même nom et contenant les propriétés de chaque fonctionnalité: si un navigateur le prend en charge, la propriété sera évaluée comme suit: vrai et sinon, ce sera faux.
Avec cette connaissance, pour détecter la prise en charge des types d'entrée, nous allons utiliser Modernizr.inputtypes [type].
if (! Modernizr.inputtypes.range) $ (document) .ready (initSlider); ;
S'il n'y a pas de support pour l'entrée de plage, nous attachons le initSlider fonction à jQuery document.ready, initialiser notre fonction après le chargement de la page.
Voici à quoi devrait ressembler le curseur dans un navigateur sans prise en charge native de l'entrée de plage..
Pour citer Mark Pilgrim:
Demander un numéro est plus difficile que de demander une adresse électronique ou une adresse Web..
C'est pourquoi nous avons fourni un contrôle de formulaire séparé qui traite spécifiquement des nombres: le sélecteur numérique, également appelé stepper numérique..
Au moment d'écrire ces lignes, il est pris en charge par les navigateurs basés sur Opera et Webkit. voici un aperçu de Opera 10.6.
Comme jQuery ne fournit pas de spinner numérique, nous utiliserons plutôt un plugin jQuery de Brant Burnett, construit sous la forme d'un widget d'interface utilisateur jQuery..
Nous mettons en œuvre la même technique que précédemment; créez la fonction pour créer le disque, testez avec Modernizr et attachez la fonction à $ (document) .ready.
var initSpinner = function () $ ('input [type = nombre]'). each (function () var $ input = $ (this); $ input.spinner (min: $ input.attr ('min' ), max: $ input.attr ('max'), étape: $ input.attr ('step'));); ; if (! Modernizr.inputtypes.number) $ (document) .ready (initSpinner); ; Parce que les entrées numériques prennent également en charge min max et étape, nous obtenons les attributs du champ et les utilisons comme paramètres pour initialiser le plugin numérique spinner.
Et notre widget de repli ressemble à ceci:
Il n’ya pas moins de six types d’entrée pour servir de sélecteur de date.
Au moment de la rédaction de cet article, le seul navigateur qui les prend correctement en charge est Opera, versions 9.+.
Pour le moment, nous ne fournirons que la solution de rechange pour le rendez-vous amoureux entrée, en utilisant le Datepicker de l’interface utilisateur jQuery. N'hésitez pas à utiliser n'importe quel autre plug-in pour imiter complètement la fonctionnalité de l'entrée du sélecteur de date HTML5 dans votre implémentation.
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); ; 
À l'heure actuelle, aucun navigateur ne prend en charge la couleur contribution. Donc, jusqu'à ce qu'ils se rattrapent, ils devront tous utiliser notre technique de secours.
Nous utiliserons le plugin ColorPicker jQuery de Stefan Petre, car l'interface utilisateur de jQuery ne fournit pas encore le pack de base..
var initColorpicker = function () $ ('input [type = couleur]'). 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); ; Et notre résultat:
Le nouveau chercher Le type d'entrée est utilisé implicitement pour la sémantique, mais pourrait fournir de nombreuses fonctionnalités intéressantes dans le futur..
Actuellement, seuls les navigateurs Webkit offrent une prise en charge de cette fonctionnalité. La spécification prend également en charge une résultats attribut pour afficher un nombre de termes recherchés dans une liste déroulante.
Cela devrait ressembler à ceci sur Safari sous OS X:
Le reste des navigateurs l'affiche sous la forme d'un champ de texte standard. Vous pouvez donc l'utiliser en toute confiance avec le balisage standard..
Ces deux types d'entrée, url et email, sont utilisés à des fins de validation. Ils peuvent être particulièrement utiles dans les navigateurs mobiles, où la disposition du clavier à l'écran peut être modifiée pour s'adapter au champ ciblé. Ceci est déjà implémenté dans Safari sur iOS (iPhone, iPad, iPod) et certaines versions d’Android..
Ces types d'entrées peuvent être implémentés par Webforms2 dans d'autres navigateurs..
Vous pouvez utiliser librement ces types dans vos nouveaux projets, dans la mesure où ils se replient dans de simples zones de texte. Sur votre téléphone, vous constaterez que le clavier change en conséquence, si vous fournissez ces types à vos entrées..
La nouvelle spéc introduit le très pratique Champs obligatoires attribut. Au lieu d'utiliser du code JavaScript sophistiqué pour gérer nos champs obligatoires, nous pouvons maintenant facilement utiliser cet attribut..
Pour les navigateurs qui ne prennent pas en charge cet attribut, nous pouvons à nouveau utiliser Webforms2. Donc, puisque nous l'avons inclus depuis le début, il n'y a rien à craindre.
Remarque: Assurez-vous d'affecter un prénom attribuer à vos éléments de formulaire, ou la Champs obligatoires attribut ne prendra pas effet.
le modèle attribut est utilisé pour la validation de champ et accepte les valeurs uniquement si elles correspondent à un format spécifique, défini avec des expressions régulières. Si la valeur entrée ne correspond pas au modèle, le formulaire ne sera pas envoyé..
Par exemple, pour valider un numéro de téléphone, il faudrait utiliser le code suivant: modèle, ou expression régulière:
le modèle attribut peut être implémenté dans les navigateurs qui ne le supportent pas, en utilisant Webforms2.
le autofocus attribut fait exactement ce qu'il dit: concentre automatiquement l'un de nos contrôles. Il est actuellement pris en charge par les navigateurs Webkit (Safari, Chrome, etc.) et Opera. Rappelez-vous: un seul contrôle de formulaire peut recevoir cet attribut..
Webforms2 prend en charge la mise en œuvre dans des navigateurs non pris en charge.
le espace réservé attribut est quelque chose que nous faisons avec JavaScript depuis des années. Il ajoute une information sur le champ, comme une courte description, qui disparaît lorsque le champ est focalisé..
Cet attribut est pris en charge par les derniers navigateurs Beta Firefox et Webkit..
Pour reproduire le comportement des navigateurs plus anciens, nous utiliserons le plugin Placehold jQuery du Design Lab de Viget..
var initPlaceholder = function () $ ('input [placeholder]'). placehold (); ; if (! Modernizr.input.placeholder) $ (document) .ready (initPlaceholder); ; le min max et étape les attributs d'entrée spécifient les contraintes pour certains contrôles de formulaire, tels que le sélecteur de date, le nombre et la plage. Vous pouvez sûrement deviner le but de min et max de leurs noms. le étape attribut spécifie la plage multiple pour chaque clic, ou "étape". Pour isntance, si la valeur de pas est 2, les valeurs acceptées peuvent être 0, 2, 4, etc..
Pour le moment, ces attributs sont uniquement pris en charge par les navigateurs Opera et Webkit et sont mis en œuvre par Webforms comme solution de secours pour les autres navigateurs..
Nous avons appris aujourd’hui que la création de formulaires et l’utilisation de solutions de remplacement pour la plupart des nouveaux ajouts est une tâche assez facile. Si les gens essaient encore de vous faire peur d'utiliser HTML5 aujourd'hui, ne leur faites pas attention. commencez à utiliser les formidables outils que vous avez à votre disposition dès maintenant!
N'oubliez pas de consulter également les excellents html5Widgets de Zoltan "Du Lac" Hawryluk, qui proposent des solutions similaires, avec des widgets JavaScript natifs..
