HTML Input types

The HTML <input> tag is used inside a form to collect data from the user — like their name, email, password, date of birth, etc.

And the type attribute of <input> tells the browser what kind of input to expect.input types define how the browser should display and handle the data a user enters.
So basically,
👉 type = “what this box does.”

🌍 What <input> Actually Does:

i. It’s a self-closing tag (no closing </input>).
ii.Used inside a <form> element.

Has attributes like:
i. type → defines what kind of input.
ii.vname → gives it an identifier when sending data to a server.
iii.value → the data it holds or displays by default.
iv.placeholder → grey hint text inside the box.
v.required → makes the field mandatory.
vi.readonly → user can’t change it.
vii.disabled → completely unclickable or inactive.

🧾 Basic Text Inputs:

Type	Description	Example
text	Standard one-line text box	<input type="text">
password	Hides typed characters
email	For email addresses (includes validation)	<input type="email">
tel	For phone numbers	<input type="tel">
url	For website url	<input type="url">
search	For search boxes (styled slightly different)	<input type="search">

🔢 Numbers & Ranges:

Type	Description	Example
number	Allows numeric input (with optional min/max)	<input type="number"min="1"max="10">
range	Slider control	<input type="range"min="1"max="100">

📅 Date & Time Pickers:

Type	Description	Example
date	Select a date	<input type="date">
datetime-local	Date + time (local timezone)	<input type="datetime-local">
time	Select a time	<input type="time">
week	Select a week	<input type="week">
month	Select a month	<input type="month">

✅ Choices & Selection:

Type	Description	Example
checkbox	Multiple options, can select many	<input type="checkbox">
radio	Single choice from a group	<input type="radio"name="gender">
color	Color picker	<input type="color">

📎 File & Button Inputs:

Type	Description	Example
file	Upload a file	<input type="file">
submit	Submits the form	<input type="submit"value="Send">
reset	Resets the form fields	<input type="reset">
button	Custom button (no default behavior)	<input type="button"value="Click Me">
image	Submit button using an image	<input type="image" src="btn.png">
hidden	Hidden data sent with form (not visible)	<input type="hidden"value="123">

We will create a sample form using most of these input types in the "HTML Forms Chapter".

CODE WITH FAHIM

HTML Input Types