Maison > Article > interface Web > À quoi sert la balise datalist html5 ? Voici des exemples d'utilisation de la balise datalist
À quoi sert la balise datalist html5 ? Voici des exemples d'utilisation de la balise datalist
- 寻∝梦original
- 2018-09-03 17:33:545679parcourir
Cet article vous parle principalement de l'utilisation de la balise datalist html5 et des exemples d'utilisation de la balise datalist html5. Cet article présente deux exemples de boîtes d'options couramment utilisées parmi lesquelles tout le monde peut choisir. Jetons un coup d'œil à cet article ensemble
Jetons d'abord un coup d'œil à l'utilisation de la balise datalist html5 : La balise
La datalist et ses options ne seront pas affichées, c'est juste une liste de valeurs d'entrée légales.
Veuillez utiliser l'attribut list de l'élément d'entrée pour lier la liste de données.
Disponibilité : datalist : liste d'entrée sélectionnable (plus pratique que la liste déroulante de sélection, uniquement)
Regardons maintenant un exemple de balise datalist html5 :
Ce qui suit est un élément d'entrée avec des valeurs possibles décrites dans la liste de données :
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="PHP中文网"> <option value="html"> <option value="寻梦"> </datalist>
Ceci est affiché dans le navigateur comme suit :
C'est l'effet sans aucune action. C'est une zone de saisie. Voyons maintenant l'effet du déplacement de la souris vers le haut et du clic :
Regardez, l'effet sort. Il s'agit de l'utilisation de base de la balise datalist html5.
La valeur de l'attribut de liste de la zone de saisie d'entrée est l'identifiant de la liste de données, de sorte que la liste de données puisse être associée à la zone de saisie d'entrée. La liste de données elle-même ne s'affiche pas, elle ne s'affichera automatiquement que lorsqu'elle devra être mise en correspondance avec l'entrée.
Un autre exemple d'utilisation de la balise datalist html5 :
Dans la conception Web, des invites déroulantes automatiques telles que des zones de saisie sont souvent utilisées, ce qui facilitera grandement la saisie des utilisateurs. . Dans le passé, si vous souhaitez implémenter une telle fonction, vous devez exiger des développeurs qu'ils utilisent certaines compétences Javascript ou des frameworks associés pour effectuer des appels ajax, ce qui nécessite une certaine quantité de travail de programmation. Mais à mesure que HTML5 devient progressivement plus populaire, les développeurs peuvent utiliser la nouvelle balise datalist pour développer rapidement de très beaux effets de composants de saisie semi-automatique.
Exemple de code de la balise datalist html5 :
<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset="utf-8">
</head>
<p>
浏览器版本：<input list="words">
</p>
<datalist id="words">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">
<option value="Maxthon">
</datalist>
</body>
</html>L'effet est comme indiqué sur l'image :
C'est l'effet après avoir cliqué. Cette boîte d'options n'est-elle pas très bonne ? .
D'accord, c'est l'introduction de la balise datalist html5. Si vous avez des questions, vous pouvez les poser ci-dessous.
[Recommandation de la rédaction]
Comment écrire du code d'espace html ? Récapitulatif de l'expression du code spatial html
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!