L'essentiel du HTML5

Placer un formulaire dans sa page

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Tout formulaire se compose d'une partie contenant et d'un contenu. Penchez-vous sur la partie contenant et parcourez les diverses balises et les attributs mis à votre disposition.
05:14

Transcription

Côté html, le formulaire va se composer, on va dire, de deux parties. Une première partie qui va être le conteneur, la fiche de formulaire, en quelque sorte. Et la deuxième partie sera les éléments du formulaire que l'on va placer à l'intérieur de cette coquille. Pour utiliser un formulaire, il suffit d'utiliser la balise form, ici, au sein d'un document html. Par contre, dans cette balise form, il va y avoir toute une série d'attributs qui vont décrire la nature de ce formulaire. Alors, le premier attribut très important à placer, c'est un identifiant pour être sûr de pouvoir repérer le bon formulaire parmi tous les formulaires qui pourraient être présents sur la page. Ensuite, toutes les informations qu'on va donner et énumérer maintenant, ne sont pas forcément obligatoires parce qu'il peut y avoir plusieurs manière de les gérer. On va dire que par défaut, voilà toutes les possibilités qu'on va avoir pour pouvoir définir et décrire ce formulaire. L'attribut action va pointer vers le fichier php ou asp. Vous savez, le fameux script serveur qui va être invoqué lorsque le formulaire sera bien rempli et qu'il pourra être envoyé côté serveur. Donc ça, c'est le fichier à atteindre. Ensuite, on va avoir la méthode. Quelle va être la méthode dans la protocole http pour transférer ces informations sur le serveur ? On peut avoir des méthodes post, qui vont envoyer d'une part, un en-tête de fichier et d'autre part, de manière séparée, presque sous forme de pièce jointe, presqu'une capsulation intégrant toutes les données du formulaire. Ou la méthode get, qui elle, joindrait un peu directement dans l'url toutes les données du formulaire. On le retrouve parfois dans des bons de commandes ou des paniers. Vous avez un ? et toute une série de caractère après ce ?. C'est la méthode get. Si on utilise la méthode post, c'est caché quelque part, c'est dans une partie, un peu, dans les soubassements du protocole http, que les données sont stockées. Ensuite, il va falloir savoir comment on encode ces données. Parce que ces données peuvent être soit uniquement textuelles, auquel cas, on peut utiliser une application xw form-url encoded. Les datas vont être encodées dans les caractères accentués, les espaces. Tous ces caractères un peu particuliers vont être encodés sous forme d'entité d'url. Soit on peut l'utiliser sous le format multipart form data qui en fait permet de joindre des fichiers binaires également, donc des images. Ensuite, on va pouvoir décrire quels sont les caractères, ou le jeu d'encodage de ces caractères. Et donc, vous vous rappelez, on avait vu au départ, l'encodage utf-8. Mais il pourrait y avoir du codage iso, donc de l'ANSI, différents types d'encodage qui seraient définis. Donc, ici, on va dire attention, tout ce qui va transiter, c'est de l'utf 8 dans la tuyauterie de ce formulaire. Ensuite, l'attribut, si on le précise, donc no-validate, on acceptera pas de validation. Donc, on enverra les données telle quelle au serveur et c'est du côté du serveur qu'on fera la vérification. Maintenant, si vous ne mettez pas cet attribut là, la validation du formulaire va être prise en compte mais uniquement sur les champs qui le demanderont. Ensuite, on a la possibilité de dire, pour l'intégralité du formulaire, on va utiliser l'autocomplete ou pas du tout. C'est à dire que le navigateur va essayer s'il reconnait les noms de champs, de se dire que la dernière fois, il y avait un champs email, il a rentré des emails, je vais lui proposer. Donc, si vous avez un autocomplete on par défaut l'intégralité des champs qui ne feront pas objections pourront être autocomplétés. Voilà, donc le formulaire serait, on va dire, terminé. Et on pourrait directement l'envoyer côté serveur. Encore faut il pouvoir avoir le fameux bouton pour l'envoyer. Alors, avant de voir les boutons, on va regarder une autre partie de la coquille du formulaire qui est intéressante à regarder. C'est qu'au sein d'un formulaire, on peut créer une balise dans la contenu fileset. Cette balise fileset, pour moi, ne fait pas partie du contenu. Elle fait partie de la coquille d'accueil, du conteneur d'accueil. Et dans un fileset, c'est à dire un jeu de champs, en fait. On va pouvoir créer une légende. Et cette légende pourra être un titre, donc présentation. Donc, ça voudrait dire qu'en gros, ici, tous les champs qui vont être regroupés dans cette entité fileset ici, seront basés sur la présentation. On peut dans la même, créer un second fileset, par exemple, avec une autre légende comme information. Ce qui voudrait dire qu'ici, vous allez présenter les données. Alors, ça pourrait être identification, votre nom, prénom, adresse. Et ici, les données de votre CV, par exemple. Avec le fichier joint, les photos, les informations techniques, etc... Donc ici, dans la partie du conteneur, il y a une partie contenu qui peut elle-même être des sous-conteneurs à éléments. Et donc, enfin, finalement, on va placer les boutons. Les boutons, soit on utilise un bouton de type bouton, et là, on a à faire à des boutons personnalisés. Ce qui reviendrait à dire que c'est un javascript qui va intercepté ce bouton qui enverra le formulaire. Auquel cas, l'action n'est pas forcément nécessaire. On peut la récupérer de manière différente. Soit on dit non, on va créer des boutons vraiment dédiés au formulaire, cela va créer un envoi par défaut. Donc, c'est un input de type submit. Et à ce moment-là, quand on appuiera sur le bouton, le formulaire partira. En plus ici, il y a no-validate. Donc, tout sera envoyé côté serveur. Et le troisième bouton qui est bien souvent utile. Qui est un bouton de type recette et qui va permettre de réinitialiser le formulaire. C'est à dire de remettre à zéro les données Comme elles étaient lorsque la page a été chargée. Voilà, donc ici, on a tous les ingrédients, balises et attributs nécessaires pour pouvoir mettre en place une coquille d'accueil sur une page web pour définir des formulaires.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !