L'essentiel du HTML5

Découvrir les attributs de formulaire

Testez gratuitement nos 1333 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le formulaire possède un grand nombre de paramètres au travers des attributs que vous pouvez affecter. Faites-en le tour et découvrez à quoi ils correspondent.
04:39

Transcription

L'ensemble des champs, qu'il s'agisse de champs input, peu importe leur type, ou de champs de type select ou textarea au sein d'un grand nombre d'attributs qui sont interchangeables. Tous ne s'adaptent pas forcément à chacun des champs mais leur grande étendue nous permet de pouvoir paramètrer très finement chacun d'entre eux. Nous allons les explorer un à un, simplement en les attribuant au champ input et après, je vous invite à aller sur le W3C element, pour pouvoir distinguer qui s'adresse à qui, et surtout leur possibilité étendue que vous pouvez apporter. Alors, nous avons déjà l'attribut ID qui va permettre d'identifier le champ. Soit pour lui affecter un label, soit pour pouvoir intéragir avec lui avec du javascript L'attribut name, qui est très important parce qu'il nous permettre de transporter la donnée côté serveur et de la récupérer surtout côté serveur. Le type qui va définir la nature du champ, surtout pour les champs de type input. Autofocus va permettre de directement adresser le focus sur ce champ là, lors du chargement de la page. Donc, ça va permettre de directement placer le curseur dans le champ et dire que la personne va devoir saisir quelque chose. C'est par là que ça commence, plaçons directement le curseur à cet endroit. Ensuite, on a la possibilité de faire un disable. Vous avez vu le changement ici, regardez. Ici, le champ est actif ici, vous voyez, ici. Et dès que je le passe ici, il devient disable, c'est à dire qu'il est inactif. La personne ne va pas pouvoir ni saisir, ni intéragir avec cet élément là. Il a été désactivé. Vous savez, des fois, vous pouvez être dans un formulaire, c'est en cochant une case que vous allez rendre actif certains besoins d'information, certaines nouvelles données à rentrer dans le formulaire. Required, ça veut dire que le formulaire ne pourra pas être envoyé tant que ce champs là ne sera pas rempli, ne sera pas saisi. C'est un champ qui est requis. Form = formulaire. C'est un attribut qui va permettre de donner à un champ la possibilité d'être rattaché à un formulaire. Le formulaire qui aura l'identifiant formulaire pourra être envoyé avec lui, donc, lors de l'envoi par l'utilisateur. Placeholder, vous venez de voir ici, intéragir, regardez, Ctrl Z. Ici, il n'y a pas de texte à rentrer. Le texte de garde place, on va dire, le texte informatif que l'on a dans un champ pour nous dire voilà le type d'informations. Tapez votre nom, tapez votre adresse. Voilà le format de date de naissance à saisir. C'est un placeholder qui est accessible par certaines ruses css. Pour pouvoir être formater également mais qui généralement est formaté par le système d'exploitation également. Pattern, ça c'est fabuleux, c'est une grille d'expression régulière qui va nous permettre de définir le type d'information qui peut être saisi dans le champ. Donc ici, si j'écris [0-9], ça peut être n'importe quel chiffre de 0 à 9 qui pourront être saisis. Donc là, je vous invite à vous rapprocher des expressions régulières pour voir toutes les possibilités de peignes qu'on peut avoir pour pouvoir décrire le type de numéro ou d'information qu'on va devoir saisir dans le champ. Tabindex, c'est fabuleux, ça aussi. Malheureusement, c'est pas utilisé de manière correct c'est ce qui va nous permettre pour les personnes qui utilisent uniquement le clavier, de se déplacer à l'intérieur de l'ensemble des champs. Donc, à chaque fois que vous allez tabuler, vous allez passer vers ce qu'on appelle l'index de tabulation. Donc, si vous écrivrez tous vos champs 123456789, peu importe l'ordre du html, le tabulation va naviguer de ces éléments à ces éléments pour pouvoir naviguer. Alors là, ça devient un peu plus particulier, je vous invite à vous rapprocher de la partie accessibilité où on va explorer plus en avant l'utilisation du tabindex. Multiple dans les champs ou vous allez pouvoir faire des sélections vous allez autoriser la possibilité de faire plusieurs sélections et non pas qu'une seule sélection pour le champ. Autocomplete, vous avez vu tout à l'heure qu'on a tapé aa, bb. Les valeurs qui avaient été présaisies à l'origine vont être affichées dans un menu déroulant, dans une possibilité. Si l'autocomplete est off, forcément, vous n'aurez pas la possibilité de venir resaisir quelque chose qui a déjà été saisi par le passé. La valeur, c'est le petit conteneur, la petite propriété. Donc, dit différement, c'est comme tout à l'heure en php, on récupérait le nom de la propriété par l'attribut name. Et la valeur par ce conteneur là, par la valeur qui est contenue dans cet élément là. Enfin, le dernier élément, qui va être readonly, qui va permettre tout simplement de dire que ce champ est simplement en lecture seule. Donc, si vous utilisez par exemple, un montant, un montant TTC, un montant hors TVA, etc... Vous allez vouloir afficher ces valeurs à l'utilisateur. Vous pouvez les afficher dans des champs. Et dire attention, ça c'est readonly, c'est à dire que la personne va pouvoir le consulter mais ne pourra pas intéragir avec. C'est différent de disable parce qu'avec disable, la personne ne peut strictement rien faire avec. Là, c'est un champ simplement de lecture. Voilà donc les différentes possibilité d'attributs qu'on peut avoir pour les champs de formulaire.

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 !