Author
HTML forms are used to collect user input on web pages. Examples include login forms, signup forms, contact forms, feedback forms, and payment forms.
A form is created using the <form> tag and contains different form elements like text fields, checkboxes, radio buttons, dropdowns, and submit buttons.
It uses two main attributes:
action → URL where form data is sent.
method → Defines how data is sent (GET or POST).
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username" placeholder="Enter your name" required>
<input type="submit" value="Submit">
</form>Output :
<label> – Label for InputExample:
<label for="username">Username:</label>
<input type="text" id="username" name="username"><input type="text">)Collects single-line text from the user.
Can include attributes like placeholder, name, value.
Example:
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"><input type="email">)Collects email addresses.
Browser can validate the format automatically.
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"><input type="password">)Hides the input characters for confidential data.
Example:
<label for="password">Password:</label>
<input type="password" id="password" name="password"><input type="number">)Allows numeric input only.
Can set min, max, and step values.
Example:
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100"><input type="radio">)Allows selection of one option from a group.
Must share the same name for grouping.
Example:
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<input type="checkbox">)Allows selection of multiple options independently.
Example:
Hobbies:
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports<input type="file">)Allows user to upload files from their device.
Example:
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume"><input type="date">)Allows user to pick a date from a calendar popup.
Example:
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><input> types:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types Example</title>
</head>
<body>
<h2>HTML Input Types Example</h2>
<form action="submit.php" method="post">
<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required><br><br>
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter password" required><br><br>
<!-- Number Input -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100"><br><br>
<!-- Radio Buttons -->
Gender:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<!-- Checkbox -->
Hobbies:
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">Sports</label><br><br>
<!-- File Upload -->
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume"><br><br>
<!-- Date Picker -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</body>
</html>Output :
| Input Type | Description | Example |
|---|---|---|
text |
Single-line text | <input type="text"> |
password |
Hidden characters (●●●) | <input type="password"> |
email |
Validates email format | <input type="email"> |
number |
Accepts numbers only | <input type="number" min="1" max="100"> |
radio |
Single selection from options | <input type="radio" name="gender"> |
checkbox |
Multiple selections | <input type="checkbox" name="hobby"> |
date |
Date picker | <input type="date"> |
time |
Time picker | <input type="time"> |
file |
Upload file | <input type="file"> |
submit |
Submits form | <input type="submit"> |
reset |
Clears all inputs | <input type="reset"> |
hidden |
Stores hidden data | <input type="hidden" value="userID123"> |
search |
Search field | <input type="search"> |
tel |
Phone number input | <input type="tel" pattern="[0-9]{10}"> |
url |
Validates URL | <input type="url"> |
color |
Color picker | <input type="color"> |
range |
Slider control | <input type="range" min="0" max="100"> |