简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

À quoi sert la balise datalist html5 ? Voici des exemples d'utilisation de la balise datalist

寻∝梦
Libérer： 2018-09-03 17:33:54
original
5661 Les gens l'ont consulté

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

définit une liste d'options. Veuillez utiliser cet élément en conjonction avec l'élément input pour définir les valeurs possibles de l'entrée.

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>
Copier après la connexion

Ceci est affiché dans le navigateur comme suit :

À quoi sert la balise datalist html5 ? Voici des exemples dutilisation de la balise datalist

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 :

À quoi sert la balise datalist html5 ? Voici des exemples dutilisation de la balise datalist

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>
Copier après la connexion

L'effet est comme indiqué sur l'image :

À quoi sert la balise datalist html5 ? Voici des exemples dutilisation de la balise datalist

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

Comment centrer les caractères chinois dans la balise col en html ? Utilisation de base de la balise col html (avec exemples)

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!

Étiquettes associées：
html5
source：php.cn
Article précédent：Comment utiliser la balise d'en-tête html5 ? Introduction au rôle des balises d'en-tête html5 Article suivant：Explication détaillée des événements tactiles dans les terminaux mobiles
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1724
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1880
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1590
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1508
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1546
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！