Datalist element in HTML 5
- It displays options for the users to select.
- It is with auto complete feature helping users as they type in the text box
- Unlike drop down list box or radio button user can write any text without limiting to options given by datalist.
- Datalist is bind ( or linked ) by input element list attribute.
<input name="section" list="scripts" />
<datalist id="scripts">
<option value="PHP" />
<option value="JavaScript" />
<option value="ASP" />
<option value="Dot Net" />
<option value="Perl" />
<option value="JSP" />
</datalist>
HTML Datalist for selection of options or adding new input by user
Here is the demo of Datalist.
Difference between Datalist and Options of a dropdown list box
Options : User can select one of the options of a list box.Datalist : In datalist user can select one or can enter anything other than the available choices.
When to use Datalist
When we give user the choice to enter data other than the available list then datalist to be used. If we don’t want user to enter anything other than available list then go for options.
Example of Datalist
We ask user to enter the name of the town they are staying. We are not sure of having a list of all the towns as option to select by the user. Here user can select the town name if available or can enter a new town which is not available in our list of towns.Datalist is a powerful tool for developers. Here are some of the applications.
Adding options to a Datalist by JavaScript
Adding options to a Datalist from MySQL table by using PHP and Ajax
Displaying Matching words by using Autocomplete while entering text JQuery UI
Datalist is not supported by Safari browser.HTML Form Drop down Listbox Checkbox in a form
This article is written by plus2net.com team.
- Text Field to enter any (short ) text usually upto 100 chars length
- Hidden Field to pass data not visible to user
- Password Field Similar to text field but date entered is not masked or shown as **
- TextArea Entering large amount of text
- RadioButton Selecting one option out of many
- Checkbox Selecting one or more option out of many
- ButtonTo trigger user generated events or action
- Image Button Used to click actions for some script of event to happen
- Submit Button A button to all user entered data of a form
- Two Submit ButtonsSubmitting same form data to two different forms
- Submit new window Submitting form data to a new window
- Reset Button A button to reset the form data
- Drop-Down Menu Selecting one option from a list of option available in a list box or drop down menu
- Datalist Options to Select with Auto Complete facility
- Back Button Returning to previous page by clicking
- File UploadUploading files to the server by using html form
- Set focus Keeping cursor on input box at the time of page loading
| vamsi | 24-11-2014 |
| How can i make to submit the form after selecting a option from datalist ?? | |