What attributes does the HTML5 tag have? Specific usage of HTML5 tag (with examples)

What are the attributes of the HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag? Learn about the specific usage of the HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag. This article mainly explains the specific usage and function of the HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag, as well as an introduction to some attributes of the HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag

Definition and usage of the HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag:

fc86e7b705049fc9d4fccc89a2e80ee3 tag defines the option list. Use this element in conjunction with an input element to define the possible values ​​of the input.

The datalist and its options are not displayed, it is just a list of legal input values.

Please use the list attribute of the input element to bind the datalist.

HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag properties and descriptions:

AlternatingItemStyle Gets the style properties of the alternating items in the DataList control.

AlternatingItemTemplate gets or sets the template of the alternating item in the DataList. Attributes gets all attribute values ​​​​of the web control.

BackColor gets or sets the background color of the Web server control.

BorderColor gets or sets the border color of the Web control.

BorderStyle gets or sets the border style of the Web server control.

BorderWidth gets or sets the border width of the Web server control.

CellPadding gets or sets the amount of space between the cell's content and the cell's border.

CellSpacing gets or sets the amount of space between cells.

Controls A collection of child controls in a list control.

DataKeyField gets or sets the key field in the data source specified by the DataSource property.

DataKeys stores the key value of each record in the data list control (displayed as a row).

DataMember gets or sets the specific data member to be bound to the data list control in the multi-member data source.

DataSource Gets or sets the source that contains the list of values ​​used to populate the items in the control.

EditItemIndex gets or sets the index number of the selected item to be edited in the DataList control.

EditItemStyle gets the style properties of the item selected for editing in the DataList control.

EditItemTemplate Gets or sets the template for the item selected for editing in the DataList control.

Enable gets or sets a value indicating whether the Web server control is enabled.

HeaderTemplate gets or sets the template of the header part of the DataList control.

Height gets or sets

HTML fc86e7b705049fc9d4fccc89a2e80ee3 tag example:

The following is an input element, and its possible values ​​are described in datalist ：

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

I discovered two specific uses of the HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag, and I would like to share them with you:

I need to complete the email when I make something recently. When I came into contact with datalist, I felt Very useful. Datalist needs to be used in conjunction with the input tag, and can be used for input recommendations, email completion, etc. The relevant usage will be briefly recorded below.

1.HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag is used for input recommendations:

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

The id of datalist needs to be consistent with the list attribute of input. When the output is ready, there will be a Option options appear automatically, and the datalist has the function of fuzzy query. For example, if you enter "road" in the text box, the recommended content is circuit principles, digital circuits, and analog circuits.

2.HTML5fc86e7b705049fc9d4fccc89a2e80ee3 tag is used for email completion:

html code:

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

js code:

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;>")
}
}

The oninput attribute of the input tag can detect changes in the input content. When the content of the input box changes, the js is started to append the option in the datalist. If the user enters @ manually, no prompt is needed.

Differences between HTML 4.01 and HTML 5: The

fc86e7b705049fc9d4fccc89a2e80ee3 tag is a new tag in HTML 5.

Browser support:

The fc86e7b705049fc9d4fccc89a2e80ee3 tag is supported by all major browsers except Internet Explorer and Safari.

[Related recommendations]

What are the new structural elements of HTML5? Usage of new structural elements in HTML5 (recommended)

What is the article tag in HTML5? Where is the article element used in HTML5?

The above is the detailed content of What attributes does the HTML5