⌨️ HTML Input Tag

Learn about the versatile input element and its various types

📚 Input Tag Overview

📌 Key Concept

The <input> tag is the most important form element. It can be displayed in many ways, depending on the type attribute. It is a void element (self-closing).

Basic Syntax

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

🔧 Common Attributes

Attribute Description Example
type Specifies the type of input (text, email, password, etc.) type="email"
placeholder A hint that describes the expected value placeholder="John Doe"
required Specifies that the field must be filled out required
value Specifies the initial value of the input value="Default"
name Name of the input (needed for form submission) name="email"
disabled Specifies that the input should be disabled disabled

💻 Input Types Examples

📝 Example 1: Text & Password

Standard text fields for names, emails, and secure passwords.

<label>Username: <input type="text" placeholder="User"></label>
<label>Email: <input type="email" placeholder="mail@example.com"></label>
<label>Password: <input type="password"></label>

▶️ Output:

📝 Example 2: Radio & Checkbox

Radio: Select one option. Checkbox: Select multiple options.

<!-- Radio (Same name = grouped) -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<!-- Checkbox -->
<input type="checkbox" name="subscribe" checked> Subscribe to newsletter

▶️ Output:

Gender:

Male Female

Subscribe to newsletter

📝 Example 3: Date, Color & File

Specialized inputs for specific data types.

<label>Birthday: <input type="date"></label>
<label>Fav Color: <input type="color"></label>
<label>Upload: <input type="file"></label>

▶️ Output:

📝 Example 4: Input Buttons

Inputs can also be buttons (though <button> tag is often preferred).

<input type="submit" value="Submit Form">
<input type="reset" value="Reset">
<input type="button" value="Click Me" onclick="alert('Hello!')">

▶️ Output:

✍️ Practice Assignments

🎯 Assignment 1: Registration Fields

Easy

Create inputs for a user registration.

  • Username (text)
  • Email (email)
  • Password (password)

🎯 Assignment 2: Survey Options

Medium

Create a mini-survey using selection inputs.

  • "Age Group" using Radio buttons (18-25, 26-35, etc.)
  • "Interests" using Checkboxes (Coding, Design, Gaming)

🎯 Assignment 3: Booking Form

Hard

Create a booking input set.

  • Date picker for "Check-in Date"
  • Number input for "Guests" (min 1, max 10)
  • Color picker for "Room Theme Preference"

🎓 Key Takeaways

  • The type attribute determines how the input behaves.
  • Use placeholder for hints, but always use <label> for accessibility.
  • radio buttons grouped by name allow only one selection.
  • checkbox allows multiple selections.
  • Use required to ensure users don't skip important fields.