Les 3 techniques pour utiliser les nouveaux formulaires HTML5

Et voici la suite pour utiliser tout le potentiel des formulaires HTML5. Les champs date, année, mois… vous seront très utiles !

Tout est dans le cours vidéo ci-dessous.

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

Les 3 techniques pour utiliser les nouveaux formulaires HTML5

Bonjour à tous et bienvenu sur Développement Facile.

Dans les cours précédents vous avez commencé à voir les nouvelles possibilités offertes par les balises HTML 5 sur les formulaires, dans ce cours, ensemble, on va voir la suite. Comment continuer d’améliorer vos formulaires.

Un champ au format numérique

Par exemple vous avez nouvelles balises HTML 5, input type égal number, ça vous permet de vérifier automatiquement que l’utilisateur saisit des nombres, c’est un champ numérique, donc très pratique pour récupérer le numéro de téléphone d’un utilisateur, au moins vous êtes sûr qu’il ne rentre que des nombres, 06 68 14 etc. Vous avez plusieurs attributs dans ce formulaire,
min pour redonner la valeur minimale du compteur,
max la valeur maximale du compteur,
step le pas d’avancement à chaque fois que l’utilisateur clique sur la souris ou sur les flèches haut et bas,
value la valeur de départ du compteur, avec cette balise soit vous pouvez mettre un champ numérique pour récupérer un numéro de téléphone, ou alors rappelez-vous, une petite barre qui permet à l’utilisateur de choisir un nombre, une barre qui bouge, je vais vous montrer un exemple ne vous inquiétez pas, vous allez avoir tout ce qu’il faut.

Déjà vous avez un exemple de code source avec input type égal number name langage min en départ de la valeur un maximum, il y a 10 valeurs, le pas de déplacement donc on déplace de 1 en 1 donc 1, 2, 3 et value zéro.

Un champ au format date

Ensuite vous avez les champs au format date, souvent vous voyez, par exemple si vous allez sur le site voyage SNCF, quand on vous demande de choisir votre date de départ, votre date d’arrivée, il y a un calendrier qui s’ouvre avec HTML 5, vous avez une balise input type égale date qui permet à l’utilisateur d’afficher ce petit calendrier, comme ça il peut choisir automatiquement sa date.
Ensuite vous avez la possibilité input type égal month, c’est pour sélectionner le mois et l’année, donc par exemple pour l’expiration d’une carte de crédit, l’utilisateur va pouvoir saisir seulement le mois, ça c’est des nouveaux champs HTML 5, très pratique. Un exemple pour saisir une date, date d’arrivée input type égal date, date de départ, pareil, un champ de type date, date d’expiration pour la carte bancaire, donc type month, il va pouvoir saisir le mois et avec le bouton valider, donc submit et reset effacer des champs du formulaire.

Un champ au format horaire

Vous avez aussi le champ au format horaire input type égale Times, ça permet de sélectionner une heure, l’utilisateur sélectionne une heure, vous avez les mêmes attributs que pour type égale number, min, max, step, value, donc min, l’heure de départ du compteur, max l’heure de fin, step l’avancement en secondes, donc vous avez un exemple juste en dessous, input égal times pour heure, minimale donc ça veut dire par exemple, pour une date de livraison, vous commandez une pizza, vous choisissez votre heure de livraison et votre date, rappelez-vous, type égal date, pour la date de livraison, et donc pour l’heure vous mettez un champ input type égal times, minimum 9 heures, entre 9 heures et 17 heures, et il y a l’état d’avancement de 60 secondes, à la secondes près il pourra choisir sa date, et son heure de livraison de sa pizza, vraiment très pratique, on met une value, valeur par défaut à 11 heures, tout simplement.

Un champ de recherche

Vous avez le champ de recherche, donc pour les blogs notamment et un champ de recherche en HTML 5, vous utilisez la balise input type égal search et vous avez votre champ de recherche dans votre blog, là vous avez également un exemple de code source, vraiment très simple, input type égal search, vous pouvez mettre une valeur par défaut, tapez votre recherche ici, par exemple, tout simplement.

La palette de couleurs

Ensuite les couleurs, une palette de color, un color picture c’est également appelé, donc vous utilisait la balise input type égal color, qui va vous afficher une palette de couleurs, vous avez un exemple, choisissez votre couleur, donc input type égale color, dès que l’utilisateur va cliquer dessus, il y aura une palette de couleur ou il pourra choisir sa couleur.

Les curseurs

Vous avez également les curseurs avec input type égale range ça permet d’ajouter un curseur pour que l’utilisateur puisse choisir une valeur numérique, toujours les mêmes attributs que vous connaissez maintenant, min, max, step, value, valeur minimale, valeur maximale, le pas d’avancement entre chaque clique de la souris et la valeur de départ de input de la balise.

Donc un exemple de curseurs, choisissez votre entité, et vous avez plusieurs valeurs 1, 2, 3, 4 ou 5.

Exemple d’application

Donc je vous montre très rapidement un exemple, deux exemples de code source, donc là c’est l’exemple pour choisir sa valeur, donc comme je vous l’ai montré, nombre de formations demandées 1, 2, 3, 4 ou 5 et vous avez choisi, et là on va mettre le nombre de formations, tout simplement. Donc on utilise innerHTML, je vous renvoie au cours sur JavaScript qui vous explique à quoi sert, comment utiliser la balise innerHTML, donc l’utilisateur il a input name curseur ici, valeur minimum un, valeur maximum cinq, la valeur de départ c’est trois, et on se déplace de un en un pour le curseur, on positionne les différentes valeurs et vous avez choisi ça.
Je vous montre également le deuxième exemple de code source, donc là action ça va envoyer un mail par la méthode post, texte plain avec toutes les informations du formulaire dès que l’utilisateur valide, donc ça va ouvrir un mail, le client input type égale name, enfin texte pour le nom, champ obligatoire avec un placeholder, je ne vous l’ai pas dit, cet attribut ça sert à afficher, à pré remplir le champ mais c’est pas une valeur, ça donne une indication à l’utilisateur de ce qu’il doit mettre dans ce champ, mais ce n’est pas une valeur, si vous voulez mettre une valeur par défaut au champ, vous utilisez value donc type texte pour le code postal, on utilise des expressions régulières pour dire qu’on attend un chiffre, champ obligatoire, champ obligatoire, vous voyez tous les champs obligatoires, placeholder pour donner à l’utilisateur une indication de ce qu’il doit mettre dans le champ.

Je vous montre un peu ce que ça donne, le premier code source, ça donne ça, avec une valeur ou il se déplace et dès qu’il déplace la souris, ça met à jour le nombre de formations qu’il a choisi, 2 formations, 3 formations, on se déplace de un en un donc 5, et ça c’est le champ du formulaire donc placeholder avec le nom et prénom dès que l’utilisateur clique, ça renseigne donc sachant que c’est pré remplit avec la valeur required donc code postal, si je fais commander, veuillez renseigner ce champ, les champs obligatoires, donc je renseigne le champ obligatoire, simplement, je re valide, veuillez modifier la valeur de ce champ pour correspondre au format demandé, donc c’est 44000, le format demandé, c’est des chiffres, l’intitulé de l’information HTML 5, CSS3 et les quantités, tout simplement, après vous faites paiement par virement, commander.

Votre plan d’actions !

Maintenant c’est à votre tour de concevoir des formulaires, plus rapidement et plus évolués, grâce aux nouvelles possibilités de HTML 5, je vous ai montré un panel des possibilités offerts avec les formulaires utilisés, retrouvez un exemple de code source directement sous ce cours vidéo, si vous avez des questions, posez-les également sous la vidéo et moi je dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source HTML5

Voici un exemple de formulaire HTML5.

Avez-vous une classe JavaScript pour les formulaires ?

Partagez, dans les commentaires, votre classe JavaScript qui simplifie l’utilisation des formulaires HTML5.