Scribd
Upload
3 views

HTML5 Form Input Types

Dnsnjddjjdjd

Uploaded by

Shabna N
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

HTML5 Form Input Types

Dnsnjddjjdjd

Uploaded by

Shabna N
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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.

You might also like