What is the tag < datalist for>?
It is used to provide an "auto-fill" feature in form elements. It allows you to provide a list of predefined options to the user as they enter data.
For example, if a user starts inserting some text into a textfield, a list would be suspended with pre-populated values that they could choose.
The tag <datalist>
can be used in conjunction with a <input>
element containing a list
attribute.
An example of an element <input>
with predefined values in a <datalist>
:
<form action="formulario_cor.php" method="post">
<label for="cor">Qual sua cor favorita? </label>
<input list="cor" name="cor" >
<datalist id="cor">
<option value="Vermelho">
<option value="Rosa">
<option value="Amarelo">
<option value="Verde">
<option value="Azul">
<option value="Preto">
</datalist>
<input type="submit" />
</form>
This tag is new?
According to the documentation from w3schools to tag <datalist>
is new in HTML5.
Somehow, it can replace the functionality of
"Autocomplement" that currently exist in several
libraries/frameworks in Javascript?
Thanks to the Datalist tag no longer need to use jQuery
or some other framework JavaScript
, along with some server-side code to implement Autocomplement functionality in entries, search or fill in data in forms, which is commonly triggered when the user type a letter.
If, for example, we have had an entry where the user should include their country (as in the example above), we can add the list by element datalist, which provides users with certain filled in suggestions or limited only to the countries that are accepted for registration.
I didn’t know the tag, cool @Wallace. + 1
– Marconi