Aller au contenu

Utilisez les nouveautés HTML 5 pour la Création des formulaires pour sites mobiles

Apprenez à créer des formulaires pour site mobile avec HTML 5.

Découvrez les nouvelles options de pré-validation d’un formulaire dans HTML 5.

Cliquez ici pour voir la vidéo.

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

Utilisez les nouveautés HTML5 pour la création des formulaires pour sites mobiles

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours dédié à HTML 5 pour créer des sites pour les mobiles, vous allez apprendre à créer des formulaires, si vous avez suivi avec assiduité les cours développement facile, il y a déjà eu quelques cours sur les formulaires, donc là je vais aller beaucoup plus vite, ça va être un petit rappel en fait, un rappel pour l’utilisation des formulaires avec HTML5.

Les formulaires avec HTML5

Si vous le savez pas, l’avantage d’HTML5 c’est qu’il intègre plusieurs fonctionnalités très utiles pour les formulaires notamment sur les appareils mobiles, donc la création de différents types inputs comme les boutons radio, les checkboxs, les champs texte, ça devient beaucoup plus simple, notamment tout ce qui est validation, test du contenu du champ et il y a également des nouveaux attributs HTML 5 très intéressants pour les applications mobiles, donc des attributs qui vont vous simplifier la vie pour les applications mobiles.

Voir l’exemple

Le plus simple c’est d’utiliser un exemple de code source d’un formulaire de contact pour mobile, donc c’est partit je vous montre tout ça à travers un exemple de code source que vous trouverez en téléchargement à la fin de ce cours. Alors voici un exemple de code source qui utilise les formulaires HTML 5 avec les nouvelles fonctionnalités dédiées aux mobiles, donc toujours la balise viewport pour les différents paramètres, pour un affichage sur Smartphone ou sur tablette donc ce qui vous intéresse c’est les champs de formulaire, champ type input, placeholder je vous le montre en direct ça permet de renseigner un texte par défaut et après vous tapez votre texte et automatiquement ce qu’il y avait en placeholder s’est effacé. Renseignez votre e-mail c’est un placeholder ça permet de donner une indication supplémentaire à l’utilisateur, le champs de type mot de passe, ça va mettre des étoiles ou des points, ça évite que les autres personnes voient le mot de passe, les boutons radio, donc homme ou femme, tout simplement, avec la value que vous pouvez récupérer, vous avez le numéro téléphone ou vous pouvez rentrer que un numéro de téléphone, vous pouvez rentrer évidemment du texte, mais il ne sera pas validé donc vous rentrez un numéro de téléphone, une date de naissance également, le champ date de naissance toujours le placeholder, le nombre de langages connus donc ça c’est une liste déroulante, tout simplement, et donc quand vous tapez les premières lettres ça affiche le contenu de la liste déroulante en autosuggestion donc très pratique et vous avez là pour choisir le nombre de langages que vous connaissez donc un type range ici. Et après, voilà la validation de votre formulaire et les champs obligatoires qui sont ici, les champs obligatoires avec require j’ai du mal à prononcer l’anglais, ça, ça permet d’indiquer aux formulaires que c’est un champ obligatoire, tout simplement.

Voilà les champs sont tous ici obligatoires, celui-là n’est pas obligatoire, après il ne vous reste plus qu’à valider votre formulaire donc champs obligatoire, il faut le compléter, une adresse mail valide pourquoi une adresse mail valide, on a dit que c’était un type e-mail donc il y a une vérification automatique grâce à HTML 5, c’est très pratique, voilà, le formulaire a été validé.

C’est un exemple tout simple avec les quelques nouvelles fonctionnalités disponibles en HTML 5, notamment placeholder, require, les différents types testés automatiquement donc un peu ce que ça donne un exemple pratique.

Votre plan d’actions !

Maintenant c’est à vous de jouer, à votre tour d’utiliser les nouvelles possibilités de formulaire HTML 5 dans vos sites pour les mobiles donc pensez bien à toutes les options que je vous ai montrées, si vous avez besoin de cours supplémentaires, juste ici il y a lancer la deuxième vidéo, donc déjà si vous avez des questions posez les directement sous ce cours, et là je vous invite à cliquer sur ce lien pour aller voir la deuxième vidéo, dans la deuxième vidéo on va aller beaucoup plus loin pour la création de sites HTML 5 complexes avec des techniques avancées, pour créer deux à trois fois plus rapidement des sites HTML 5 performants qui s’affichent aussi bien sur un Smartphone que sur une tablette ou sur un ordinateur de bureau donc vous allez apprendre, voir tout ça, je vous explique tout en détails dans la deuxième vidéo, donc cliquez simplement sur cette image, sur le lien lancer la deuxième vidéo. Je vous retrouve dans la deuxième vidéo à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de formulaire HTML 5

Retrouver le code source commenté de l’exemple du cours ci-dessous

Téléchargement du code source Formulaire HTML 5

Cliquez ici pour télécharger le code source Formulaire HTML 5

Montrez nous vos formulaires HTML 5

Utilisez les commentaires pour montrer les formulaires de vos sites web pour mobile.

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 Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>