Le rôle de la balise datalist en HTML

La balise

datalist est utilisée pour fournir une liste d'options prédéfinies pour simplifier la saisie des données et éviter les erreurs de saisie. Il contient des éléments d'option qui affichent les options correspondantes lorsque l'utilisateur saisit du texte dans l'élément d'entrée associé. Les avantages incluent une expérience de saisie améliorée, une saisie standardisée, une saisie restreinte et une accessibilité accrue. Pour l'utiliser, spécifiez un attribut de liste pour l'élément d'entrée dont la valeur correspond à l'identifiant de la balise datalist.

Le rôle de la balise HTML datalist

La balise HTML datalist est utilisée pour fournir une liste d'options prédéfinies parmi lesquelles les utilisateurs peuvent choisir dans l'élément d'entrée. Il simplifie la saisie des données et permet d'éviter les erreurs de saisie.

Comment ça marche : La balise

datalist contient un ensemble d'éléments d'option qui représentent des options prédéfinies. Lorsque l'utilisateur saisit du texte dans l'élément d'entrée associé, le navigateur affiche une liste d'options correspondantes dans la liste de données. Les utilisateurs peuvent sélectionner un élément dans la liste ou continuer à saisir leur propre texte.

Avantages :

• Expérience de saisie améliorée : Fournir une liste d'options prédéfinies accélère la saisie des données et réduit les erreurs de saisie.
• Saisie standardisée : Assurez-vous que les données saisies par l'utilisateur suivent un format spécifique.
• Restreindre la saisie : Empêchez les utilisateurs de saisir des données invalides ou incohérentes en restreignant la liste des options.
• Accessibilité : Pour les utilisateurs d'appareils mobiles ou les utilisateurs qui ont des difficultés à taper avec les claviers, datalist peut améliorer l'accessibilité.

Utilisation :

Pour utiliser datalist, vous devez spécifier son attribut de liste dans l'élément d'entrée associé, et la valeur de cet attribut doit correspondre à l'identifiant de la balise datalist.

<code class="html"><input list="options">
<datalist id="options">
  <option value="Option 1"></option>
  <option value="Option 2"></option>
  <option value="Option 3"></option>
</datalist></code>

Exemple :

Considérez l'exemple suivant, qui fournit une liste de données pour sélectionner un pays :

<code class="html"><input list="countries">
<datalist id="countries">
  <option value="Afghanistan"></option>
  <option value="Albania"></option>
  <option value="Algeria"></option>
</datalist></code>

Lorsque l'utilisateur commence à saisir l'élément de saisie, le navigateur affichera la liste d'options suivante :

<code>Afghanistan
Albania
Algeria</code>

Utilisateur Vous pouvez en sélectionner un ou continuer à saisir votre propre texte.

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!