What attributes does the HTML5 <datalist> tag have? Specific usage of HTML5 <datalist> tag (with examples)-H5 Tutorial-php.cn

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

Definition and usage of the HTML5tag:

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.

HTML5tag 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

HTMLtag example:

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

Copy after login

I discovered two specific uses of the HTML5tag, 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.HTML5tag is used for input recommendations:

请输入您最喜欢的科目：

Copy after login

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.HTML5tag is used for email completion:

html code:

请输入您的邮箱：

Copy after login

js code:

function suggestEmail(){ var email = $("#emailInput").val(); $("#mylist2").empty(); if(email.indexOf("@")>-1){ return false; }else{ $("#mylist2").append("

Copy after login

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

tag is a new tag in HTML 5.

Browser support:

Thetag 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 HTML5tag have? Specific usage of HTML5tag (with examples). For more information, please follow other related articles on the PHP Chinese website!