HTML5 Datalist control

HTML5 Web Development

HTML5 Datalist control is more alike Google Suggest. Before HTML5 presence even for a known list to be suggested, developers go for AJAX request to hit on the database and populate the suggestion list. For every keystroke, an AJAX request is fired. HTML5 ‘Datalist’ could be useful when the form is to be loaded with known list. For example, a form has to be chosen with month. I will explain down with the code how it could be achieved through Datalist HTML5 control.

Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Datalist Demo</title>
</head>
<body>
<form action="LoginPageSuccess.jsp" method="get">
<input type="text" placeholder="Month Name" id="MonthText" list="getMonthList" required>
<datalist id="getMonthList">
<option value="January"/>
<option value="February"/>
<option value="March"/>
<option value="April"/>
<option value="May"/>
<option value="June"/>
<option value="July"/>
<option value="August"/>
<option value="September"/>
<option value="October"/>
<option value="November"/>
<option value="December"/>
</datalist>
</form>
</body>
</html>

 

Screenshot of how it works:

Image

View original post

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: