Les Différents Types de l'Attribut Input en HTML5

Les attribut 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

L'objectif de cette vidéo est de familiariser les utilisateurs avec les différents types d'attributs input en HTML5, ainsi que de démontrer leur utilisation correcte pour améliorer la validation des formulaires et l'expérience utilisateur.

Dans cette leçon, vous apprendrez les diverses valeurs de l'attribut type de la balise input en HTML5. Ces nouvelles valeurs permettent de mieux structurer les formulaires et de faciliter leur validation.

Cette leçon traite des divers types d'attributs de la balise input en HTML5. Elle commence par illustrer l'usage de input type="tel" pour vérifier que seuls les chiffres sont entrés dans un champ de téléphone. Ensuite, d'autres types comme search, url, et email sont abordés, montrant comment ils rendent les formulaires plus sémantiques et accessibles.

La leçon continue avec des inputs de date et d'heure, tels que date et datetime-local, qui permettent aux utilisateurs de sélectionner une date directement dans un petit calendrier intégré au navigateur. D'autres types d'input comme range, qui offre un curseur pour choisir une valeur, et les types checkbox et radio, sont également explorés.

Pour finir, les fonctions des boutons submit et reset sont expliquées, montrant comment soumettre et réinitialiser un formulaire. La leçon insiste sur la nécessité d'avoir des noms d'attributs cohérents pour les boutons radio afin de garantir leur fonctionnement correct.

Voir plus
Questions réponses
Quel est l'avantage d'utiliser input type="tel" ?
L'avantage d'utiliser input type="tel" est qu'il permet de vérifier que seuls des chiffres sont entrés, facilitant ainsi la validation des numéros de téléphone.
Pourquoi les boutons radio doivent-ils partager le même attribut name ?
Les boutons radio doivent partager le même attribut name pour que le navigateur les traite comme un groupe. Cela permet de limiter la sélection à une seule option parmi le groupe.
Quelle est la différence entre les attributs type="submit" et type="reset" ?
L'attribut type="submit" envoie le formulaire au serveur pour traitement, tandis que l'attribut type="reset" réinitialise le formulaire à son état initial, effaçant toutes les saisies.
Dans cette leçon, nous allons voir les différentes valeurs de l'attribut type de la balaise input. Il y en a de nombreuses, donc je vais simplement à chaque fois copier et coller cette ligne, ce qui permettra d'aller plus vite. Nous avons un premier type, par exemple, qui s'appelle input type tel. Alors, ce qui permettra, par exemple, lorsque l'on pourra vérifier le formulaire, de vérifier qu'il y a bien uniquement des chiffres, ou que c'est bien dans la valeur de téléphone. Input type tel, donc là, on met identifiant, je ne sais pas, téléphone. Téléphone, name, téléphone, et là, votre téléphone. Voilà. Donc, autre type possible, donc c'est pareil, il s'agit ici vraiment de sémantique également. Dans les versions précédentes du HTML, nous mettions toujours du input type texte pour l'ensemble des différentes balises, mais le HTML nous permet aujourd'hui de bien différencier ces types. Alors, input type search, par exemple, qui permet de créer un champ de recherche. Voilà, et voilà. On peut également avoir un champ d'URL, pour une URL de site. Donc, input type URL. Votre site. Voilà, donc site, et puis site. Nous allons pouvoir également avoir un input type email, pour demander l'email de l'internaute. Donc, for mail, mail, votre mail. Et input type email. Ensuite, nous allons pouvoir également, éventuellement, s'il s'agit de demander un temps, un jour, une heure, input type date time. Qui, pour certains navigateurs, permettront d'afficher directement, enfin, en tout cas, pour input type date, directement un petit calendrier, ce qui n'est pas toujours le cas aujourd'hui. Alors, date time ne le fait pas forcément, mais le date, oui, le fait. Time. Nous allons pouvoir, donc, comme je vous le disais, utiliser un input date. Donc, input type date. Donc, nous avons également un input type range. Qui permet d'avoir un petit curseur, pour choisir, par exemple, différentes valeurs. Alors, attention, tout ça ne s'affiche pas forcément de la même manière, suivant les navigateurs. Donc, input type range, et puis après, on va passer à d'autres. Donc, on va mettre slider, et on va mettre slider. Et on va mettre d'autres. Donc, on va mettre slider, là, par exemple. Ça, ce sont les types HTML5 nouveaux. Notamment, en ce qui concerne le téléphone, la recherche, l'URL, l'email, le date time, le date. Qui serait, aujourd'hui, un petit peu long d'aborder. Mais, sachez qu'il en existe encore un certain nombre d'autres. Alors, maintenant, on va voir d'autres types. Un type que vous avez certainement eu l'occasion d'utiliser déjà, qui est la checkbox. Donc, la case à cocher. Alors, checkbox peut s'écrire de deux manières. Enfin, la structure peut s'écrire de deux manières. On peut l'écrire avec un label. Qui commence ici, et qui se termine après le checkbox. Alors, c'est checkbox. C'est une case à cocher. On va, par exemple, lui demander s'il souhaite la newsletter. Abonnement à la newsletter. On va mettre ici, news. Alors, ici, il n'y a pas l'attribut fort, puisque le label englobe l'attribut input. Donc, ce n'est pas la peine. Et puis, nous allons écrire la même chose, alors de manière un tout petit peu différente. Mais, par exemple, en demandant à l'internaute s'il souhaite venir à différents types de séminaires. Donc, ça va être également des balises de type input. Donc, input type checkbox. Et name séminaire. Et name séminaire. Voilà. Alors, je vais tout mettre à l'intérieur de la même balise LI. Qui est mal fermée, d'ailleurs. Voilà. Input type checkbox avec sème ici en identifiant. Alors, là, il s'agit, en fait, de demander à l'internaute s'il veut venir dans différents jours. Donc, par exemple, lundi, mardi ou mercredi. Voilà. Alors, input type, ça, c'est la case à cocher. Donc, à la fin, on va lui demander s'il veut venir lundi. Et puis, on lui demandera également s'il souhaite venir le mardi. Très important, dans le cas présent, nous avons le même name séminaire. Puisqu'il s'agit, en fait, du même renseignement. Mais, on doit ajouter un attribut qui s'appelle value. Pour pouvoir envoyer la valeur de ce que l'internaute aura coché. Donc, ici, s'il coche lundi, le formulaire enverra la value lundi. Ainsi que, ici, je suis obligé d'écrire value égale mardi. Etc., etc., si l'on a de nombreux jours de la semaine. Alors, on va faire une pétape intermédiaire. On va regarder. Voilà tous les champs que nous avons réalisés. Donc, nom, prénom, téléphone, recherche, votre site, tout ça. Il n'y a pas d'aspect vraiment particulier. Donc, là, calendrier, ici, il y a un petit aspect différent. Et puis, vous voyez, quand je clique sur le petit triangle, j'ai un calendrier qui s'affiche. Ce qui est super pratique. Alors, attention, ça ne s'affiche pas de la même manière sur tous les navigateurs. Donc, slider, et puis, abonnement à la newsletter, oui, non. Et là, je peux cocher les deux à la checkbox. A la checkbox. Donc, petite précision, si je veux que la cage soit déjà cochée lorsque de l'ouverture du navigateur. Alors, ce qui, honnêtement, ne fait pas partie très, très bien de la net étiquette. Puisqu'on ne doit pas imposer un choix à l'internaute. Mais, techniquement, cela existe. Donc, je vous le montre. Donc, checkbox, checkheed, qui permet d'avoir, je réactualise, la cage déjà cochée lors de l'ouverture. Donc, c'est checkheed. De la même manière, on pourrait écrire ça également. Alors, on va terminer notre formulaire avec deux, trois petites choses supplémentaires. Donc, notamment, des boutons radio. Et puis, le bouton qui va permettre d'envoyer notre formulaire. Alors, au niveau des boutons radio, donc, c'est semblable, finalement, aux boutons de type input checkbox. Donc, je vais copier celui-là. Typiquement, on va demander monsieur, madame ou mademoiselle. Voilà, alors là, je vais mettre monsieur. Et puis, ce n'est pas un type checkbox, c'est radio. Alors, la différence entre un bouton radio et une checkbox, c'est qu'un bouton radio, on ne peut le cocher qu'une seule fois. Si je veux le décocher, je suis obligé de cocher un autre bouton radio. Alors qu'une checkbox, on peut en cocher ou la décocher autant de fois que l'on souhaite. Donc, là, ici, on va mettre civilité. Name, eh bien, on va mettre un M pour monsieur. On va mettre civilité, ici. Et puis, là, au value, on va mettre un M pour monsieur. Voilà, donc, notre petit bouton radio. Je recopie-colle. Et cette fois-ci, bouton radio toujours, civilité, civilité. Je vais mettre madame, M, E, et puis madame. Voilà, bien. Alors, une chose importante, c'est que pour les boutons radio, pour pouvoir utiliser le fait que la case se coche ou se décoche, enfin, on coche une case que parmi un certain nombre. Alors, par exemple, je vais mettre civilité 1, ici. Voyons ce qui se passe. J'actualise. Voyons ce qui se passe. J'actualise. Et là, bon, lundi, mardi, tout ça, on a vu que ça fonctionnait, pas de problème. Je peux cocher et décocher monsieur, madame. Je peux cocher monsieur, mais là, tel que je l'ai écrit, à cause du fait que, là, j'ai mis identifiant civilité 1, je vais remettre civilité 1, ici. Voilà, et je réactualise. Alors, je peux cocher monsieur, et je peux également cocher madame. Parce que, en fait, j'ai mis deux noms différents au niveau de name. Donc, pour pouvoir bénéficier du fonctionnement réel d'un bouton radio, il faut que le name, ici, soit identique. J'actualise, monsieur, et quand je coche madame, monsieur se décoche. Voilà, ça, c'est le mécanisme normal des boutons radio. Donc, faites bien attention à ça. Le name doit être rigoureusement identique, sans quoi vous ne bénéficiez pas de ces fonctionnalités. Alors, on va terminer, maintenant, par un petit bouton, un petit input. type égale submit. C'est le bouton qui va vous permettre d'envoyer votre formulaire. Alors, on peut lui donner un identifiant. id égale envoi. Voilà, un name, éventuellement. Bien que, là, ce ne soit pas hyper utile, puisqu'il y a besoin de récupérer ce bouton. Et puis, on peut lui donner une value. Envoyez-moi, par exemple. Donc, là, vous pouvez mettre absolument ce que vous voulez. Si vous n'en mettez pas, cela prendra le mot qui est défini par défaut dans le système d'exploitation. Un dernier bouton, et nous en avons terminé, globalement, avec l'ensemble de Values Input. Input type Reset, qui va nous permettre d'effacer, de remettre à zéro, de remettre à l'état initial, notre formulaire. Je vais mettre raz. Bien encore, une fois, si vous ne mettez rien, ça donne les mots classiques, les mots prévus par le système d'exploitation. Alors, là, qu'est-ce qui se passe-t-il ? On va mettre nom, par exemple. Voilà, prénom, th, etc., etc., etc. J'appuie sur raz. Alors, je décoche ça, par exemple, et j'ai mes mots. Raz, voilà. Nous remet le formulaire à l'état initial, c'est-à-dire qu'il nous recoche de nouveau cette case à cocher, puisqu'elle a été initialement cochée dès le départ. Donc, attention, ça ne signifie pas effacer, ça signifie remise à zéro. Et puis ensuite, quand on clique là-dessus, le formulaire, par son mécanisme, va récupérer l'action qui est située ici, avec le égal, et permettra d'envoyer votre formulaire.
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