HTML supports various input types that allow users to enter different types of data in forms.
Below is a comprehensive list of HTML and HTML5 input types
HTML Input Types:
1. Text Input: (type="text"):
Allows users to input single-line text.
<input type="text" name="username">
Output:
2. Password Input: (type="password"):
Similar to text input, but the entered characters are masked (usually with asterisks) for security.
<input type="password" name="password">
Output:
3. Checkbox: (type="checkbox"):
Allows users to select multiple options from a list of choices.
<input type="checkbox" name="subscribe" value="yes">
Output:
4. Radio Button: (type="radio"):
Allows users to select only one option from a list of choices.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Output:
5. Submit Button: (type="submit"):
Submits the form data to the server.
<input type="submit" value="Submit">
Output:
6. Reset Button: (type="reset"):
Resets all form fields to their initial values.
<input type="reset" value="Reset">
Output:
7. File Upload: (type="file"):
Allows users to upload files from their local system.
<input type="file" name="fileUpload">
Output:
HTML5 Input Types:
1. Date Input: (type="date"):
Provides a date picker for selecting dates.
<input type="date" name="birthdate">
Output:
2. Email Input: (type="email"):
Validates that the input is an email address.
<input type="email" name="email">
Output:
3. Number Input: (type="number"):
Validates that the input is a number.
<input type="number" name="quantity" min="1" max="10">
Output:
4. Range Input: (type="range"):
Creates a slider control for selecting a value from a range.
<input type="range" name="volume" min="0" max="100">
Output:
5. Color Input: (type="color"):
Provides a color picker for selecting colors.
<input type="color" name="colorPicker">
Output:
6. Search Input: (type="search"):
Provides a search input field with a search icon.
<input type="search" name="searchQuery">
Output:
7. Tel Input: (type="tel"):
Validates that the input is a telephone number.
<input type="tel" name="phoneNumber">
Output:
8. URL Input: (type="url"):
Validates that the input is a URL.
<input type="url" name="websiteURL">
Output:
9. Time Input: (type="time"):
Allows users to input a time value.
<input type="time" name="appointmentTime">
Output:
10. Week Input: (type="week"):
Allows users to select a week and year.
<input type="week" name="weekNumber">
Output:
11. Month Input: (type="month"):
Allows users to select a month and year.
<input type="month" name="eventMonth">
Output:
Here are some commonly used input types:
1. Text Input (<input type="text">):
Used for single-line text input.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
2. Password Input (<input type="password">):
Similar to text input, but characters are usually masked (hidden) for password entry.
<label for="password">Password:</label>
<input type="password" id="password" name="password">
3. Email Input (<input type="email">):
Used for entering email addresses. Includes basic email validation.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
4. Number Input (<input type="number">):
Used for entering numeric values. Provides controls for incrementing and decrementing the value.
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1">
5. Checkbox (<input type="checkbox">):
Used for binary choices, where the user can select or deselect an option.
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
6. Radio Button (<input type="radio">):
Used for selecting one option from a group of options.
<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>
7. Textarea (<textarea>):
Used for multi-line text input, suitable for longer responses.
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
8. Select Dropdown (<select>):
Used for creating a dropdown list of options.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
9. File Input (<input type="file">):
Allows users to upload files.
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file">
10. Submit Button (<button type="submit">):
Submits the form data to the server.
<button type="submit">Submit</button>
These are just a few examples.