Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Mettre en place sa structure

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Sans trop vous avancer dans la gestion des formulaires côté serveur, comprenez la mécanique et la relation client serveur établie lors de l'envoi du formulaire.
06:27

Transcription

Bien que comme je le disais précédemment, ce n'est pas l'objet de cette formation. Mettons quand même en place la mécanique d'un formulaire. C'est à dire le dialogue entre le client et le serveur pour bien constater certains paramètrages. Côté serveur, on va se résumer simplement un script php, qui va lister tous les éléments reçu dans la mesure ou on recevrait du post. Si on reçoit du get, ça marchera pas mais on va le faire en post pour faire le test. On va simplement décortiquer l'objet reçu sous forme de $_post en propriété valeur et on va lister au travers de l'iep, le paragraphe dans la partie html. La propriété égale la valeur, tout simplement. Donc ici, on a dans le formulaire simplement une action qui pointe vers ce chemin qui est juste à côté. La méthode, c'est post et le système d'encodage, c'es un url encoded, un identifiant de ce formulaire qui s'appelle forulaire tout simplement. Ici, au sein de ce formulaire, qu'est-ce qu'on va passer comme information ? On va passer un champ input. On verra les différentes familles de champs qu'on a de disponibles juste après, mais pour l'instant, on va dire que c'est juste un champ de texte. On va donner deux attributs très importants. Le premier qui va être l'attribut name, on va l'appeler a. Et l'Id, qu'on appelera a également. On va placer un deuxième champs input de type texte. Et ce coup-ci, on ne va mettre que l'attribut name égal à b. Et c'est tout, on ne va pas mettre d'identifiant. On va créer maintenant un troisième champ. De type email, cette fois-ci. Mais on va donner que l'attribut Id égal à c. C'est tout ce qu'on va faire. Ce qu'on va rajouter maintenant quand même, c'est un bouton de type submit pour pouvoir envoyer le formulaire et on va regarder ce qui se passe. Donc, on va aller tester dans un navigateur. Alors attention, on ne peut pas tester dans n'importe quel navigateur. Il faut que ça soit un navigateur qui puisse lire une information provenant d'un serveur sinon le script php ne serait pas interprété. Ici, on est bien sur un serveur, localhost. On va tester, on reçoit nos trois champs. Dans le champ a, je vais mettre aa. Dans le champ b, bb. Et dans le champ c, l'email, je vais mettre c, tout simplement. Je vais faire un envoi par défaut. Et là, le navigateur me dit attention, veuillez inclure un @ dans l'adresse email, il manque un @. Et ça, j'ai rien fait, c'est qui ? C'est html 5. Dans la mesure où le type de champ est un type email, le navigateur est censé savoir que c'est un email. Donc, il me dit, tape un email. Si j'écris, ici par exemple, serveur. Et que je fais envoi par défaut. Il me dit oups, c'est pas très bon. Alors, là, on aurait du avoir un point tout simplement et deux ou trois caractères. .fr ou .com, etc... Il ne me le dit pas. Donc, vous voyez que là, il peut y avoir un javascript qui puisse intervenir pour me dire attention, l'adresse email est mal formulée. Quoiqu'il en soit, regardez, je reçois bien le a=a, le b=bb, mais je ne reçois pas le c. Tout simplement parce que si je reviens ici maintenant dans ma partie de code, je n'ai pas d'attribut name. Et donc, il n'y a aucune identification de ces données là côté serveur. Donc, faites attention, si vous voulez que la donnée soit bien interprétée côté serveur, il faut placer l'attribut name=ce que vous voulez, la valeur. Donc là, vous pouvez marquer name=c, pour le récupérer côté serveur. Un tantinet plus loin, on va dire que ce champs est requis maintenant. Je fais un Ctrl S, c'est un attribut, tout simplement, de ce champ. Si je retourne maintenant dans le navigateur, Je reviens sur la page précédente, j'actualise ma page, Et je vais taper ici bb. Et ici, je suis obligé de taper bien entendu, un email, Sinon le navigateur va me dire attention, il faut que tu formates une adresse email. Si j'envoie, on me dit veuillez renseigner ce champ. Vous voyez, encore une fois, html 5 va pouvoir venir contrôler cet élément parce qu'il est requis et il va falloir que je le saisisse ici, donc je vais taper aa, et je pars, et voilà. On n'a toujours pas notre adresse email qui a été validée qui a été récupérée parce qu'on n'a toujours pas l'attribut name. On le mettra plus tard. On a une autre possibilité également, c'est d'avoir des champs qui seraient situés à l'extérieur du formulaire. Et là, je suis à l'extérieur du formulaire donc j'ai un input de type text et j'ai bien le name, j'ai bien l'Id. J'enregistre. Je bascule sur le navigateur, j'actualise la page. On voit bien qu'on a ce champs en dehors. Comme lui est requis, je vais le renseigner. Lui également, le mail également. Et lui, je vais lui mettre dd, ici, pareil. Et je vais faire un envoi par défaut. Et vous voyez que dd n'est pas arrivé, pourquoi ? Parce qu'il ne fait pas partie du formulaire, donc il n'a pas été récupéré par l'enveloppe du formulaire. Mais html 5 nous apporte la possibilité de dire si je place l'attribut forme à l'intérieur de cet élément qui ne fait pas partie du formulaire et que je pointe vers l'Id du formulaire en question, c'est comme si je rejoignais cet élément au formulaire. Ça, c'est fabuleux parce que ça nous permet de prendre des éléments épars sur la page et de pouvoir les envoyer avec le formulaire malgré qu'ils ne fassent pas partie du formulaire d'envoi. Donc ici, si j'actualise ma page, je reviens. Il faut re-renseigner tout le monde. Et là, si j'envoie par défaut, vous voyez que dd est bien récupéré. Et bien entendu, vous avez compris que si, ici, on vient placer l'attribut name, cette fois-ci, égal c, que j'enregistre ce document, je bascule sur le navigateur. Je récupère, j'actualise, on a bien lui qui est obligatoire. On a lui qu'on peut ne pas renseigner si on veut. On va renseigner cc. On va renseigner dd. Alors, vous avez vu que b n'est pas renseigné. Je l'envoie. On me dit que a vaut aa, b n'a aucune valeur. C est passé maintenant, parce qu'il avait l'attribut name. Et dd est récupéré en dehors du formulaire. Voilà, donc vous avez compris les mécaniques qu'on peut mettre en place au sein de nos formulaires, pour pouvoir faire transiter des données depuis le poste client et les récupérer sur le serveur. Dernière petite vérification ici, regardez si ici, je tape get tout simplement. Et que je vins dans mon navigateur, je vais revenir sur cette partie-là, j'actualise. Je tape aa, puisqu'il est obligatoire. C'est le seul qui est obligatoire. Regardez ce qui va se passer au niveau de l'url, ici. Vous avez vu, j'ai ?a=aa. Bien entendu, tous les autres champs sont renseignés avec aucunes valeurs mais vous passez les données depuis l'url. Il y a une erreur côté serveu puisqu'il attendait des données post nous on lui a envoyé des données get, donc il va pas les récupérer. Mais vous avez vu que les données get sont transférées par l'url. Voilà tout ce qu'il fallait aborder également sur la mise en place d'un formulaire au sein d'un page web avec la relation client serveur qui s'impose.

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 !