Apprenez à créer et utiliser les formulaires HTML

Les différents type de la balise input
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de vous enseigner à créer et structurer des formulaires HTML, d'utiliser efficacement la balise Input et d'explorer ses différents attributs pour améliorer l'interface utilisateur et l'accessibilité.

Cette leçon couvre l'utilisation de la balise Input en HTML pour créer des formulaires. Vous découvrirez les différents attributs et leurs rôles dans la création de champs de texte et la gestion des données.

Dans cette leçon, nous allons explorer la représentation des formulaires HTML en utilisant la balise Input. Nous commencerons par une introduction à la balise Input elle-même, avant d'examiner ses différents attributs dans une deuxième partie. La balise Input est essentielle pour créer des champs de saisie dans vos formulaires, permettant aux utilisateurs d'entrer des informations comme leur nom ou prénom.

Nous verrons comment utiliser les attributs type, id, et name pour identifier et gérer les champs de texte. Vous apprendrez également à lier les balises Label avec Input pour améliorer l'accessibilité de vos formulaires. Enfin, nous aborderons un attribut HTML5 plus récent, list, pour suggérer des options comme les moteurs de recherche préférés, grâce à la balise datalist.

À la fin de ce tutoriel, vous aurez une compréhension approfondie de la manière de structurer et de styliser des formulaires en HTML, en plus d'améliorer leur fonctionnalité et leur accessibilité pour tous les utilisateurs.

Voir plus
Questions réponses
Quel est le rôle de l'attribut 'name' dans une balise Input?
L'attribut 'name' dans une balise Input permet de définir le nom de la variable qui sera envoyée à un serveur lors de la soumission du formulaire. Il joue un rôle crucial dans l'identification unique des données soumises.
Pourquoi est-il important de lier une balise Label à une balise Input?
Lier une balise Label à une balise Input est important pour améliorer l'accessibilité. Les utilisateurs de lecteurs d'écran peuvent ainsi facilement comprendre et naviguer dans les formulaires, car le label décrit chaque champ de saisie.
Qu'est-ce que l'attribut 'list' et comment l'utiliser?
L'attribut 'list' est un attribut HTML5 qui relie une balise Input à une balise Datalist. Cela permet de proposer des suggestions automatiques de saisie à l'utilisateur, améliorant ainsi l'expérience utilisateur.
Alors, dans cette leçon, nous allons voir la représentation des formulaires, notamment avec une balise qui s'appelle Input. Nous allons faire un premier tuto sur la balise Input et un deuxième tuto sur les différents attributs de cette balise. Dans la partie administrative, je veux demander le nom de notre internaute. Alors, on va utiliser une balise Label qui va nous permettre de dire, de demander son nom. Ça, c'est ce que l'internaute va voir. Donc, nom, deux petits points et puis fin de label. Donc, le label, ça signifie, en gros, étiquette. Donc, c'est une petite étiquette qui va être située avant le champ dans lequel je vais pouvoir écrire. Et ensuite, cette fameuse balise Input qui va permettre à l'internaute d'écrire. Alors, la balise Input est une balise autofermante. Donc, la balise Input la plus classique est la balise Input avec un attribut qui s'appelle type égale texte. Ça, c'est la balise que vous avez largement l'occasion d'utiliser lorsque vous remplissez un formulaire avec le nom, votre prénom, etc. Vous devez ajouter également un identifiant qui permettra par la suite de pouvoir le mettre en forme très facilement. Donc, par exemple, on va mettre nom, puisqu'il s'agit du nom. Et puis, un name. Alors, dans le cas présent, on va mettre également nom, puisque il s'agit du nom. L'identifiant permettra, dans la suite, de travailler avec les styles CSS. Et le name permettra, en fait, au formulaire, sur de nombreux navigateurs, mais pas sur tous, certains utilisent ID, permettra au formulaire de dire « Envoie ce que l'internaute a écrit », donc son nom, finalement, avec ce name. Donc, il va envoyer une paire qui s'appelle nom égale ce que l'internaute aura écrit dans le champ du formulaire. Donc, il va y avoir ça, égale ce que l'internaute aura écrit. Donc, ça va permettre, par exemple, de stocker facilement les différentes données dans une base de données en les différenciant de manière certaine, puisque le name va être différent pour chaque balise input. Alors, si on veut progresser un tout petit peu, je vais revenir ensuite sur la balise label parce que je n'ai pas terminé. Donc, label. Imaginons qu'on souhaite mettre ici, maintenant, prénom. Donc, j'écris avec un accent, j'ai le droit, ici. Et puis, là, type texte, identifiant, c'est le prénom sans accent, puisque c'est identifiant. Et puis, le name, prénom et le navigateur. Lorsque je l'aurai renseigné, on verra prénom égale Thierry, par exemple. Alors, je vais revenir sur la balise label parce qu'elle n'est pas tout à fait terminée. Pour que le nom et le balise input soient totalement reliés entre elles, puisqu'il s'agit finalement d'une même chose, le nom égale le champ qui concerne le nom, on doit mettre un attribut supplémentaire qui s'appelle for égal. Et à l'intérieur des guillemets, on y met exactement le même mot que ce que l'on a mis pour l'identifiant. Donc, on a for qui correspond à l'identifiant. Label id égale prénom. Alors, tout ça, ça ne se voit pas, bien évidemment, au niveau du navigateur, mais c'est très important pour la suite des différentes techniques de création, notamment pour l'envoi du formulaire. Et notamment, vous le verrez, quand on fera un formulaire complet, pour les cases à cocher, les boutons radio, ce qui permet une meilleure accessibilité. Alors là encore, il s'agit d'accessibilité puisque l'internaute qui ne voit pas va être obligé d'écrire son nom dans un champ et il ne sait pas s'il faut écrire que ce soit le nom ou le prénom. Donc, le fait qu'on ait relié label et input avec cet attribut for permettra au navigateur Oro de bien avoir une correspondance entre ces deux balises. Donc ça, c'est une première chose. Deuxième chose, nous allons voir un dernier attribut, un autre attribut de la balise input, un attribut récent du HTML5 qui est l'attribut qui s'appelle list. Je ne vais pas le faire pour là, je vais créer un troisième, copier, hop. Coller, par exemple. Voilà, et puis on va demander votre moteur de recherche préféré. Votre moteur de recherche. Voilà, là on va mettre moteur, hop, et puis là, on va le réécrire là et le réécrire là. On reste sur un input type texte, pour l'instant, on ne se casse pas la tête là-dessus. Tout d'abord, avant de continuer, je vais vous montrer ce que ça donne. Voilà, donc on a trois champs, nom, prénom et votre moteur. On peut les mettre en forme de manière un peu plus sympa, simplement si on ajoute à l'intérieur de ce filset notre fameuse petite balise UL, puisque finalement un formulaire c'est une liste de choses à demander. Tout à fait valable en tant que formulaire. Et puis là, on y met des li, ce qui va nous permettre de séparer et de mettre sur des lignes différentes chacun des éléments, puisque le li, souvenez-vous, ça se met sur des lignes différentes. J'enregistre et puis on regarde là, on a quelque chose, ce n'est pas encore extraordinaire, mais on a des choses un peu plus lisibles. Donc, revenons à ce dont je voulais vous parler, li, input. Au niveau de input, on va ajouter un attribut qui se nomme liste. Donc liste égale, on va l'appeler par exemple urlliste. Underscore liste. Voilà, ça c'est ce que l'on va travailler. Alors, cet attribut va permettre d'être relié à une autre balise qui s'appelle dataliste, dans laquelle on va pouvoir faire des suggestions de moteurs de recherche avant même que l'internaute l'ait écrit à l'intérieur de ce champ. Par exemple, à l'intérieur de la zone fil 7, à l'extérieur de notre ul, ça n'a pas d'importance qu'il soit à l'intérieur ou à l'extérieur de ul puisque, en premier lieu, cet élément ne va pas être visible par l'internaute. Donc dataliste. On va tout de suite le fermer. Et à l'intérieur, on va y ajouter, en option, les différents éléments que l'on souhaite proposer. Alors, pour que ce soit parfaitement relié, ici, on va donner un identifiant. Et l'identifiant doit être rigoureusement égal à ce qu'on a écrit ici au niveau de la liste. Voilà. Alors, je vais écrire deux options pour l'instant. Option. Donc c'est qu'encore une nouvelle balise. Label. Label. Égal. Mettons, par exemple, Goblin. On va pas mettre Goblin, on va mettre Google. Google. Voilà. Et value. Eh bien, c'est le nombre d'adresses égale HTTP dot slash slash Voilà pour notre première option. On va prendre une deuxième. Copier. Hop. Coller. Allez, une troisième. Voilà. Donc Google, on va prendre Bing, par exemple. Bing. NG, je crois que c'est un .com Et enfin, Microsoft. Même si c'est pas forcément Microsoft, même si c'est pas forcément un moteur de recherche. Bien. Nous allons voir maintenant ce que ça donne. Je vais sur mon formulaire. Je réactualise. Là, je peux mettre mon nom. Voilà. Mon prénom. Les moteurs de recherche. Alors voyez, j'utilise le navigateur Chrome, mais j'ai un petit triangle qui me précise qu'ici, il y a des choses à voir encore. Et donc, en cliquant, je peux choisir facilement l'une des trois entrées que j'ai choisies. Voilà. C'est une chose relativement intéressante. Bien évidemment, en value, vous pourriez mettre autre chose que l'adresse. On peut mettre de nouveau Google. Si on regarde l'expression de cet élément, on a là l'adresse et le petit label qui est là. Alors faites attention, suivant les navigateurs, la représentation n'est pas tout à fait la même. Mais c'est quelque chose qui peut malgré tout être intéressant. On appelle ça la complétion. Alors une véritable complétion se réalise à partir d'une base de données avec des moyens de type AJAX. Mais grâce à ça, grâce à ce data list, on peut faire une pseudo complétion.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5