HTML <input> Tag – User Input Field
📌 Introduction
The <input> tag is used to create interactive fields where users can enter data.
It is one of the most flexible HTML elements because it supports many types of input.
👉 <input> is a self-closing tag (no closing tag needed).
🧱 Syntax
<input type="text" />
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Input Example</title>
</head>
<body>
<h2>Simple Form</h2>
<form>
<label>Name:</label>
<input type="text" />
<br /><br />
<label>Password:</label>
<input type="password" />
<br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
🖥️ Output Explanation
- Users can type into input fields
- Each input type behaves differently
- Data can be submitted through a form
🎯 Common Input Types
1. Text Input
<input type="text" />
✔ For names, messages, general text
2. Password Input
<input type="password" />
✔ Hides characters for security
3. Email Input
<input type="email" />
✔ Validates email format automatically
4. Number Input
<input type="number" />
✔ Only allows numbers
5. Checkbox
<input type="checkbox" />
✔ Used for options (yes/no, select multiple)
6. Radio Button
<input type="radio" name="gender" />
✔ Select only one option
7. Submit Button
<input type="submit" />
✔ Sends form data
🎯 Important Attributes
1. placeholder
<input type="text" placeholder="Enter your name" />
✔ Shows hint inside input
2. value
<input type="text" value="anyName" />
✔ Default value
3. name
<input type="text" name="username" />
✔ Important for sending data to server
🧠 Important Concept
👉 <input> always works inside a <form>
🧩 Example Form with Inputs
<form>
<input type="text" placeholder="Name" /><br />
<input type="email" placeholder="Email" /><br />
<input type="password" placeholder="Password" /><br />
<input type="submit" value="Send" />
</form>
⚖️ Input vs Button
| Element | Purpose |
|---|---|
<input> |
Data entry |
<button> |
Action trigger |
🚫 Common Mistakes
- Forgetting
type❌ - Not using
name❌ - Using input outside form ❌
- Wrong input types ❌
🎨 Styling Example
<input
type="text"
placeholder="Enter name"
style="padding:5px; border:1px solid gray;"
/>
🧪 Mini Exercise
Create a form with:
- Text input (name)
- Email input
- Password input
- Checkbox
- Submit button
- Use placeholders