L'essentiel de Dreamweaver CC 2017

Paramétrer les propriétés de formulaire

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour envoyer un formulaire, vous devrez d'abord mettre en place un script côté serveur. Dans cette séquence, vous vous limiterez à l'envoi d'e-mails et vous verrez l'ensemble des paramètres de configuration d'envoi.
07:07

Transcription

La base du formulaire mise en place, nous allons voir maintenant comment on va pouvoir exploiter cela d'un point de vu formulaire en tant qu'entité. Donc ici, sur la balise formulaire, la balise forme ici, l'inspecteur de propriétés va me renvoyer un certain nombre de paramètres à remplir. Donc le formulaire va devoir avoir un identifiant, et il est préférable de le donner dans le sens où vous pouvez avoir plusieurs formulaires qui cohabitent sur la même page. Par exemple l'inscription à la newsletter devra être distincte du champ de recherche et devra être distincte par exemple de la connection du login, voilà. Donc tout ce genre de formulaires peut figurer sur la même page, et le soucis c'est qu' au moment de l'envoi du formulaire, il faut bien savoir quels sont les champs qui font partis du formulaire. Les champs peuvent être à l'extérieur du formulaire depuis HTML5 et donc il est important de donner un identifiant au formulaire pour qu'il puissse rassembler ses petits. Au niveau de l'action de formulaire, ici, vous allez pointer généralement vers un fichier php. Petit soucis, c'est que là on ne fait pas de php parce que ça nous demanderait de le traiter coté serveur, ça nous demanderait de le traiter du coté de la base de données. Donc ce qu'on va faire, c'est on va faire un test au départ en faisant un < tout simplement. Et on va pouvoir demander de l'envoyer à une adresse@serveur.fr ce qui ne fonctionne pas mais ça va nous permettre, au moins, d'écrire les contenus, vous vous rappelez qu'on avait fait subject et body, ça va nous écrire toutes ces informations. Comment envoie-t-on les informations? Est-ce qu'on les envoie en méthode GET ou en méthode POST? En méthode GET, elles vont être encodées dans l'Url d'envoi, en méthode post, elles vont être jointes au fichier. On envoie un email, c'est parfait, moi le post me convient très bien. On peut donner un titre au formulaire, donc on peut utiliser pareil que tout à l'heure, < comme l'identifiant, ça ma va très bien, ou là on pourrait marquer par exemple, <. Qui serait un peu plus explicite on va dire. Est-ce que le formulaire doit se valider avant de l'envoyer ou est-ce que je peux cliquer, envoyer tout et n'importe quoi? Non, on peut le valider, donc si vous faîtes " No validate " Il va marquer que le formulaire n'a pas de validation. Vous voyez ici? Mais si vous le décochez, vous allez dire : Non, il valide, donc il n'y a pas l'information, donc il va forcément valider. Le coté autocomplete ça va permettre de mémoriser les informations tapées par l'utilisateur, et éventuellement de l'aider à le réécrire. Le mode d'encodage, c'est un choix, si vous envoyez que du texte binaire, donc il n'y a pas de soucis, vous allez pouvoir utiliser une application Urlencoded. Maintenant, si vous envoyez des formats de type binaire, qu'ils soient syllogisés, ceux d'image ou de fichiers zip, des documents de ce style là, il faudra passer à multipart/form-data. Donc là pour l'instant, c'est que du texte, on va pouvoirpasser dans ce format là. La Target serait si vous utilisiez plusieurs cadres de destinations, pour dire si le formulaire reçoit une réception, mais on pourra le cibler sur cet endroit là. Et l'encodage des caractères, on va demander de l'UTF-8 c'est-à-dire, comment va-t-on encoder les caractères qui seront saisis par l'utilisateur. Voilà. Donc, tout est rempli à ce niveau là, sauf que il y a quelque chose, quand même, qui me chagrine un peu, c'est que ici, au niveau des champs, on a défini la nature de ces champs, on a défini la placeholder, donc pour nous êtres humain, on sait que là c'est le login, le password et le mail, mais pour le système informatique, c'est pas trop précisé. Donc il faut reprendre tous les éléments un par un, et venir leur donner un nom. Pour ma part, j'aime bien commencer les éléments de formulaire par Ch, maintenant vous êtes totalement libre de les appeler comme vous voulez, mais moi je les appelle ch_nom, pour savoir que c'est un champ nom. Et vous allez voir que quand vous utilisez le Name ici, dans l'inspecteur des propriétés, vous faites d'une pierre deux coups. Vous classez la tribune name ici, qui est traité informatiquement, pour pouvoir récupérer, côté serveur, les informations, et ici, vous traitez avec un identifiant, de façon coté client, de pouvoir y atteindre avec un dollar JQuery, par exemple un dollar ID, ou avec un document d'élément by ID pour pouvoir récupérer le champ, nom, ici. Ici, on va faire exactement pareil, avec le ch_password. Voilà, PSWD. l'email, ça va être ch_mail, et pour le bouton, on est pas obligé de mettre d'identifiant, puisque ce sera notre bouton. Par contre ici, au niveau du bouton, on va avoir un attribut, on le regardera par la suite, en détails, mais ici, si on utilise un bouton de type, submit, cela permettra de faire l'envoi, mais il serait préférable de passer par un bouton de type bouton, qui permettra de faire l'envoi submit. Mais pour l'instant, un input type submit, ça va très bien. Ce qu'on va faire, c'est on va enregistrer tout cela, et on va pouvoir aller le visualiser dans un navigateur. Donc, ici, dès l'instant où on va le visualiser dans un navigateur, on a le formulaire qui se charge, on voit bien qu'on va taper le login, ici, on pourrait marquer <. Dès que je vais taper le mot de passe, le mot de passe, si je remarque <, on le voit pas, puisqu'il est un mot de passe, donc il est incrypté, il est caché. Et puis pour l'email je vais marquer < Voilà, et quand je fais inscrivez-vous, ici, on me dit :<< Non, non, il y a une validation à avoir, veuillez inclure l'@ dans le champ de l'adresse email. Ah Pardon, alors je vais inscrire l'@, puis dès que je vais faire inscrivez-vous, il va pas me compléter plus, donc vous voyez, c'est pas terrible à ce niveau là, donc il faudrait que je puisse quand même avoir une véritable adresse qui soit correcte. Mais dès l'instant où je vais dire valider, il me dit :<< Attention, vous avez rentrer ça, est-ce que vous voulez utiliser la saisie automatique pour pouvoir entrer toutes les données? Je dis OK, Voilà. Donc toutes les données sont rentrées, ça c'est le navigateur qui me le dit. Par contre maintenant, dès que je fais inscrivez-vous, ici, à ce niveau là, j'ai un email, qui est pas teriible d'un point de vue lisibilité, mais qui a au moins le mérite de fonctionner. C'est ici, il me dit que il va écrire à adresse@serveur.fr, l'objet, on pourrait le rajouter, alors je vous propose qu'on le fasse, on va fermer cet email là, je ne l'enregistre pas, je retourne dans le code dreamweaver, ici, et au niveau de mailto:adresse@serveur, je vais marquer " ? " je vais marquer subjectFormulaire en ligne. D'accord? formulaire abonnement en ligne. Par contre il faut mettre un petit =, ça aidera mieux. Je vais enregistrer cette partie là, on retourne du côté du navigateur, on actualise la page, et là on recommence l'histoire. Donc si je marque birnou, je vais marquer le mot de passe qui sera birnou. Ici, dans l'email, je vais marquer a@a.fr, d'accord le plus simple, je fais inscrivez-vous, et là on a bien, adresse@serveur.fr, on a bien notre histoire qui nous dit, le formulaire en ligne, puis ici, ch_nom=birnou et ch_pswd=binrou et ch_mail=a@ incodé à un Url. Rapplez vous le paramètre a.fr Voilà. Donc notre formulaire en ligne va pouvoir être testé, il est vrai que l'on va recevoir quelque chose qui sera un petit charabia, mais ça me permet de pouvoir fonctionner sans avoir de codes de serveur à écrire pour l'instant.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

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 !