Maison >interface Web >Tutoriel H5 >Quels sont les attributs de la balise HTML5  ? Utilisation spécifique de la balise HTML5 (avec exemples)

Quels sont les attributs de la balise HTML5  ? Utilisation spécifique de la balise HTML5 (avec exemples)

寻∝梦
寻∝梦original
2018-08-16 14:09:267169parcourir

Quels sont les attributs de la balise

HTML5fc86e7b705049fc9d4fccc89a2e80ee3 Découvrez l'utilisation spécifique de la balise HTML5fc86e7b705049fc9d4fccc89a2e80ee3 Cet article explique principalement l'utilisation et la fonction spécifiques de la balise HTML5fc86e7b705049fc9d4fccc89a2e80ee3, ainsi qu'une introduction à certains attributs de la balise HTML5fc86e7b705049fc9d4fccc89a2e80ee3

La définition et l'utilisation de la balise HTML5fc86e7b705049fc9d4fccc89a2e80ee3 ; balise :

fc86e7b705049fc9d4fccc89a2e80ee3 Utilisez cet élément en conjonction avec un élément d'entrée 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.

Attributs et descriptions des balises HTML5fc86e7b705049fc9d4fccc89a2e80ee3 :

AlternatingItemStyle obtient les propriétés de style des éléments alternés dans le contrôle DataList.

AlternatingItemTemplate obtient ou définit le modèle de l'élément alterné dans la DataList. Attributes obtient toutes les valeurs d'attribut du contrôle Web.

BackColor obtient ou définit la couleur d'arrière-plan du contrôle du serveur Web. .

BorderColor obtient ou définit la couleur de la bordure du contrôle Web.

BorderStyle obtient ou définit le style de bordure du contrôle serveur Web.

BorderWidth obtient ou définit la largeur de la bordure du contrôle du serveur Web.

CellPadding obtient ou définit la quantité d'espace entre le contenu de la cellule et la bordure de la cellule.

CellSpacing obtient ou définit la quantité d'espace entre les cellules.

Une collection de contrôles enfants dans le contrôle de liste Controls

DataKeyField Obtient ou définit le champ clé dans la source de données spécifiée par la propriété DataSource.

DataKeys stocke la valeur clé de chaque enregistrement dans le contrôle de liste de données (affichée sous forme de ligne).

DataMember obtient ou définit le membre de données spécifique dans la source de données multi-membres à lier au contrôle de liste de données.

DataSource Obtient ou définit la source qui contient la liste de valeurs utilisées pour remplir les éléments du contrôle.

EditItemIndex obtient ou définit le numéro d'index de l'élément sélectionné à modifier dans le contrôle DataList.

EditItemStyle Obtient les propriétés de style de l'élément sélectionné pour la modification dans un contrôle DataList.

EditItemTemplate Obtient ou définit le modèle de l'élément sélectionné pour modification dans le contrôle DataList.

Enable obtient ou définit une valeur indiquant si le contrôle du serveur Web est activé.

HeaderTemplate obtient ou définit le modèle pour la partie en-tête du contrôle DataList.

La hauteur obtient ou définit

Exemple de balise HTML fc86e7b705049fc9d4fccc89a2e80ee3 :

Ce qui suit est un élément d'entrée, ses valeurs possibles sont décrites dans datalist :

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

J'ai trouvé deux utilisations spécifiques de la balise HTML5fc86e7b705049fc9d4fccc89a2e80ee3, et j'aimerais les partager avec vous :

J'ai besoin d'un e-mail achèvement lorsque je travaille sur quelque chose récemment, donc je suis entré en contact avec datalist , je pense que c'est très utile. Datalist doit être utilisé conjointement avec la balise d'entrée et peut être utilisé pour les recommandations d'entrée, la complétion des e-mails, etc. L’utilisation pertinente sera brièvement enregistrée ci-dessous.

1.La balise HTML5fc86e7b705049fc9d4fccc89a2e80ee3 est utilisée pour les recommandations d'entrée :

<p>请输入您最喜欢的科目:</p>
<input type="text" list="mylist1">
<datalist id="mylist1">
<option value="电路原理">
<option value="数字电路">
<option value="模拟电路">
<option value="计算机原理">
</datalist>
</br>

L'identifiant de datalist doit être cohérent avec l'attribut de liste When. préparation à la sortie, saisie L'option option apparaîtra automatiquement ci-dessous. La liste de données a la fonction de requête floue. Par exemple, si vous entrez « route » dans la zone de texte, le contenu recommandé est les principes des circuits, les circuits numériques et les circuits analogiques.

2. La balise HTML5fc86e7b705049fc9d4fccc89a2e80ee3 est utilisée pour compléter l'e-mail :

code html :

<p>请输入您的邮箱:</p>
<input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2">
<datalist id="mylist2"></datalist>

code js :

function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("<option value=&#39;"+ email +"@qq.com&#39;>"+
"<option value=&#39;"+ email +"@126.com&#39;>"+
"<option value=&#39;"+ email +"@foxmail.com&#39;>"+
"<option value=&#39;"+ email +"@163.com&#39;>"+
"<option value=&#39;"+ email +"@gmail.com&#39;>")
}
}

L'attribut oninput de la balise input peut détecter les changements dans le contenu d'entrée Lorsque le contenu de la zone de saisie change, js est lancé pour ajouter l'option dans la liste de données. Si l'utilisateur saisit @ manuellement, aucune invite n'est nécessaire.

Différences entre HTML 4.01 et HTML 5 : La balise

fc86e7b705049fc9d4fccc89a2e80ee3

Prise en charge des navigateurs :

Tous les principaux navigateurs prennent en charge la balise fc86e7b705049fc9d4fccc89a2e80ee3, à l'exception d'Internet Explorer et de Safari.

[Recommandations associées]

Quels sont les nouveaux éléments structurels en HTML5 ? Utilisation de nouveaux éléments structurels en HTML5 (recommandé)

Qu'est-ce que la balise article en HTML5 ? Où l’élément article est-il utilisé en HTML5 ?

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!

Déclaration:
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