Utilisez toutes les possibilités avancées des formulaires du framework jQuery Mobile

Les curseurs font partie des nombreuses nouveautés HTML5 pour les formulaires. En plus, ils sont très bien adaptés à une utilisation tactile.

Par contre, les boutons de type toggle ne font partie du HTML5. Pourtant, ils permettent de déterminer un état (oui ou non) de façon très simple que ce soit en utilisation tactile ou avec la souris. Et le HTML5 prévoit aussi la possibilité d’ajouter un colorPicker sur votre formulaire.

Tout est dans la formation ci-dessous pour une utilisation avancée des formulaires avec le framework jQuery Mobile.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez toutes les possibilités avancées des formulaires du framework jQuery Mobile

Bonjour à tous et bienvenu sur Développement Facile.

On continu ensemble la série de cours dédiée à jQuery Mobile, ce cours c’est la suite directe du cours précédent, dans le cours précédent vous avez commencé à découvrir les formulaires, là on passe à la deuxième partie des formulaires que vous n’avez pas encore vus.

Les formulaires – les cases à cocher

Vous les connaissez les fameuses cases à cocher, comme je vous l’ai dit c’est les mêmes balises HTML 5 que vous connaissez déjà, donc si vous ne les connaissez pas, j’ai écrit une trentaine de cours sur HTML 5, avec JavaScript, je vous conseille d’aller sur développement-facile.com pour consulter tous ces cours, comme ça vous connaîtrez tout ce qu’il y a à savoir pour utiliser jQuery Mobile avec une facilité déconcertante.
Les cases à cocher, il suffit d’utiliser input type=checkbox, vous pouvez présenter les cases à cocher de manière horizontale ou verticale. Horizontale il suffit d’ajouter l’attribut data type = horizontal à la balise fieldset data-role = controlgroup. Je vous ai mis un exemple de code source pour un affichage de type horizontal.

Ensuite vous avez les fameux curseurs de déplacements, les curseurs ça permet de sélectionner une quantité, en règle générale dans une boutique en ligne, il suffit d’utiliser la balise input type=range, ça va vous créer un petit curseur, vous définissez la valeur par défaut, la valeur minimum, la valeur maximum, et step c’est le pas d’avancement entre chaque déplacements du curseur. Un exemple de code source également affiché sur la vidéo.
Vous avez les boutons toggle, ils ne font pas partit de HTML 5, par contre un bouton toggle c’est très pratique pour oui, non, deux positions sur l’interface iOS de l’iPhone, vous avez les boutons, ils se transforment en vert, en couleur bleu gris, vert bleu gris, ça c’est un bouton toggle, c’est très utilisé, c’est très pratique.
Il suffit, je vous ai mis un exemple de code source, vous utilisez select mode avec data-role slider, et de mettre les deux options avec la value, selected la valeur sélectionnée par défaut, et le label oui ou non, tout simplement. C’est aussi simple que ça.

Les formulaires – la zone de recherche

Vous avez vu avec jQuery Mobile, il n’y a vraiment rien pour de très compliqué.

Pour créer une zone de recherche, il suffit d’utiliser la balise input type=search, je vous ai mis également un exemple de code source.

Les formulaires – un colorPicker

Vous pouvez ajouter un colorPicker, c’est la fameuse palette de couleurs, l’utilisateur appuie sur un bouton, et ça affiche la palette de couleurs, qui est différentes selon le système d’exploitation, il suffit d’utiliser la balise input type=color et ça va afficher une palette de couleurs à l’utilisateur comme ça il pourra choisir la couleur.

Les formulaires – champs email et url

Vous avez également les champs e-mail et URL, il faut savoir que si vous ne savez pas, HTML 5 peut contrôler les champs automatiquement si vous dites, comme vous avez sur l’exemple label input type =mail, si vous ne rentrez pas une adresse e-mail vous ne pourrez pas valider le formulaire, ça vous mettra un message d’erreur, un message veuillez renseigner une adresse e-mail valide. Pareil pour une URL, input type= URL, veuillez renseigner une url valide si vous ne renseignez pas une url valide.

Les formulaires – les options

On va voir tout ça à la fin de ce cours à travers un exemple de code source, ce sera très parlant pour vous.
Bien évidemment les formulaires peuvent vous occuper tout l’espace sur votre page web, donc vous avez la possibilité de les afficher en modèles réduits si je puis dire, avec l’attribut data mini=true, sur chaque champ du formulaire, sur les boutons, sur tous les champs.
Vous avez un exemple de code source, vous pouvez aussi, si vous le souhaitez vraiment ne pas utiliser jQuery Mobile, pour la présentation des formulaires, vous avez la possibilité de revenir à la présentation par défaut, il suffit d’utiliser l’attribut data-role=none, sur chaque champs du formulaire, vous aurez les anciens, l’affichage classique de votre formulaire.

Exemple d’application

Alors le code source je vous montre ça tout de suite, là vous avez votre formulaire, je vous explique le code source après, avec les cases à cocher en position verticale, en position horizontale, le curseur de déplacements de 1 en 1 vous pouvez très bien sélectionner ici, j’ai validé, il s’est déplacé, sélectionner ici, voilà, le fameux bouton toggle régler par carte bancaire, oui, ou non, il suffit de cliquer dessus, la fonction recherche d’une formation, il faut dire qu’en fait vous avez plusieurs éléments en-dessous, par exemple, quand on créé une liste on a vu ça, ou un champ de recherche classique, la fameuse palette de couleurs voilà, vous pouvez sélectionner une couleur ici, tout simplement, une adresse mail, donc là j’ai mis n’importe quoi, si je valide, veuillez saisir une adresse mail valide, voilà, une adresse mail valide, après pareil pour l’URL, si je valide, veuillez saisir une URL valide, il faut mettre le http://www, voilà, et donc le formulaire est validé, vous avez également le bouton annuler, le code source qui correspond à tout cela, les checkbox input type=checkbox avec les différents id d’options, HTML 5, CSS, tout ça controlgroup pour une checkbox, checkbox, on va parler en français, les cases à cocher affichées en horizontale, là c’était en verticale, ici, en horizontale, le fameux curseur de déplacements, le bouton toggle ici avec les deux valeurs oui, non, sélectionner par défaut, oui voilà, le bouton toggle, le champ de recherche ici ; le fameux colorPicker type color, vous sélectionnez la couleur que vous souhaitez, le champ d’adresse mail, type mail, type URL ici, mail, URL, et les deux boutons valider, annuler, on revient, on reset tout, et validé pour valider, tout simplement le formulaire.

Votre plan d’actions !

Maintenant c’est à vous de jouer, réutilisez les exemples de ce cours dans vos applications pour les mobiles et les tablettes, donc sous cette vidéo vous retrouverez le code source, si vous avez des questions posez-les sous ce cours vidéo également, ensuite je vous donne rendez-vous là tout de suite dans la deuxième vidéo, il y a une image cliquable au-dessus de cette vidéo, ou à la fin de cette vidéo, vous attendez, elle est finie la vidéo, il y aura un lien cliquable qui va s’afficher, juste à la fin de la vidéo, dès qu’elle est terminée automatiquement, il y a un lien qui s’affiche, vous appuyez dessus, vous cliquez dessus, vous serez redirigé vers la deuxième vidéo ou vous apprendrez comment utiliser de fond en comble le framework jQuery, l’extension jQuery UI, l’extension jQuery Mobile, le framework Dojo, je vous dit à tout de suite pour la deuxième vidéo sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple formulaires avancés jQuery Mobile

Et voici le code source commenté pour créer des formulaires avec les options avancées de jQuery Mobile.

Posez vos questions sur ce cours

Si vous rencontrez des difficultés avec ce cours, posez vos questions dans la zone commentaires ci-dessous, la Communauté Développement Facile vous répondra.