What are the properties of the html5<datalist> tag? Specific usage of html5<datalist> tags (with examples)

What are the properties of the html5<datalist> tag? Html5<datalist> the specific use of tags. This article mainly explains the specific usage and function of the html5<datalist> tag, as well as some properties of the html5<datalist> tag.

Definition and usage of html5<datalist> tags:

<datalist> tags define a list of options. Use this element in conjunction with the INPUT element to define the possible values for input.

DataList and its options are not displayed, it is just a valid list of input values.

Use the List property of the input element to bind the DataList.

Html5<datalist> Tag Properties and Description:

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

AlternatingItemTemplate Gets or sets the template for alternating items in DataList attributes gets all the property values for 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 contents of the cell and the border of the cell.

CellSpacing Gets or sets the amount of space between cells.

A collection of child controls in the controls list control.

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

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

DataMember Gets or sets the specific data member in the multi-member data source to bind to the data list control.

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

EditItemIndex Gets or sets the index number of the selected item in the DataList control to edit.

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

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

Enable Gets or sets a value that indicates whether the WEB server control is enabled.

HeaderTemplate Gets or sets the template for the caption portion of the DataList control.

Height Gets or sets

HTML <datalist> Tag Examples:

The following is an INPUT element that describes its possible values in DataList:

<input id= "MyCar" list= "Cars"/><datalist id= "Cars" >  <option value= "BMW" >  <option Value = "Ford" >  <option value= "Volvo" ></datalist>

I found the two-point specific use of the html5<datalist> tag to share with you:

Recently do things need to complete the mailbox, contact DataList, feel good use. DataList is required with the input tag to use, can be used in the input recommendation, mailbox complements the same situation. The following is a simple record of related usage.

The 1.html5<datalist> label is used in the input recommendation:

<p> Please enter your favorite subject: </p><input type= "text" list= "Mylist1" ><datalist id= "Mylist1" ><option Value= "Circuit principle" ><option value= "digital circuit" ><option value= "analog circuit" ><option value= "Computer principle" ></datalist ></br>

The ID of the DataList needs to be consistent with the list property of input, the option is automatically displayed below input when the output is ready, and DataList has the function of fuzzy query, such as entering "road" in the text box, the recommended content is circuit principle, digital circuit and analog circuit.

2.html5<datalist> tags are used on mailbox completion:

HTML code:

<p> Please enter your email: </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=" + email + "@qq. com ' >" + "<option value= '" + email + "@126.com ' >" + " <option value= ' + email + ' @foxmail. com ' > ' + ' <option value= ' + email + ' @163.com ' > ' + ' <option value= ' "+ Email + "@gmail. com ' >")}}

The Oninput attribute of the input tag can detect the change of input content, and when the contents of a box change, the departure JS is appended with option in DataList. If the user enters the @ manually, no prompt is required.

The difference between HTML 4.01 and HTML 5:

The <datalist> tag is a new label in HTML 5.

Browser support:

All major browsers support <datalist> tags, in addition to Internet Explorer and Safari.

"Recommended"

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

What are the article tags in HTML5? Where is the article element used in HTML5?