L'essentiel de Dreamweaver CC 2017

Intégrer un formulaire et ses propriétés

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Passez à la pratique en plaçant un formulaire entre HTML et CSS. Ne vous préoccupez pas des détails, construisez les premières bases en plaçant rapidement le formulaire et quelques champs.
06:10

Transcription

Pour travailler avec les formulaires dans Dreamweaver, il est préférable au départ, de placer la palette d'insertion en tant que palette, afin d'avoir chaque fois les labels et les textes qui vont identifier les icônes, ça permet de se familiariser avec et puis d'aller beaucoup plus vite pour intégrer ces éléments. Donc depuis quelques versions, déjà, de Dreamweaver, la liste des éléments de formulaire s'est pas mal allongée, surtout en fonction de tous les nouveaux éléments de type HTML5 qui vont permettre de rentrer des champs très appropriés, comme les champs de téléphone, les champs d'Url, les champs d'email, qui vont, d'une part, avoir un peigne bien adapté à eux, c'est-à-dire de pouvoir filtrer la nature de l'information qu'ils vont atteindre. Une Url, elle va atteindre du http, un email, il va atteindre un @, un téléphone, il sait qu'il va pouvoir se connecter directement sur le protocole qui va bien pour pouvoir apporter, d'une part, les écrans et les claviers nécessaires sur les appareils mobiles. Donc Dreamweaver intègre toute cette panoplie là et on ne va pas revenir sur ces éléments un par un, je vous invite à venir les découvrir. L'essentiel c'est que l'on puisse comprendre les mécaniques et la manière de les utiliser au sein de l'interface. Alors, première chose à faire avant d'intégrer un formulaire, c'est de placer un élément de formulaire, qui est une balise form. Cette balise form, au départ, se présente dans sa plus simple valeur, c'est-à-dire simplement la balise, et ensuite, nous allons pouvoir venir dans l'inspecteur de propriétés, pour pouvoir les renseigner. Pour l'instant, je vous invite à ce qu'on passe à autre chose, on reviendra de manière détaillée pour explorer chacun de ces champs. Ce que je vous propose, c'est de mettre en place un petit formulaire. Donc, si on regarde sur l'inspecteur ici, dans notre site, on a simplement besoin d'un formulaire très succinct qui va être un titre pour expliquer ce qu'il doit être, le login, le mot de passe, le mail, le bouton de connection et point barre. Pas besoin de plus. Il est vrai qu'on peut fabriquer toujours de formulaires extrêmement complexes, extrêmement complets, mais on va pouvoir aussi, bien souvent utiliser des tout petits formulaires, et je vous propose qu'on se focalise là dessus pour en décortiquer les mecaniques et la manière de le faire en fonction. Alors, à l'intérieur de l'élément de formulaire, on pourrait directement taper des balises h1, h2, pour mettre le titre etc. Il existe déjà, des ensemble de champs qui sont prêts à être utilisé. Et là dessus, je pourrais marquer par exemple, Abonnez-vous et connectez-vous. Voilà. Pas besoin de faire plus. On a ça, et là ça nous met ce qu'on appelle un <, un jeu de champs et une légende. Le jeu de champs permet de découper les éléments. Regardez, si je prends ici, cet élément là, je vais pouvoir le cloner par exemple, et on pourrait très bien avoir ici, je sais pas, moi, administration, et ici information, ou parti civilité, parti professionnel, etc. Donc on va pouvoir découper tous ces éléments là, et bien sûr que là, le fieldset, est un élément par défaut, donc avec une couleur grise. Mais vous pouvez personnaliser le style de ce fieldset pour pouvoir l'adapter à vos besoins. Maintenant on peut très bien utiliser la légende sans utiliser les fieldset, et on est pas obligé d'en utiliser plusieurs. Donc ici, en mettant simplement ceci, on peut directement avoir le titre de ce formulaire. Et ce qui est intéressant, c'est que là maintenant, pour tous les moteurs, qu'ils soient des moteurs de lecteurs d'écran, ou des moteurs d'indexation, de contenu, c'est sémantique, c'est structurel d'une part, parce qu'il y a le titre, mais c'est sémantique en même temps parce qu'on comprend que c'est la légende de ce formulaire. Ensuite, vous pouvez venir à l'intérieur de cette légende,, sans soucis, venir redécouper structurellement en mettant par exemple, un < ici, qui va, bien sûr si la feuille de style est adaptée, vous permettre de formater visuellement le titre comme vous le souhaiter. Ensuite, on va pouvoir rentrer plusieurs champs. Donc ici, on a besoin de rentrer 4 champs. Donc je vais faire un <, ici, grâce à Emmet et d'avoir 4 champs. Par défaut, ces 4 champs sont des champs de type texte. Mais on va pouvoir maintenant venir, grâce à un inspecteur de propriétés , taper dans tous ces champs là. Alors j'aurais très bien pu prendre un champ de type texte, venir dans la partie ici, et le glisser directement sur ma page, voilà, en utlisant le dôme, les positions de mains,etc. Vous voyez, vous pouvez venir. Et on aurait tout un certain nombre d'informations comme le label etc. Mais je vous invite à ce qu'on le fasse dans une étape secondaire. Pour l'instant, on va rester vraiment focalisé sur cette possibilité d'utiliser l'inspecteur de propriété pour personnaliser les éléments comme on le souhaite. Donc, ici, <, on va pouvoir changer le type de cet élément et utiliser directement ce que l'on souhaite. Donc le premier texte, ça me va très bien, Le second, c'est un mot de passe. Donc ici, ce que je vais venir faire, c'est taper<< password, et si vous regardez, vous avez tous les champs qui sont disponibles directement sur l'éditeur de codes. Donc ici, je vais demander quoi? Je vais demander email, et vous voyez que là vous l'avez. Et le dernier, c'est un bouton qui va partir, donc je vais pouvoir faire un submit, ici directement, et vous voyez c'est très rapide à faire, très rapide à utiliser et à paramétrer. Donc maintenant, ce que l'on va avoir besoin de présenter, je vais éditer le code, ici code, Appliquer le format source, histoire de reprendre une indentation qui me convienne. On va pouvoir entrer ce qu'on appelle des placeholder. Les placeholder, ce sont des attributs qui permettent de placer un texte, au départ, par défaut dans le champ, et qui s'effacera, bien entendu, dès que l'utilisateur va commencer à taper ses données. Donc ici, on va pouvoir faire un placeholder également pour dire votre mot de passe. Le dernier email, votre email, et enfin, le dernier ici, ce n'est pas un placeholder comme on aurait pu le voir ici, directement dans cette propriété là, le dernier c'est un submit, ça va être une value,ici est la value, ça va être inscrivez, voilà, tout simplement. Donc voilà, pour mettre en place un formulaire, c'est relativement simple, vous allez pouvoir vous aider soit de l'éditeur de codes, soit de la palette d'insertion, soit de l'inspecteur de propriétés. Et je vous invite à ce qu'on regarde ça en détails dans des étapes dédiées.

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 !