L'essentiel de Dreamweaver CC 2017

Découvrir la palette des formulaires

Testez gratuitement nos 1252 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
De manière très contextuelle, la palette d'insertion et l'inspecteur de propriétés vous permettront d'affiner les paramètres de chaque type de champ de formulaire. Bien entendu, tous les nouveaux champs HTML5 seront pris en compte.
06:26

Transcription

Parmi les divers éléments de formulaire, ici, donc j'ai remplacé la palette d'insertion sur le côté gauche pour pouvoir les explorer un à un, on a donc le classique élément de texte. Alors, maintenant, explorons chacune des propriétés que l'on peut avoir pour tous ces types d'éléments. En général, on a la possissibilité de définir la taille, et le maximum de caractères à saisir. Alors si le Max Length est quelque chose d'important, surtout si vous entendez, par exemple, un code naf, ou un code siret ou autre, vous avez 8 caractères à saisir, vous direz le maximum c'est je peux en mettre 8. Ca c'est une propriété qui peut être utilisée. Mais la taille, il est préférable peut-être, d'utiliser des CSS pour définir la largeur. La valeur, c'est la valeur par défaut qu'il peut y avoir. Ne pas confondre avec le Place Holder. Par exemple, si vous avez un formulaire en ligne, vous faîtes une édition depuis une base de donnée, forcément il y a des données qui vont existées. Quantité d'achats, par exemple, ou prix de ventes etc. Donc ces valeurs, seront la valeur qui sera transportée par le champ et va avoir un attribut Value. Donc, par défaut, si je tape "biernou", chaque fois que, ici, je vais taper, le formulaire va se charger, la valeur par défaut sera entrée. S'il n'y a pas de valeurs, si le champ est vide, vous pouvez le laisser vide, directement, ce n'est pas gênant. ici, au niveau ensuite, du titre, là c'est le titre classique, et ce qui est important de voir ici, là, c'est toutes les options par défaut. Donc, si ce sont des attributs à une seule valeur, par exemple, ici, vous voyez, ça a créé, il est désactivé. Ici, ça va être un " Auto Focus ", ça va être de donner le focus à cet élément là quand on va charger le formulaire dans la page. " Required ", c'est quelque chose qui va être requis, donc on pourra pas, ne pas le remplir. " Read Only " il aura les valeurs, il sera actif mais il sera simplement lisible, on pourra pas taper dedans. Et "Auto Complete", vous utilisez la possibilité de pouvoir le remplir. Les éléments de liste, on les verra dans une étape supplémentaire, autre. Donc, ici je vais simplement le faire disabled, pour pouvoir le voir disabled, et ici, on va pouvoir continuer à rentrer d'autres propriétés. Donc, le password, on l'avait vu tout à l'heure, c'est un champ un peu particulier puisque le password va afficher des bullets, donc , on ne verra pas, on ne pourra pas lire les caractères. Ensuite, le type mail, il va bénéficier en gros des mêmes attributs, sauf que au moment du filtrage, on va attendre qu'un @ fasse parti du champ, et certains , comme celui-ci, peuvent donner la possibilité d'être mutiple, c'est-à-dire que vous allez pouvoir rentrer plusieurs emails, et pas qu'un seul mail. Donc séparés par des virgules, généralement. Le champ de téléphone qui va permettre de pouvoir avoir un protocole tel, pour pouvoir taper un numéro de téléphone, ici. Et donc, les champs classiques sont réutilisés, la seule différence, c'est que, ici, le fait de pouvoir placer dans la valeur, un attribut téléphone, va pouvoir donner un lien vers le protocole téléphone. Les smartphones, les tablettes, tous ces appareils mobiles vont pouvoir, dès l'instant où l'utilisateur va taper dans le champ pour pouvoir entrer des données, avoir un clavier qui va s'afficher avec les numéros des 6 mots, puisque le numéro de téléphone se rentre de la sorte. Un champ d'Url va permettre, cette fois-ci, de filtrer le fameux http. Et là, pareil, vous allez obtenir les mêmes propriétés généralement, que tous les autres types de champs. Le champ de date, ici, va permettre de pouvoir saisir une date, mais surtout de pouvoir offrir le calendrier sans avoir à passer par un JQuery. Vous avez la même chose pour l'heure, pour les semaines, pour les mois, etc. Les plages vont vous demander d'avoir un " range ". Alors par contre, sur la plage, ici, il va falloir qu'on dise que le minimum, par exemple, ce soit 0. Le maximum ce soit 100, le step c'est 10, et là, on va pouvoir, donc, définir une sorte de petit curseur qui va pouvoir se déplacer sur une règle de guide. Ici, la possibilité de rendre des fichiers, alors ici, pareil, on a la possibilité d'avoir " Multiple " qui peut être activé. C'est-à-dire je peux entrer plusieurs fichiers, ou je ne peux en rentrer qu'un seul. Si vous voulez filtrer les types des fichiers, par contre, ça va être fait d'un point de vue javascript ou d'un point de vue php côté serveur. les champs masqués qui peuvent nous permettre, mais qu'on ne verra pas, mais qui nous permettent de pouvoir envoyer des informations sur le serveur, comme par exemple certaines informations ou de cookies ou d'identification. Les " textarea " qui, eux, vont pouvoir donner la possibilité de rentrer un message. Alors ici, au même stade qu'on avait le size, ici on aura la possibilité de rentrer le nombre de colonnes, dès l'instant où on est en area,ici, vous pouvez rentrer le nombre de rangées et le nombre de colonnes. Mais là, encore une fois, ça peut être préférable de le traiter directement par du CSS, et ensuite les boutons de " Submit " et de " Reset " qui vont vous permettre, à la fois de réinitialiser les valeurs par défaut, ou de pouvoir envoyer les valeurs du formulaire. Voilà. Il ne reste plus qu'à enregistrer et tester dans un navigateur. Donc, tous les fichiers input se présentent tous de la même manière, sauf, à part, un peu, la date, ici, qui nous permet d'avoir un calendrier qui va permettre d'afficher la date par défaut, ou de la réinitialiser. Donc ça, c'est le navigateur qui le gère, donc chaque navigateur proposera son propre visuel. Ici, le range, qui va permettre, vous voyez, je peux pas glisser, en dehors d'une valeur de 10, pour le step qui a été défini. Choisissez un fichier, ça va ouvrir la boîte de dialogues et on va pouvoir joindre un fichier. Donc, si j'essaie d'en joindre 2, il ne veut pas. Ce serait une multiple qui serait cochée, j'aurais la possibilité de joindre 2 fichiers. Par contre, faites attention au niveau de l'envoi, lencodage devra être Binary Data, parce que vous allez joindre des fichiers. Ici, c'est la zone de texte area, qui va permettre de taper du contenu au km par l'utilisateur et qui, par défaut, est redimensionnable également. Sauf si vous la bloquez ici, mais si vous la bloquez pas, elle va être redimensionnable. Le bouton d'inscrivez-vous, et la bouton de reset. Alors, l'intérêt du bouton de reset, c'est que si je définie une date ici, et que je fais reset, Voyez, je réinitialise toutes les valeurs par défaut, y compris le range. Une possibilité d'utiliser cette boîte de dialogue d'insertion, qui va nous permettre de pouvoir intégrer tous les éléments de formulaire de manière très simple et très succincte et puis de s'aider au niveau de l'inspecteur de propriétés pour pouvoir affiner chacun des paramètres. Et vous avez vu que l'inspecteur de propriétés est vraiment contextuel et propose les champs qui sont très particuliers à chacun des champs. Comme les champs de plage, les champs de dates, les champs de fichiers, etc. qui vont pouvoir s'adapter et nous proposer des propriétés spécifiques à ces champs.

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 !