Un regard sur les types de formulaires HTML5 Les types d'entrée Date, Couleur et Plage

Les formulaires se trouvent partout sur les sites Web. Facebook, Twitter, Google - pour n'en nommer que quelques-uns - nous obligent à nous connecter ou à nous inscrire sur le site via un formulaire. En fait, nous utilisons également un formulaire pour tweeter et mettre à jour le statut des sites sociaux. En bref, la forme est une partie très importante pour pouvoir interagir avec un site web.

Un formulaire Web est construit avec des entrées. Dans le passé, nous n’avions que quelques options pour les types d’entrée; tel que texte, mot de passe, radio, case à cocher et soumettre. Maintenant, HTML5 apporte de grandes améliorations et introduit de nombreux nouveaux types d’entrée dans la spécification..

Donc, dans ce post, nous allons creuser dans certaines des nouvelles pièces intéressantes de la Formulaires HTML5 que nous pensons que vous devriez les essayer; allons les vérifier.

Sélecteur de date

La première chose que nous aimerions examiner est le sélecteur de date. La sélection de la date est une chose courante que vous pouvez trouver dans le formulaire d’inscription, en particulier sur certains sites ou applications telles que la réservation de vols et d’hôtels..

Il existe de nombreuses bibliothèques JavaScript pour créer un sélecteur de date. Maintenant, nous pouvons aussi en créer un beaucoup plus facilement avec l’entrée HTML5 rendez-vous amoureux, comme suit;

le sélecteur de date En HTML5, le fonctionnement est très similaire à celui des bibliothèques JavaScript. lorsque nous nous concentrons sur le terrain, un calendrier apparaîtra, puis nous pouvons naviguer à travers les mois et les années pour sélectionner la date..

Cependant, chaque navigateur qui supporte actuellement la rendez-vous amoureux type d’entrée, à savoir Chrome, Opera et Safari affichent ce type d’entrée un peu différemment, ce qui peut entraîner des problèmes d’incohérence dans l’expérience utilisateur, et voici à quoi il ressemble;

Certaines différences notables que vous pouvez voir en un coup d’œil à partir de la capture d’écran ci-dessus; l’opéra a utilisé l’abréviation anglaise en trois lettres pour le nom du jour - dimanche, lundi, jeudi, etc., tandis que le Chrome a utilisé ma langue locale, le Safari - en revanche - fonctionne plutôt bizarre, il ne montre pas de calendrier du tout.

Il y a aussi quelques nouveaux contribution types à sélectionnez la date ou l'heure plus précisément; mois, la semaine, temps, date / heure et datetime-local, dont nous sommes sûrs que le mot clé lui-même est assez descriptif pour dire ce qu'il fait.

Vous pouvez tous les voir en action à partir du lien ci-dessous, mais assurez-vous de le voir aussi bien dans Opera 11 que dans les versions supérieures, car, au moment de l'écriture, il s'agit du seul navigateur prenant en charge tous ces types d'entrée.

Démo Datepicker

Pipette à couleurs

Pipette à couleurs Cette application est souvent nécessaire dans certaines applications Web, telles que ce générateur de gradient CSS3, mais les développeurs Web ont également toujours recours à une bibliothèque JavaScript, telle que jsColor, pour effectuer le travail. Mais maintenant, nous pouvons créer un sélecteur de couleur de navigateur natif avec HTML5 Couleur type d'entrée;

Une fois encore, les navigateurs, dans ce cas Chrome et Opera, rendent ce type de saisie légèrement différent.

L’opéra affiche d’abord la couleur de base lors du clic, ainsi que le format hexadécimal de la couleur sélectionnée dans un menu déroulant, tandis que Chrome affiche directement la palette de couleurs dans une nouvelle fenêtre lorsque vous cliquez dessus..

En outre, nous pouvons également définir la couleur par défaut avec le valeur attribut, comme suit;

Ainsi, lorsqu’il est visualisé dans les navigateurs non pris en charge, le contribution se dégradera dans un champ de texte et la valeur par défaut sera visible, ce qui peut donner aux utilisateurs une sorte d’indication de ce qui doit être entré dans le champ.

Afficher la valeur de la couleur

Plutôt que d’ouvrir Photoshop simplement pour copier le hexagone format de couleur, vous pouvez réellement créer un outil simple sur ce type d’entrée pour effectuer le travail, puisque la couleur générée est déjà en hexadécimale, ce serait très simple;

Tout d'abord, nous ajoutons l'identifiant pipette à couleurs à l'entrée et nous ajoutons également un vide div avec identifiant couleur hexagonale à côté d'elle pour contenir la valeur.

Nous avons besoin du lien jQuery dans le tête de notre document. Ensuite, nous stockons la valeur de couleur et la nouvelle valeur ajoutée. div dans une variable, comme tel;

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

Obtenir la valeur initiale du #pipette à couleurs;

 hexcolor.html (couleur);

… Et modifiez enfin la valeur lorsque la couleur sélectionnée est également modifiée;

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

C'est tout; maintenant voyons en action.

Démo Colorpicker

Intervalle

le intervalle Le type de saisie nous permet d’ajouter un curseur dans le navigateur pour sélectionner un numéro dans une plage que nous pouvons également trouver dans l’interface utilisateur jQuery..

L’extrait ci-dessus est fondamental pour la mise en œuvre de intervalle type d'entrée. Nous pouvons également modifier l'orientation du curseur en verticale à l'aide de CSS, comme suit;

 entrée [type = plage] largeur: 20px; hauteur: 200px; -webkit-apparence: curseur-vertical;

De plus, nous pouvons définir le min et max gamme des nombres, par exemple;

Dans l'extrait ci-dessous, nous définissons la min à zéro et 225 pour le maximum. Quand ils ne sont pas spécifiés explicitement, le navigateur prendra par défaut 0 pour le minimum à 100 pour le maximum.

Afficher le nombre

Il y a une contrainte cependant, le nombre est invisible, nous ne pouvons pas voir le nombre généré / valeur à partir du curseur dans le navigateur. Pour afficher le numéro, nous devons ajouter un peu de JavaScript ou jQuery, et voici comment nous le faisons.

D'abord nous ajoutons un vide div à côté de l'entrée, stylisez le div suffisamment pour qu'il ressemble à une boîte.

Ensuite, mettez le code suivant qui fera la même chose que le code ci-dessus dans le sélecteur strongcolor, sauf nous obtenons maintenant la valeur du curseur.

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

Maintenant, vous pouvez voir la démo. Pour rappel, regardez la démo dans ces navigateurs - Chrome, Opera et Safari, car Firefox et IE ne prennent pas en charge la intervalle type d'entrée pour le moment.

Démo de la gamme

Mots finaux

Il est clair que HTML5 facilite beaucoup notre vie en introduisant de nombreux nouveaux types de saisie. Mais comme pour toutes les autres fonctionnalités HTML5, la prise en charge est très limitée, en particulier dans les anciens navigateurs. Nous devons donc utiliser ces nouvelles fonctionnalités avec prudence, en particulier les nouveaux types de saisie dont nous avons parlé dans ce message. Date, couleur et gamme.

Mais finalement, nous espérons que maintenant vous avez plus de perspicacité sur Formulaires HTML5. Merci d'avoir lu cet article et nous espérons qu'il vous a plu.

Démo
Source de téléchargement

Lectures complémentaires

Vous trouverez ci-dessous quelques liens utiles pour approfondir vos connaissances sur les formulaires HTML..

Nouvelles fonctionnalités de formulaire en HTML5 - Opera Dev.
L'état actuel des formulaires HTML5 - Wufoo
Attributs de formulaire HTML5 - w3school.org
Quand puis-je utiliser des formulaires HTML5? - CanIUse.com