Tag input

The input tag is used to create interactive form elements that allow users to input data. It is a self-closing tag and forms the backbone of most web forms.

---

🔧 Basic Syntax:

<input type="text" name="username" placeholder="Enter your name">

---

🧩 Common Attributes:

Attribute	Description
type	Specifies the type of input (e.g. text, password, email, checkbox).
name	Name of the input field (used when submitting form data).
value	Sets the default value.
placeholder	Displays hint text inside the input field.
required	Makes the input mandatory to fill out.
readonly	Makes the input non-editable.
disabled	Disables the input (grayed out and unclickable).
maxlength	Sets the maximum number of characters allowed.
min / max	For numeric/date input types, defines limits.
step	For number inputs, defines the step size.

---

✅ Common Input Types:

type Value	Description
text	Single-line text input
password	Hides typed characters
email	Validates email format
number	Numeric input with step, min, max
checkbox	Allows toggling on/off
radio	Select one from a group
submit	Submit button for the form
button	Custom button (needs JS for actions)
date	Date picker
file	File upload input
range	Slider input
color	Color picker

---

🧪 Example (Login Form):

<form action="/login" method="post">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <input type="submit" value="Login">
</form>

---

🧠 Best Practices:

• Always pair <input> fields with <label> elements for accessibility.
• Use required, pattern, and type to validate input client-side.
• Group related radio buttons using the same name value.
• Keep usability and mobile-friendliness in mind (use correct type).

---