HTML5 Form Input Types
Some of the new input types introduced in HTML5 include:
email
url
tel
number
range
date
time
datetime-local
month
week
color
<datalist> Element
The <datalist> element provides an autocomplete feature on <input> elements. It contains a
set of <option> elements that define the available values for the <input>.
autocomplete Attribute
The autocomplete attribute specifies whether an input field should have autocomplete
enabled. Possible values include on and off.
Example Form
Here is an example form utilizing various HTML5 input types, the <datalist> element, and
the autocomplete attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Example</title>
</head>
<body>
<h1>HTML5 Form Example</h1>
<form action="/submit" method="post">
<!-- Email input -->
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" autocomplete="on" required><br><br>
<!-- URL input -->
<label for="website">Website:</label><br>
<input type="url" id="website" name="website" autocomplete="on"><br><br>
<!-- Telephone input -->
<label for="phone">Phone:</label><br>
<input type="tel" id="phone" name="phone" autocomplete="on"><br><br>
<!-- Number input -->
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="0" max="100"
autocomplete="on"><br><br>
<!-- Range input -->
<label for="satisfaction">Satisfaction (1-10):</label><br>
<input type="range" id="satisfaction" name="satisfaction" min="1" max="10"
autocomplete="on"><br><br>
<!-- Date input -->
<label for="birthday">Birthday:</label><br>
<input type="date" id="birthday" name="birthday" autocomplete="on"><br><br>
<!-- Time input -->
<label for="appt">Appointment time:</label><br>
<input type="time" id="appt" name="appt" autocomplete="on"><br><br>
<!-- Color input -->
<label for="favcolor">Favorite Color:</label><br>
<input type="color" id="favcolor" name="favcolor" autocomplete="on"><br><br>
<!-- Data List -->
<label for="browsers">Choose your browser:</label><br>
<input list="browsers" id="browser" name="browser" autocomplete="on">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
<br><br>
<!-- Submit button -->
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
Email, URL, Telephone, Number, Range, Date, Time, and Color Inputs: These
input types provide specific functionalities and validation for different kinds of data.
Datalist Element: The <datalist> element provides a list of options for the <input>
field, creating an autocomplete dropdown.
Autocomplete Attribute: The autocomplete attribute is set to on for each input field
to enable the browser to provide autofill suggestions.
This example demonstrates how to use various HTML5 form input types along with the
<datalist> element and the autocomplete attribute to create a more interactive and user-
friendly form.
