Aller au contenu

Comment ajouter un formulaire avec le framework jQuery Mobile

jQuery Mobile restyle tous les champs de formulaires pour les rendre utilisables avec des manipulations tactiles.

Tout est dans la formation ci-dessous pour créer rapidement des formulaires jQuery Mobile.

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

Comment ajouter un formulaire avec le framework jQuery Mobile

Bonjour à tous et bienvenu sur Développement Facile.

On continue ensemble cette série de cours dédiée au framework jQuery Mobile, et dans le cours précédent vous avez eu un aperçu de la création d’un formulaire, comme vous l’avez vu, je ne vous ai pas expliqué le code source volontairement car c’est dans ce cours qui est dédié aux formulaires que vous allez apprendre à créer des formulaires avec jQuery Mobile, c’est parti.

Les formulaires

Vous utilisez les balises HTML5 que vous connaissez déjà, et jQuery va s’occuper de leur appliquer son style CSS, pour le designer pour une application mobile, ce sera des éléments très sympas.

Les formulaires – un champ de texte

Pour ajouter une ligne de texte, un champ texte, il suffit d’utiliser les balises HTML 5 classiques que vous connaissez déjà avec input type=text, je vais passer assez vite sur tous les champs de formulaires car vous les connaissez déjà, sinon j’ai créé plusieurs cours, cinq, six cours sur les formulaires HTML 5 et la gestion des formulaires avec JavaScript, allez sur développement-facile.com pour consulter ces cours.

Les formulaires – une zone de texte

C’est pour ça je vais passer assez vite, je vous ai toujours mis un exemple de code source, pour ajouter une zone de texte il suffit d’utiliser la balise textarea, vous avez un exemple de code source avec le form, balise form, data-role=fielcontain, le label, renseignez votre adresse complète, et le champ texte area.

Les formulaires – un champ mot de passe

Vous avez également un champ mot de passe avec une input type=password.

Les formulaires – les boutons

Vous pouvez ajouter les boutons, le fameux submit et reset, toujours selon le même principe, donc le code source s’affiche sur votre écran, c’est de l’HTML 5, vous connaissez.

Les formulaires – les listes

Après vous avez les listes de sélection, c’est une façon compacte les listes, comme vous avez précédemment dans le cours sur les listes, vous pouvez ajouter des listes dans les formulaires, afficher plusieurs options, les listes, c’est le même principe que le cours précédent sur les listes, justement, et donc vous pouvez afficher ces mêmes listes dans des formulaires, tout simplement.

Pour faire apparaître le contenu de la liste dans une pop-up, vous pouvez utiliser l’attribut data-native-menu=false, et la liste va apparaître, son contenu, dans une pop-up, et vous pouvez bien évidemment grouper les options avec la balise optgroup label, un peu compliqué à prononcer, dans la liste déroulante, ce qu’on va voir ensemble à travers un exemple de code.

Les formulaires – les boutons radio

Vous avez également les fameux boutons radio avec une balise de type input type=radio, bien évidemment avec jQUery Mobile, ils sont très jolis ces boutons radio, agréables pour votre internaute, vous pouvez les présenter soit de façon horizontale, soit de façon verticale les boutons radio, à vous de choisir.
Vous avez les fameuses checkbox aussi, on verra ça dans le prochain cours dédié sur les formulaires.

Exemple d’application

Là, on va passer à un exemple de code source. Là vous avez votre formulaire avec votre nom, votre prénom, l’adresse e-mail, adresse e-mail, un champ mot de passe, une liste déroulante donc une liste déroulante affichage classique, pas très jolie, une liste déroulante avec un affichage beaucoup plus sympa, avec un séparateur, il y a beaucoup d’éléments comme ça votre internaute n’est pas perdu, bouton radio, et une autre façon d’afficher des boutons radio après vous avez le bouton annuler, tout revient à 0, et le bouton valider.
Comment on fait ça par le code.
Vous avez votre formulaire ici, méthode get ou post, la div à chaque fois, data-role filecontaint, et vous mettez vos éléments dedans, votre nom, le prénom, un champ texte, un texte area, le mot de passe, une liste déroulante, tout simplement. Une autre liste déroulante en les groupant avec un label, et avec un affichage de type pop-up, vous avez également la création de boutons radio, soit en affichage vertical ou en affichage horizontal comme c’est le cas ici.
Là il suffit de renseigner tous les éléments, là c’est un champ texte qui s’agrandit automatiquement, le mot de passe, une liste classique, une liste, à pardon par contre il faut que je revienne avant le clic, une liste jQuery Mobile, la liste classique, la checkbox, annuler, ça remet tout à 0 et le bouton valider.
Voilà le code source pour afficher votre liste, si vous connaissez le HTML 5, il n’y a rien de nouveau, de bien compliqué appart utiliser des attributs pour afficher vos listes, des nouveaux attributs tout simplement.

Votre plan d’actions !

Maintenant c’est à vous de jouer, pensez à appliquer le contenu de ce cours, pour créer vos applications mobiles avec le framework jQuery Mobile. Sous ce cours vidéo vous retrouverez le code source utilisé dans ce cours. Si vous avez des questions posez-les directement sous la vidéo et maintenant je vous donne rendez-vous dans le deuxième vidéo, pour aller dans la deuxième vidéo, il y a un lien avec une image au-dessus, ou alors à la fin de cette vidéo il y a un lien cliquable qui va apparaitre, cliquez dessus et vous serez directement redirigés dans la page de la deuxième vidéo, ou là vous accéderez à plusieurs cours vidéo professionnel pour apprendre à utiliser jQuery, jQuery UI, jQuery Mobile et Dojo sur le bout des doigts, je vous dis à tout de suite sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple de formulaire jQuery Mobile

Et voici le code source pour créer des formulaires avec le framework jQuery Mobile.

Téléchargement du code source Exemple de formulaire jQuery Mobile

Cliquez ici pour télécharger le code source Exemple de formulaire jQuery Mobile

Posez vos questions sur ce cours

Si vous avez des difficultés à utiliser les listes de jQuery Mobile, posez vos questions dans les commentaires pour échanger avec la communauté Développement Facile.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>