L'essentiel de Dreamweaver CC 2017

Insérer les cases à cocher

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous serez amené à utiliser des éléments de sélection de groupe, qu'il s'agisse de choix uniques ou multiples. Dreamweaver vous permet de mettre rapidement en place des cases et des boutons de radio à cocher, grâce à une boîte de dialogue spécifique.
04:15

Transcription

Du côté des boutons radio et des cases à cocher, vous avez la possibilité d'installer un seul bouton radio. Il n'y a pas vraiment d'intérêt dans le sens où une fois qu'il est coché, on ne peut pas le décocher. Donc, c'est bien mais c'est un peu limite. Donc, il faut au minimum deux cases d'option. Donc ici, il vous faudra passer par le groupe de case d'option et placer que deux options. Pour la case à cocher, il ne peut y avoir qu'une seule case, par exemple, je reconnais avoir lu les mentions légales, il n'y a pas besoin, on coche, décoche à volonté, mais il n'y a qu'une case, on peut utiliser qu'une seule case. Bien entendu, on peut utiliser un groupe de cases à cocher. Alors là, que vous soyez dans la partie code, ou que vous soyez dans la partie rendu, peu importe, le résultat va être le même. Donc, on va utiliser des groupes à chaque fois, on va utiliser un groupe de boutons de radio au départ. Dans le bouton de radio, c'est du choix unique, on peut faire qu'un seul choix. Vous allez pouvoir avoir plusieurs étiquettes, donc ici, si je prends un choix numéro 1, et choix numéro 2, la valeur envoyée, on pourra dire, que c'est A, et ici que c'est B, voilà. Vous pourrez rajouter un autre choix éventuellement, le choix numéro 3 et la valeur envoyée sera la lettre C, par exemple. Ca c'est ce qui va être stocké, ce qui va être renvoyé dans le serveur, stocké dans la base de données. Vous pouvez organiser chacun de ces éléments, les faire monter, les faire descendre, etc. Ensuite, au niveau de la mise en forme, vous avez le choix, enfin c'est pas la mise en forme, on va dire, plutôt le choix de la structure que vous allez utiliser. Soit vous utilisez des balises labels input classiques, avec des < qui vont permettre de faire des retours de ligne à chaque fois, soit une mise en page, un tableau avec des colonnes et des rangées qui vont être moins maléables quelque part, un peu plus verbeuses, mais qui des fois, dans certains cas peuvent être beaucoup plus utiles, beaucoup plus pertinentes. Alors ici, on va faire pour le choix unique, et puis maintenant pour le choix multiple, en fait on va utiliser pareil, le groupe de cases à cocher, on va l'appeller ; Choix multiple. Et là pareil, on va pouvoir placer choix numéro. Alors juste pour garder quelque chose de cohérent, je vais garder numéro 4, numéro 5, on peut en rajouter d'autres, numéro 6 et pourquoi pas numéro 7, Voilà. Et puis là, au niveau des valeurs, vous pourrez utiliser la lettre D, E, F et G ici. Pareil, vous pouvez monter et descendre chacun de ces éléments, vous pouvez utiliser le même principe de structuration et vous dites OK. Voilà. Alors du côté de la structuration, qu'est-ce que ça a fait? Alors ça a fait un paragraphe, et ce paragraphe est constitué de labels imbriqués. Vous vous rappelez les manières de pouvoir mettre soit le label avant, soit après. Donc ici, le label est imbriqué, et le label est placé après l'input. Alors c'est pas un label qui utilise for-in, ce qui permet, quelque part, d'avoir une mise en ligne sans trop s'embêter d'un point de vue feuille de style. Et puis vous voyez, là, il n'y a rien du tout qui a été fait côté feuille de style, c'est très simple à utiliser pour cet aspect là. Donc, voilà. Ici, toutes les informations sont placées. Petit soucis, c'est que vous n'avez pas d'outils englobant qui va vous permettre de dire j'édite mon bouton radio et je bascule dans cette boîte de dialogue qui va me permettre de le modifier à souhait. Non, là, il va falloir modifier dans le code, mais bon, c'est pas gênant, vous avez compris le principe. Si on fait un Ctrl+S, et qu'on a un aperçu dans un navigateur, mais on a bien un choix unique dans cette partie là. Par contre, on ne peut pas désélectionner, il n'y a pas de possibilité. Et puis ici, on va pouvoir cocher ou décocher. Voilà. A souhait. Alors si on regarde maintenant, du côté de chacun de ces éléments input de manière indépendante, ici, on a la possibilité de dire que, par défaut, il a été checked, par exemple, et on pourrait dire qu'au départ, pour imposer la personne à avoir un champ, on pourrait dire que le numéro 1 a été checked également. Donc, ici, il suffit de se mettre dans la partie input et cocher checked. Je vais aller dans la partie multiple également, pour pouvoir maintenant demander, par exemple, à cet input également de passer un checked, de façon à en avoir 2 de cochés au démarrage. Voilà, ce qui fait que si j'enregistre et que je bascule dans le navigateur une fois encore, ici, on a déjà des choix qui ont été faits, uniques et multiples et qui peuvent être faits et défaits, etc. Donc, des propriétés simples à utiliser, et après, c'est un choix de mise en forme et d'organisation au niveau des feuilles de style.

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 !