The <input> element in HTML supports multiple types, allowing developers to collect different kinds of data. Here are the most commonly used input types:
1️⃣ Textual Inputs
text→ Single-line text inputpassword→ Masked input for passwordsemail→ Email addresses (with basic validation)url→ URL inputtel→ Phone number inputsearch→ Search query input
Example:
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="email" name="email" placeholder="Email">
2️⃣ Numeric Inputs
number→ Only numeric input, can set min/max/steprange→ Slider for numeric values
Example:
<input type="number" name="age" min="0" max="100">
<input type="range" name="volume" min="0" max="10">
3️⃣ Choice Inputs
radio→ Single selection among optionscheckbox→ Multiple selections allowedselect/<option>→ Dropdown selection (not input type but related)
Example:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="subscribe" value="yes"> Subscribe
4️⃣ Date and Time Inputs
date→ Date pickertime→ Time pickerdatetime-local→ Date + time pickermonth→ Month pickerweek→ Week picker
Example:
<input type="date" name="dob">
<input type="time" name="meeting">
5️⃣ File Input
file→ Upload files from local device
Example:
<input type="file" name="profilePic">
6️⃣ Buttons and Submission
submit→ Submit formreset→ Reset form fieldsbutton→ Custom button for JS actions
Example:
<input type="submit" value="Send">
<input type="reset" value="Clear">
7️⃣ Hidden Input
hidden→ Store data that user cannot see/edit
Example:
<input type="hidden" name="userId" value="12345">
💡 In Short:
HTML input types let you collect specific types of data like text, numbers, dates, files, and selections, making forms more interactive, user-friendly, and validated.
