Forms in HTML5 — Notes
■ Short Notes (Revision Version)
Forms in HTML5
Used to collect user inputs (like name, email, files, etc.). HTML5 introduced new input
types and validation attributes.
Advanced Input Types:
color, number, url, image, date, email, month, range, datetime-local, time, week, search,
file, tel
Input Attributes:
disabled, max, min, pattern, readonly, placeholder, required, autocomplete, autofocus,
multiple, id, class
Example Tags:
<input type="email" required>
<input type="number" min="1" max="100">
<input type="file" multiple>
■ Detailed Notes (Exam Version)
HTML forms are used to collect data from users such as names, addresses, and other
information.
In earlier versions of HTML, input types were limited to text, password, radio, and
checkbox.
HTML5 introduced several new input types and attributes to make forms more interactive
and validated automatically.
Input Type Description
color Defines a color picker.
number Field for entering numeric values.
url Field for entering a website link.
image Displays an image as a submit button.
date Allows date selection (year, month, day).
email Field for entering email addresses.
month Field for selecting month and year.
range Defines a slider control for numeric range.
datetime-local Picker for both date and time.
time Field for entering a time.
week Field for selecting week and year.
search Field for search queries.
file Allows file uploads using a 'Browse' button.
tel Field for telephone numbers.
Attribute Description
disabled Makes the input field inactive.
max / min Set maximum and minimum input limits.
pattern Uses regular expressions for validation.
readonly Makes input field uneditable.
placeholder Displays hint text inside field.
required Ensures the field must be filled.
autocomplete Enables or disables auto-suggestion.
autofocus Gives immediate focus to the field when page loads.
height, width Used for image input size.
multiple Allows multiple values (useful for file or email fields).
id Identifies the input uniquely in the document.
class Used for CSS styling of inputs.
Example Program:
<!DOCTYPE html>
<html>
<head>
<title>Forms in HTML5</title>
</head>
<body>
<form>
Name: <input type="text" autocomplete><br><br>
E-mail: <input type="email" name="email"><br><br>
Date of Inception: <input type="date" name="bday"><br><br>
Office time: <input type="time" name="usr_time"><br><br>
Number of years completed (1–100): <input type="number" min="1" max="100"><br><br>
Office phone number: <input type="tel" name="phone"
pattern="[0-9]{2}-[0-9]{10}"><br><br>
Add your homepage: <input type="url" name="homepage"><br><br>
<input type="image" src="E:/submitbutton.png" alt="Click here to submit">
</form>
</body>
</html>
Do It Yourself:
1. Use the 'multiple' attribute in an input tag.
2. Use the 'pattern' attribute to test input validation.
