Detailed explanation of the use of html <datalist> tag-HTML Tutorial-php.cn

Detailed explanation of the use of html tag

黄舟

Release： 2017-06-21 09:31:46

Original

9826 people have browsed it

In Web design, automatic drop-down prompts such as input boxes are often used, which will greatly facilitate user input. In the past, if you want to implement such a function, you must require developers to use some Javascript skills or related frameworks to make ajax calls, which requires a certain amount of programming work. But with the gradual popularity of HTML5, developers can use the new DataList tag to quickly develop very beautiful AutoComplete component effects

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

<!DOCTYPE HTML>
<html>
<body>
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</body>
</html>

Copy after login

Effect:

Detailed explanation of the use of html <datalist> tag ##

<!DOCTYPE html>
<html>
 <head>
    <title>HTML5 datalist tag</title>
    <meta charset="utf-8">
 </head>
    <p>
        浏览器版本：<input list="words">
    </p>
    <datalist id="words">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
        <option value="Sogou">
        <option value="Maxthon">
    </datalist>
 </body>
</html>

Copy after login

The code is as above, with the list attribute of the tag, using as the provided

data Set is written very much like drop-down list, but it has an automatic prompt function. Compatibility is as follows:

Chrome/Firefox/Opera and IE10+ are all supported, Safari still does not support it until version 7.

Usage example of datalist tag

			<!DOCTYPE html>

<html>

 <head>

    <title>HTML5 datalist tag</title>

    <meta charset="utf-8">

 </head>

    <p>

        浏览器版本：<input list="words">

    </p>

    <datalist id="words">

        <option value="Internet Explorer">

        <option value="Firefox">

        <option value="Chrome">

        <option value="Opera">

        <option value="Safari">

        <option value="Sogou">

        <option value="Maxthon">

    </datalist>

 </body>

</html>

Copy after login

datalist provides a predefined list, which is associated with input through id. When input is entered in input, there will be

Autocomplete (autocomplete) function, the user will see a drop-down list for selection.

The effect is as follows

Detailed explanation of the use of html <datalist> tag

It should be noted that in IE 10 and Opera, the user does not need to enter a character to see the drop-down suggestion list, while other The browser requires the user to enter at least one character to see the effect.

2. In Datalist, you can also specify a value for each drop-down column

Table option , as shown in the following code:

			 <label for="state">State:</label>
 <input type="text" name="state" id="state" list="state_list">
 <datalist id="state_list">
   <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
   <option value="AZ">Arizona</option>
   <option value="AR">Arkansas</option>
 </datalist>

Copy after login

If value is specified in option value, then after the user selects it through the drop-down list, the value displayed in the text box will be the value of value, as shown below:

Detailed explanation of the use of html <datalist> tag

3. Autocomplete attribute

This attribute can be set to on or off, indicating whether the input field should enable the autocomplete function, as shown in the following code:

			<form>
   <!-- 如果设置了autocomplete属性，则将会继承父元表单元素中autocomplete的值得，   
   如果也没设置，则默认autocomplete为on，这里没进行任何设置，所以firstName的autocomplete属性为on   -->
    <input type="text" name="firstName">
   <!-- autocomplete设置为on,浏览器将记忆下用户每次输入的值   -->
   <input type="text" name="address" autocomplete="on">   
   <!-- 设置为off，代表浏览器将不记忆用户在该文本框本次的输入，也不进行建议提醒   -->
   <input type="text" name="secret" autocomplete="off"> 
</form>

Copy after login

It should be noted that in the opera browser, if autocomplete is set to off, it will not be completed at all. The datalist is not displayed, but in other browsers, the datalist will be displayed, but the automatic suggestion reminder function is lost.

4. When should you use DataList

It should be noted that when using this kind of drop-down smart prompt box, you should also pay attention to the occasion. For example, in some scenarios where there are not too many choices, it is enough to use a general drop-down box. If users need to choose from a lot of data, it is recommended to use the Datalist drop-down suggestion prompt box, because it can facilitate users to quickly search and select.

5. How to deal with unsupported browsers

At the time of writing this article, only IE 10, Firefox 4+, Chrome 20+ and Opera support datalist, which means that datalist is not supported. Users with older versions of browsers cannot use the datalist function, but there are always ways. Here is a compromise method

Using the traditional select drop-down selection nested in the datalist Box

A good solution is to provide the traditional select drop-down text box while also providing a text box where users can enter ordinary text, as shown in the following code:

			<label for="country">Country:</label>
  <datalist id="country_list">
    <select name="country">
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
      <!-- more -->
    </select>
    If other, please specify:  
</datalist>
  <input type="text" name="country" id="country" list="country_list">

Copy after login

In the above code , the traditional select drop-down text box is nested in the datalist, and the input text box is still bound to the datalist. The advantage of this is that when running in a browser that does not support datalist, the effect shown above will be: One side is a drop-down selection, and the other allows the user to enter records that do not exist in the drop-down list. If the above code is run in a browser that supports datalist, it will have the original effect of only displaying one datalist.

6. Limitations of Datalist

Of course, Datalist also has limitations and shortcomings, which are reflected in:

1) You cannot use CSS to control it at will Or change the items in its drop-down suggestion list

2) Unable to control the position of the datalist

3) Unable to control how many characters the user enters each time the drop-down suggestion list appears

4) Case sensitivity cannot be controlled, or a drop-down suggestion list will appear when matching characters

5) It cannot be bound to the data source on the server side

The above is the detailed content of Detailed explanation of the use of html tag. For more information, please follow other related articles on the PHP Chinese website!