Share
HTML5 a introduit un certain nombre de nouveaux éléments, parmi lesquels des contrôles de formulaire intéressants. L'élément datalist est un contrôle utile mais peu connu. Voyons ce qu'il peut faire pour nous.
Imaginons que nous ayons un formulaire et que nous voulions qu'un utilisateur entre une chaîne de texte, comme son nom par exemple. Nous avons le élément, qui permettra à l'utilisateur de taper ce qu'il veut. Imaginons alors que nous souhaitons que l'utilisateur entre son pays de résidence; nous utiliserions probablement un élément. Cela limiterait les résultats aux options disponibles (parfois une bonne chose) et présenterait également à l'utilisateur un potentiel énorme liste à choisir.
Mais que se passe-t-il si nous voulons que l'utilisateur soit libre d'entrer ce qu'il lui plait tout en recevant quelques suggestions? C'est ici que datalist entre.
le datalist contient option des éléments très similaires à la sélectionner élément, cependant datalist lui-même n'est pas un contrôle indépendant. Au lieu de cela, il est ajouté ou attaché à un élément utilisant le liste attribut. Considérez le balisage suivant:
Nous avons un habitué contrôler avec un identifiant et le nouveau liste attribut. Ceci indique au navigateur de charger la liste de valeurs ou de suggestions à partir du datalist élément avec un identifiant correspondant.
Puis vient le réel datalist élément avec le susdit identifiant et une collection de option éléments. C’est ainsi que les valeurs sont attachées à la contribution contrôle.
Lorsque nous lançons ceci dans le navigateur, nous voyons une zone de texte normale, puis lorsque nous commençons à taper (ou que nous appuyons sur la touche fléchée bas qui fonctionne dans Firefox et Chrome mais pas dans Opera), la liste complète ou filtrée apparaît. Au fur et à mesure de la frappe, seules les options appropriées seront affichées, un peu comme le champ de recherche de Google affiche les suggestions. Sachez cependant que de légères variations comportementales existent d'un navigateur à l'autre..
Selon le site Web officiel du W3C, le datalist peut être utilisé avec:
Accentsconagua
Nous pouvons pousser les options un peu plus loin en ajoutant un étiquette attribut, comme dans certains des éléments ci-dessous:
La manière dont ces étiquettes sont affichées et traitées dépend du navigateur. Jetez un coup d’œil à la section des bizarreries plus bas pour voir comment.
Le support du navigateur pour datalist est resté étroit jusqu'à récemment. Maintenant, IE 10+, Firefox 4+, Chrome et Opera le supportent (pas encore de Safari). Il est également pris en charge par Opera Mobile et Firefox pour Android. Jetez un coup d’œil à cette capture d’écran montrant l’état actuel, comme indiqué par caniuse.com:
Les anciens navigateurs ignorent automatiquement l'élément datalist.
Le soutien global mentionné est de 48,36%. On peut dire que ce n’est pas très bon, mais l’information positive est que les navigateurs plus anciens ignoreront automatiquement l’élément dataliste, nous offrant ainsi une expérience dégradante. Ceci est vrai pour tous les nouveaux éléments de formulaire HTML5. Si la prise en charge d'anciens navigateurs est requise, la saisie semi-automatique jQuery peut être utilisée comme solution de secours..
Étant donné que la prise en charge étendue des navigateurs n’est que récente, les fournisseurs peuvent en donner des interprétations prévisibles. Firefox et Chrome utilisent le thème du système d’exploitation pour styliser les options de la liste, tandis qu’Opéra héritera de certains styles (couleur, famille de polices) du répertoire. contribution champ. Sinon, oubliez de styler l'élément datalist avec CSS.
Le comportement varie également selon la manière dont les valeurs sont filtrées. Chaque navigateur traite la liste différemment lorsque le étiquette et valeur attributs de la option les éléments sont utilisés.
Par exemple, Opera filtrera sur la base de la valeur et du libellé. "by A" et "Brac" renverront tous deux "Brackets" dans notre cas.
Chrome, cependant, ignorera l'étiquette. "par A" ne retournera aucun résultat, par exemple, alors que "Brac".
Firefox affiche uniquement l'étiquette si elle est définie. "by A" retournera "by Adobe", mais "Brackets" n'existe plus du tout!
En ce qui concerne la mise en œuvre, de nombreuses améliorations sont possibles, mais dans l’ensemble, il s’agit d’un ajout bienvenu dans le monde du Web. J'espère que cela a aiguisé votre appétit!
