Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Créer les divers champs de formulaire

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Cette étape va vous permettre de consulter les multiples possibilités de présentation que le champ <input> vous propose. De plus, ces propriétés interagissent avec l'environnement hôte.
06:39

Transcription

Déjà en html 4, le champ input avait un grand nombre de possibilité. En html 5, cela a vraiment été étendu et ça nous permet d'avoir une approche vraiment explicative de leur utilisation. On a la première partie du champ input, qui peut être un champ input de type texte. Mais là, on va se retrouver avec un champ qui va être défini par l'affichage du navigateur et de l'operating system dans lequel vous êtes. Sous Macintosh, sous Android ou sous Windows, on n'aura pas le même rendu et sous Windows 10 ou Window Vista, encore une fois, on aura pas le même rendu également ça va être géré purement par le système. Donc, ça se passe au niveau du champ de DOM même au niveau de leur affichage, au niveau des css. À ce niveau là, le champ input de type texte n'a pas d'incidence, que l'ont soit sous l'un ou l'autre des systèmes. Mais les autres vont avoir leur incidence. Par exemple, un input de type email, déjà, dès qu'on va le saisir, si on a mis l'option validation, on va essayer déjà de dire, attention, est-ce que tu as bien saisi un email, l'@, etc... ? On verra qu'on peut le faire plus par du javascript aussi mais déjà, ça va se faire automatiquement. Mais surtout, sur un navigateur ou une application de type Android, à ce moment là, on aura le clavier qui va s'ouvrir avec la touche .com qui est déjà prête. On a un email, il y a de fortes chances qu'il y ait .com à la fin. Donc ça sera beaucoup plus facile à saisir. De la même manière, si on a un pavé numérique, si on a un téléphone à saire, ou un password, voilà, on va avoir des claviers numériques qui vont être adaptés en fonction du type de champ. Donc, le password, lui, sa particularité, c'est que les données saisies ici ne seront pas visibles à l'utilisateur. On aura des bullettes dès qu'on va taper à l'intérieur. Alors, des bullettes, ce sont des sortes de puces, ici, qui vont être saisies. L'url, pareil, ça va être sur un protocole http qui va être attendu. Et puis on a le téléphone. Alors là, le téléphone, ce qui est fabuleux sur Android, c'est que directement, on a le pavé numérique du téléphone donc dès qu'on doit saisir, on a plus qu'à taper un numéro de téléphone. Donc c'est beaucoup plus que d'aller chercher, de passer en majuscules ou verrouiller la partie haute pour récupérer comme sur un clavier azerty directement le 1234567. Donc, c'est très intéressant ce type de nouveau formatage qu'on a depuis html 5. Alors on va continuer ic, il y a l'équivalent du search. Ça va être un input surtout qui va permettre dans recherche dans les données. de taper une donnée numérique, une fourchette. Alors, vous voyez que les navigateurs vont le représenter sous forme du curseur comme ça. Et on aura des propriétés de type minimum, maximum, qui pourront être donné, ou de pas d'incrémentation. Est-ce qu'à chaque fois que je bouge le curseur, ça bouge de 0.1, de 1, de 10 ? Donc, c'est très puissant au niveau de html 5 sur le côté applicatif de tous ces champs de saisie. On n'a plus besoin de passer par du jQuery 8 ou tout autre librairie pour pouvoir coder ces type de components. On a l'élément de couleur. Ce qu'il y a de fabuleux, c'est que quand on va être en aperçu navigateur, on va avoir donc, un pavé numérique qui va s'afficher. Voilà, en basculant dans le navigateur, vous voyez que le curseur peut bouger directement. Et surtout, voilà, on a un gros chromatic system qui s'ouvre. Alors bien entendu, sous Windows, Macintosh ou Android on n'aura pas du tout le même résultat. On part dans le système mais l'utilisateur a l'habitude de ce composant. Et il peut y accéder directement depuis un formulaire html, c'est ce qu'il faut regarder. On va continuer, on a la possibilité de caler des mois. Ce qui est intéressant, c'est qu'ici, on a le calendrier qui s'ouvre et qui nous permet de séléctionner directement le mois nécessaire. Même chose sur les semaines. La date. Et le temps, donc l'heure qu'il peut être. Et ensuite le datetime, donc qui va être vraiment un timestamp qui va être vraiment un tampon ayant la référence en gros, du fuseau horaire dans lequel on se situe. Ensuite, on a la possibilité de faire un datetime local. Et pour aller plus loin dans l'exploration, on va dire, de tous ces éléments de base de chaque élément input, encore une fois, je vous invite à vous rapprocher du w3c et de venir explorer. Afin d'explorer et de venir prendre en compte tous les paramètrages fins que l'on peut apporter à leur spécificités. Alors, si on continue maintenant à ce niveau là, on va s'apercevoir qu'on a une autre famille d'éléments de type input, ici. Qui vont être les input de type fichier. Donc, ici, sur les input de ce type fichier, on va avoir un bouton qui va nous permettre en cliquand dessus, d'obtenir la boite de navigation système pour aller sélectionner un fichier. Alors là, vous voyez un a... Ça veut dire aucun fichier choisi. Chaque navigateur également, y va de sa propre phrase encore une fois. C'est le DOM shadow et ce sont des composants uniquement système. Donc ici, ça va nous permettre de pointer vers un fichier et on a le même avec images qui va permettre d'avoir non pas un bouton, mais d'avoir une image. Donc ça nous permet, plutôt que d'avoir un bouton ou un sélecteur afin de sélectionner le bouquet de roses choisi, on a trois photos. Et chacun de ces éléments sont des éléments de validation qui vont nous permettre de faire un choix au travers d'ubne image et non pas au travers d'un bouton comme on pourrait en avoir l'habitude. Après, on a le bouton pour soumettre le formulaire et bien entendu, comme on l'avait vu tout à l'heure, on a la possibilité d'avoir un type reset pour réinitialiser ou button pour avoir un bouton personnalisé. On a les champs de type radio. Alors les types radio, c'est quand j'en sélectionne un, ça désélectionne celui qui était sélectionné. On le verra juste après. Chexkbox, c'est une case à cocher. Cocher ou décocher toutes les cases qu'on veut de la panoplie. Et le dernier, c'est un champ de type cacher, qui nous permet d'envoyer des données qui font partie du formulaire mais que l'utilisatur ne voit pas. Donc ça permet de parfois transmettre des clés, des référence, dossier, etc... Qui ne sont pas nécessaire dans la partie visible du formulaire. mais qui nous servent sur la gestion côté serveur. Donc je vous disais, on peut regarder des cases à cocher. Vous voyez, ici la différence, c'est que quand je coche une case, je décoche les éléments, ici. Et on peut demander à une case d'être cochée par défaut. Donc ici, on peut donner l'attribut checked qui fait que lorsque j'actualiserai ma page, ici, vous voyez, par défaut, c'est cet élément-là qui est coché. Et la même chose maintenant sur les case à cocher, qui vont permettre cette fois-ci, de pouvoir cocher toutes les options ou aucune, que l'on souhaite, parmi le panel proposé. Encore une fois, on peut avoir une valeur cochée par défaut et le chargement de la page. Juste, petit détail que j'ai précisé ici, c'est qu'au niveau du name, que ça soit pour les boutons de radio ou pour les cases à cocher, le name doit petre identique pour le groupe. Afin d'associer ces trois éléments au même groupe. Et ici les valeurs vont différer, les identifiants vont différer pour pouvoir bien entendu les intercepter de manière autonome. Et puis renvoyer une valeur différente à chacun. Pareil pour les boutons radio. Voilà donc un champ input, qui quand même, sous html 5, nous apporte énormément de possibilités, d'ouverture vers l'applicativité et surtout de dialogue avec les appareils mobiles puisqu'ils vont forcément adapter les claviers qui seront forcément adaptés à l'utilisateur afin de saisir les données.

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 !