L'essentiel du HTML5

Comprendre les trois principales familles d'éléments

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les formulaires sont composés de trois familles d'éléments : les champs, les sélecteurs et les zones de texte. Apprenez à les utiliser et à les mettre en relation avec leurs étiquettes.
05:12

Transcription

Pour composer les contenus de nos formulaires, nous avons accès à trois familles principales d'éléments. Alors, je vous propose qu'on regarde ces trois familles et surtout la manière de pouvoir les utiliser et les mettre en place au sein du formulaire. Alors encore une fois, on a des css, ici que je vous invite à venir consulter si besoin était. Qui ne font pas partie, en gros, de notre approche, mais qui vont permettre de mettre en forme les formulaires au fur et à mesure qu'on les construit pour que ça soit plus explicite, plus compréhensible. Moins fouilli. Ici, on a notre balise formulaire et les principales familles qui les composent vont être d'entrée de jeu, la famille input. Donc, input, ce sont des champs. On a vu tout à l'heure que pour les boutons on utilise input. Pour l'email, on utilise du input. Pour du texte aussi. Donc, on verra plus en détail toutes les possibilités que la famille input nous propose et surtout en html 5, par la suite. Pour l'instant, on va se focaliser sur un simple champ texte, en disant que pour définir cette balise input qui fonctionne toute seule. C'est simplement une balise ouvrante et fermante à la fois donc il n'y a pas besoin de mettre une fermante après. Surtout pas. On va déposer l'attribut name, très important. Donc là, le nom va correspondre à la nature des données que l'on va envoyer. L'Id, on verra que l'Id est aussi important en soi. Il peut être important si on place du javascript par la suite mais aussi, on va le voir, pour pouvoir étiqueter cet élément. Et enfin, le type qu'on va définir, le support défaut sur du texte. Qu'est-ce qu'on voit, ici dans notre page ? On voit un simple champ. Et on n'a aucune information sur ce que ce champ doit contenir. Donc, il est important de l'associer à un label. Le label peut être une balise encapsulante. C'est à dire qu'on pourrait mettre une balise ouvrante, ici label, une balise fermante ici, mettre le texte. Je trouve que c'est quelque chose qu'il vaut mieux éviter pour avoir plus de souplesse de formatage. Et donc, utiliser une balise ouvrante/fermante et donc extérieure à la balise traitée, en question. Et de la mettre en relation avec l'attribut form. Et on va pointer vers l'attribut Id, ici de l'élément. Donc on sait que ce label est en relation avec ce input et possède l'étiquette nom. Donc je pense que c'est plus simple. On aurait très bien pu mettre le début de la balise ouvrante et le nom devant la balise femante, ici. Ou la balise ouvrante ici, le mot nom ici, et la balise fermante ici. Encore une fois, vous comprenez que c'est trop imbriqué l'un dans l'autre et c'est difficile à extirper par la suite avec le code. Le deuxième type de famille qu'on va rencontrer va être la balise select qui va placer tout simplement, vous voyez ici, un menu déroulant qui va pouvoir d'ouvrir ou se fermer pour pouvoir proposer des options. Cette balise select va avoir pareil, un name et un attribut ID. Et donc, on va forcément pouvoir lui associer une balise label qui dira, c'est l'objet de votre appel, ça va être ce qui va se passer à l'intérieur, ici. Alors, ce qui va se passer à l'intérieur, ça va être une option. Cette option, cette balise option, va devoir contenir deux informations très importantes. C'est à dire la partie étiquette, choix, qu'est-ce que vous proposez comme possibilité ? J'ai la possibilité choix, ici. Et surtout un attribut value, ici, qui va contenir une valeur quelconque. C'est la valeur qui va être envoyée côté serveur. C'est à dire qu'ici, dans le input, il va venir une valeur value qui se mettra par défaut, qui sera le contenu de ce que vous aurez tapé à l'intérieur du champ. Ici, cette option va être sélectionner par le sélecteur et va être renvoyée au serveur. Alors, c'est bien parce qu'on va pouvoir avoir comme ça, on comprend option 1, option 2, option 3, etc... Les énumérer. Mais on a la possibilité de créer ce qu'on appelle un optiongroup, ici. On va pouvoir indenter notre partie. Et créer des groupes d'option comme ça, qui vont pouvoir s'énumérer. Ce qui fait que maintenant, vous voyez, vous avez le choix 1 choix 2, choix 3, qui sont séparés. Et donc vous pouvez avoir ce genre de possibilités au sein des sélecteurs. Après, grâce au css, vous allez pouvoir fabriquer différentes approches visuelles à proposer dans les menus déroulants. La troisème famille d'éléments de formulaire sont ce qu'on appelle les textarea. Et contrairement à l'input tout à l'heure et à l'instar de la balise select, on a une balise ouvrante, une balise fermante, qui va contenir le contenu de cette balise textarea Alors, on va encore une fois, taper le name et l'Id, ici qui vont pouvoir être repérés d'une part pour la valeur transmise, d'autre part pour pouvoir étiqueter un label. Mais on a deux autres petites informations à entrer qui sont les colonnes et les rangées, que l'on va vouloir apporter à ces éléments éventuellement. Donc ici, j'aurais 30 colonnes, 30 caractères, si vous voulez, sur 10 rangées. Alors ici, ça peut être gérer par du css mais sachez quand même que des fois, si votre textarea n'est pas, ou la personne n'a pas utilisation de css, ça peut être une possibilité de forcer le textarea a faire une certaine dimension. Et bien entendu, on va pouvoir avoir notre label comme à l'accoutumé pour pouvoir contenir l'étiquette qui va être associée à ce champ. Voilà donc les trois familles principales auxquelles on a accès. Input, select et textarea. qui sont toutes les trois reliées à l'étiquette label qui va permettre de les identifier. Je vous invite dans une prochaine étape à voir tous les attributs, toutes les possibilités de paramètrage qu'on va avoir pour chacun de ces champs. Et toutes les possibilité de champ input auxquelles on a également accès.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

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 !