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 de Dreamweaver CC 2017

Placer les labels

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour identifier les éléments de formulaire, utilisez des labels et créez des relations entre les champs grâce à des attributs. Des champs externes au formulaire peuvent également être joints à l'envoi.
04:39

Transcription

jusqu'à présent, nous sommes partis du principe que, d'une part, pour identifier le champ de saisie, on allait placer un place holder et secondement, on allait utiliser un ID , un name identifié pour pouvoir parler côté serveur. On va voir qu'il existe une autre possibilité, c'est que, dès l'instant que vous allez placer un champ, ici, je vais me placer par exemple sur la légende, dans un formulaire, depuis la palette d'insertion, vous allez avoir la possibilité de pouvoir utiliser, ce qu'on appelle un label. Alors le label, il y a deux manières de l'utiliser. La première, c'est comme on le voit par défaut, comme c'est placé par dreamweaver, c'est-à-dire, que le label est placé juste en dessus du champ utilisé, quel que soit le champ, et il y a une relation entre le label et le champ par l'attribut fort,ici, qui pointe directement vers le name et l'ID de ce champ placé. Donc, ici, maintenant, si je regarde bien, j'ai text field, ici, alors vous marquez ce que vous souhaitez à l'intérieur de ce champ,ici, à l'intérieur du noeud du type de texte, afin de pouvoir identifier cet élément. Si vous pointez sur l'élément text field, ici, ce que vous avez, c'est que ça va nous aider à pointer vers le champ ad hoc. Alors il y a une autre possibilité, maintenant, je vais le copier/coller, ici, sauf que cette fois-ci, je vais dire que c'est le numéro 2, ici, qui va pointer vers le numéro 2 et vers le numéro 2. Qui fait que dans le champ label, ici, si vous actualisez, vous avez le 1 ou le 2 qui peuvent être pointés. Mais là, à la limite, presque ce label n'a pas la nécessité d'exister, dans la mesure où on peut imbriquer directement entre la balise ouvrante label et la balise fermante label, le champ concerné. Et là, le système va comprendre, puisque le label englobe le champ, on a la possibilité donc, de comprendre que ce champ appartient à ce label. Ce qui permet des fois de pouvoir assigner un label à 2 éléments. Mais après, c'est libre à vous d'utiliser l'un ou l'autre. Sachant que la première partie ici, va donner une souplesse structurelle et architecturale beaucoup plus grande que celle-ci, puisqu'il n'y a pas d'imbrication entre les noeuds, mais par contre ici, vous allez avoir une imbrication qui va justement donner un sens sémantique plus fort au champ de l'input. Simplement, humainement parlant, parce que informatiquement parlant, la relation avec l'attribut fort est déjà très explicite. Un autre cas de figure qui peut se présenter, donc, je vais copier le premier champ ici, je vais le placer à l'extérieur, ici, et on va le placer de manière ancienne, par contre ici, je vais utiliser le numéro 3, et ici, 3, pour identifier ce label. Et là, ce champ, on voit explicitement, qu'il est placé à l'extérieur directement du formulaire, mais par contre, on souhaiterait pouvoir l'envoyer avec le formulaire. On peut très bien visuellement, et structurellement parlant, avoir un formulaire qui soit placé par exemple, dans un bas de page, et avoir un formulaire isolé qui soit placé complètement en haut , à gauche, qui n'a rien à voir avec la structure architecturale du formulaire, mais qui doit être envoyé avec. Pour cela, c'est très simple, regardez, je vais prendre le champ input, ici, et dans ces propriétés, depuis l'inspecteur de propriété, voyez qu'ici, vous avez le formulaire, et je peux très bien dire qu'il est relié avec le formulaire abonnement. Et on voit bien que c'est le text field numéro 3. Si j'enregistre tout ça, et que je teste depuis un navigateur, ici, alors rappelons-nous, on avait utilisé l'idée de l'envoi par mail, ici, c'est le numéro 1, ici, c'est le numéro 2 et ici, c'est le numéro 3. Et si je fais, inscrivez-vous, on voit bien que j'ai le text field1, text field 2 et le text field 3 qui sont envoyés, pourtant le text field 3 ne fait pas partei du formulaire. Alors, bien entendu, pour mieux le mettre en évidence, ce que je vous propose de faire, c'est de retourner dans Dreamweaver, supprimer cet attribut là, faire un Ctrl+S, retourner dans le navigateur,ici, actualiser la page, le formulaire reste identique, par contre là, si j'envoie le 1, j'envoie le 2 et j'envoie le 3, au moment de l'inscription, on voit bien que seuls le 1 et le 2 sont partis, le 3 n'a pas été lié. Donc, vous avez la possibilité de pouvoir utiliser des formulaires avec des labels pour pouvoir permettre de mieux identifier la corrélation entre, à quoi sert le champ et le champ d'un point de vue humain. D'un point de vue informatique, vous les reliez par des attributs forts, et tous les champs de formulaire, qui seraient placés à l'extérieur du formulaire, peuvent être joints au formulaire envoyé, simplement en rajoutant l'attribut forme ici, qui va pouvoir mettre en relation, ces deux éléments.

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 !