L'essentiel du HTML5

Utiliser les datalists

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le HTML5 propose de compléter les outils de sélection en apportant les datalists. Il s'agit d'éléments proposant un contenu et pouvant être enrichis au moment de la saisie utilisateur.
02:17

Transcription

Html 5 apporte encore une fois une solution au sélecteur qui ne pouvait pas être incrémenter. C'est à dire qu'un sélecteur propose un choix fixe de propositions. Et on doit choisir parmi ces propositions. On n'a pas la possibilité de pouvoir en ajouter un énième. Avec l'élément datalist, html 5 nous permet de palier à cette problèmatique. Alors, regardons le pour l'exemple. Ici, on va commencer tout simplement par mettre en place un élément datalist, tout simplement. Balise ouvrante, balise fermante. Et on va rentrer sous forme d'option, uniquement la balise ouvrante, pas besoin de la balise fermante. Mais dans la partie value, on va passer une valeur. Alors, ici, on va pouvoir passer tout un certain nombre de valeurs. Ici, dans cette liste de propositions. O,n va ensuite créer ce qu'on appelle un champ input de type text, on va lui donner un identifiant. Par exemple, arrondissement. C'est vrai que la datalist ici n'est pas anodine, Elle correspond aux divers arrondissement de la ville de Graz, en Autriche. Donc, on va dire que cet attribut input correspondra aux arrondissements. Et bien-sûr, on va mettre le label qui va bien, en adéquation avec cette liste d'arrondissements. Si je visualise ça dans un navigateur, je vais pouvoir venir taper tout ce que je veux à l'intérieur de ce champ. Mais je n'aurais aucune aide. Pour avoir une aide, tout simplement, c'est que je vais dire qu'à cette datalist, je vais donner un identifiant et je vais lui dire que c'est la liste des arrondissements. Et je vais retourner dans l'attribut de la liste de la balise input ici et la mettre en relation avec cet élément datalist. Si j'enregistre que je visualise dans un navigateur, Voilà, j'actualise ma page ici, on voit bien que j'ai une datalist. Si je clique sur le petit sélecteur, j'ai toutes les listes proposées un peu comme le ferai un élément de sélecteur classique. À ceci près que si je commence à taper, par exemple, ici, la lettre ja, vous voyez que j'ai la possibilité directement d'intéragir avec le système et d'avoir les possibilités que j'ai sur cet élément là. Mais rien ne m'empêche de pouvoir taper une autre valeur dans ce champs et pouvoir envoyer ça vers le serveur. Donc, ça nous donne la possibilité d'avoir à la fois la souplesse de la présélection d'éviter les fautes d'orthographe. Mais en plus, l'ouverture vers une nouvelle entrée.

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 !