HTML Input Types
HTML form inputs are interactive elements within an HTML form that allow
users to input data.
They are essential for creating forms on web pages where users can enter
information such as text, numbers, dates, selections, and more.
Form inputs are defined using the
<input> element
primarily, although other elements like
<textarea>, <select>, and
<button> also play important roles.
List of HTML input types:
1. Text Input
Allows users to enter single-line text.
Example:
<label for="username">Username:</label><input type="text" id="username" name="username" required>
2. Password Input
Masks the entered text for sensitive information.
Example:
<label for="password">Password:</label><input type="password" id="password" name="password" required>
3. Checkbox
Allows selecting multiple options independently.
Example:
<label for="subscribe">Subscribe to Newsletter:</label><input type="checkbox" id="subscribe" name="subscribe" value="yes">
4. Radio Buttons
Allows selecting only one option from a group.
Example:
<fieldset>
<legend>Gender:</legend>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
</fieldset>
5. Textarea
Allows entering multiline text.
Example:
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
6. Select Dropdown
Presents a list of options, from which one can be selected.
Example:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
7. File Upload
Allows users to select files to upload.
Example:
<label for="file">Upload a file:</label><input type="file" id="file" name="file">
8. Hidden Input
Stores a hidden value that is not displayed or editable by the user.
Example:
<input type="hidden" name="token" value="abc123">
9. Date Input
Allows users to enter a date.
Example:
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">
10. Email Input
Allows users to enter an email address.
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
11. Number Input
Allows users to enter a number.
Example:
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1">
12. Range Input
Allows users to select a value from within a specified range.
Example:
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
13. Color Picker
Allows users to select a color.
Example:
<label for="color">Choose a color:</label><input type="color" id="color" name="color">
14. Time Input
Allows users to enter a time.
Example:
<label for="meeting-time">Meeting time:</label>
<input type="time" id="meeting-time" name="meeting-time">
15. URL Input
Allows users to enter a URL.
Example:
<label for="website">Website URL:</label>
<input type="url" id="website" name="website">
16. Telephone Input
Allows users to enter a telephone number.
Example:
<label for="phone">Phone number:</label>
<input type="tel" id="phone" name="phone">
17. Week Input
The user can choose a week and year using the <input type="week">. The input field may display a date picker, contingent on browser support.
Example:
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
Program:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form Input Types Example</title>
</head>
<body>
<h2>HTML Form Input Types Example</h2>
<form action="/submit-form" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<label for="subscribe">Subscribe to Newsletter:</label><br>
<input type="checkbox" id="subscribe" name="subscribe" value="yes"><br><br>
<fieldset>
<legend>Gender:</legend>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
</fieldset><br><br>
<label for="cars">Choose a car:</label><br>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="tata nexon">Tata Nexon</option>
<option value="maruti fronx">Maruti Fronx</option>
<option value="audi">Audi</option>
</select>
</select><br><br>
<label for="file">Upload a file:</label><br>
<input type="file" id="file" name="file"><br><br>
<label for="week">Select a week:</label><br>
<input type="week" id="week" name="week"><br><br>
<label for="birthdate">Birthdate:</label><br>
<input type="date" id="birthdate" name="birthdate"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="quantity">Quantity:</label><br>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1"><br><br>
<label for="range">Range:</label><br>
<input type="range" id="range" name="range" min="0" max="100"><br><br>
<label for="color">Choose a color:</label><br>
<input type="color" id="color" name="color"><br><br>
<label for="meeting-time">Meeting time:</label><br>
<input type="time" id="meeting-time" name="meeting-time"><br><br>
<label for="website">Website URL:</label><br>
<input type="url" id="website" name="website"><br><br>
<label for="phone">Phone number:</label><br>
<input type="tel" id="phone" name="phone"><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
