HTML Input Types
The <input> element is used to collect user data in different ways.
The behavior of <input> depends on its type attribute.
If no type is specified, the default type is text.
Common Input Types
1. Text
Creates a single-line text field.
<input type="text" name="username">
Used for names, titles, short messages, etc.
2. Password
Hides the characters while typing.
<input type="Password" name="Password">
Used for login passwords
3. Email
Accepts email address
Browsers may automatically validate the format.
<input type="email" name="email">
4. Number
Accepts numeric values only.
<input type="Number" name="quantity" min="1" max="10">
You can use
- min minimum value
- max maximum value
- step number interval
5. Date
Allows the user to select a date.
<input type="date" name="birthday">
6. Time
Allows the user to select a time.
<input type="time" name="appointment">
7. Datetime-local
Selects both date and time (no timezone).
<input type="datetime-local" name="event">
8. Month
Selects month and year.
<input type="month" name="month">
9. week
Selects week and year.
<input type="week" name="week">
10. color
Opens a color picker.
<input type="color" name="favcolor">
11. File
Allows users to upload files.
<input type="file" name="myfile">
12. Hidden
Not visible to users.
<input type="hidden" name="userid" value="123">
Note: Hidden fields are not secure
13. Radio
Allows selecting only one option.
<input type="radio" name="gender" value="male">
14. Checkbox
Allows selecting multiple options.
<input type="checkbox" name="vehicle" value="bike">
15. Range
Creates a slider control.
<input type="range" name="volume" min="0" max="100" >
16. Search
Used for search boxes
< input type="search" name="search" >
17. Tel
Used for telephone numbers.
< Used for telephone numbers. >
18. URL
Accepts website addresses
< input type="url" name="website" >
19. Submit
Submits the form data
< input type="url" name="website" >
19. Submit
Submits the form data
< input type="submit" value="Submit" >
20. Reset
Resets form values to default."
< input type="reset" value="Reset" >
