Comment utiliser le potentiel des formulaires HTML5

Avec HTML5, la création et l’utilisation d’un formulaire devient simple comme bonjour.

Il y a plusieurs option d’auto-complétion, de vérification automatique de la saisie d’une adresse mail, d’une url et bien d’autres fonctionnalités encore…

Un cours vidéo diffusé en 2 parties, la première partie est juste ci-dessous.

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

Comment utiliser le potentiel des formulaires HTML5

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble nous allons continuer les cours dédiés à HTML 5, aux nouvelles possibilités, aux nouvelles balises offertes par HTML 5, pour que vous puissiez les appliquer dans vos sites Internet. Dans ce cours, vous allez justement, apprendre à utiliser les formulaires avec les nouvelles options disponibles avec HTML 5.

Organisez vos formulaires complexes

L’avantage c’est que vous allez pouvoir créer des formulaires de plus en plus complexes avec une lisibilité exemplaire, il sera très facile pour vous d’ajouter des nouvelles fonctionnalités, ajouter un champ de texte, rendre des champs obligatoires, obliger l’utilisateur à saisir que des chiffres dans un champ, tout ça c’est possible grâce au nouveau formulaire HTML 5. Avec les formulaires complexes, il est très utile de regrouper certains éléments pour mieux les organiser dans la page. Par exemple vous regroupez dans un fieldset, les champs pour un client, saisir votre adresse, nom, prénom, ville, code postal, pays, vous avez un autre champ, votre commande, le nombre de formations que vous souhaitez, l’intitulé etc. dans une autre balise fieldset, donc vous avez les balises fieldset et legend qui permettent grandement d’améliorer la lisibilité des formulaires, ça permet justement comme je vous l’ai dit, de regrouper les champs des formulaires avec une bordure et un titre. La balise legend ça permet de créer le titre, elle se place juste derrière la balise fieldset.

Le plus simple c’est de vous montrer un exemple de code source, regardez sur votre écran vous avez fieldset donc on va créer un bloc qui va contenir des cases à cocher ActionScript, JavaScript, Assembleur, et on met une légende donc c’est une sorte d’intitulé de la boite, cochez les langages Web. Ensuite, on recréé un autre fieldset, toujours balise ouvrante, balise fermante, une légende, cochez les langages objets, et des cases à cocher, et après vous reconnaissez les boutons submit, et reset. Voilà donc très utile fieldset avec legend, pour quand vous avez des grands formulaires avec beaucoup de champs, que l’utilisateur doit renseigner, utilisez fieldset et legend pour lui simplifier la vie et rendre votre site Internet beaucoup ergonomique.

Suggestion via un champ texte

Vous avez également la balise datalist qui permet d’ajouter, d’ouvrir une liste de suggestions, vous avez un champ texte, avec datalist ça permet d’ouvrir, de lui suggérer, un peu comme Google quand vous commencez à taper un mot clé ça le complète automatiquement, donc il suffit d’utiliser la balise datalist avec la balise options, des balises options, qui reprenne toutes les suggestions que l’on souhaite proposer à notre internaute, tout simplement. Il faut savoir que la balise datalist est reliée à un champ de formulaire par un identifiant id, qui renvoie l’attribut liste de celui-ci.

Un exemple de code source, ça vous parlera beaucoup mieux, vous avez un champ texte choisissez un langage, input type = texte liste langages et dedans vous avez datalist id langages qui correspond à liste = langage, vous remarquez sur l’exemple de code source, id = langages, liste = langage de la balise input type texte, c’est relié, dans datalist, vous avez toutes les options, option values ActionScript, values JavaScript, values PHP, values HTML. Quand l’utilisateur va commencer à taper du texte dans ce champ-là, automatiquement le formulaire va lui suggérer ces différents langages, très pratique c’est la recherche Google tout simplement. Vous avez aussi la balise input type = email, avant rappelez-vous, si vous utilisiez des formulaires couplés à JavaScript, en JavaScript avant au moment de soumettre le bouton, quand l’utilisateur clique sur submit ou avant, vous deviez appeler une fonction JavaScript qui vérifie si l’adresse mail est valide, là vous pouvez, grâce à HTML 5, le faire directement par le champ lui-même, ou mettre input = email, ça va vérifier tout seul. Il y a un attribut required, ça permet de rendre des champs obligatoires, si ils ne sont pas renseignés, on indique, le navigateur indique à l’utilisateur veuillez renseigner ce champ, et le formulaire n’est pas validé tant que le champ n’est pas renseigné. Vous avez également l’attribut autocomplete qui propose de compléter automatiquement la ligne du formulaire à partir de l’adresse mail de l’internaute, quand vous remplissez des formulaires sur Internet, votre navigateur Google Chrome, FireFox ou Opera, il enregistre ces données, et avec l’attribut autocomplete, ça évite à l’utilisateur d’avoir à ressaisir toutes ces informations dans les champs, nom, prénom, adresse mail, adresse, téléphone, on les saisi tout le temps, c’est tout le temps les mêmes, dans les différents formulaires des sites Internet, grâce à cet attribut-là, ça évite à l’utilisateur de compléter, les champs sont complétés, automatiquement, très pratique, un gain de temps très appréciable par les utilisateurs.

Vérifier une adresse mail

Voici un exemple de formulaire, qui vérifie l’adresse mail directement grâce à la balise HTML 5, donc on fait un input type = email, on met required, ça veut dire que le champ est obligatoire à renseigner pour l’utilisateur, dans form action on a mis autocomplete à on, l’adresse mail sera renseignée automatiquement par le navigateur, très pratique ces nouvelles balises HTML 5, elles sont vraiment géniales. On peut faire la même chose, vous avez la balise précédente type égale e-mail, vous pouvez utiliser la balise type égale URL, ça permet de vérifier si l’adresse saisie est correcte, avec un exemple, c’est exactement le même principe de fonctionnement que l’email, sauf qu’au lieu de mettre type égal e-mail, vous mettez type égale URL.

Votre plan d’actions !

Commencez par créer les formulaires avec ces nouvelles options HTML 5, vous allez voir, ça va vous simplifier la vie, bien évidemment, vous retrouverez un code source très complet sous ce cours vidéo, téléchargez-le, réutilisez-le dans votre sites Internet, si vous avez des questions, posez-les directement sous cette vidéo, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source HTML5

Retrouvez un exemple de code source d’un formulaire HTML5.

Quel type de formulaires utilisez-vous ?

Partagez, dans les commentaires, vos différentes formulaires HTML5 !