🧩 Day 6 — Input Types & Form Attributes in HTML

Welcome to Day 6! Today, you’ll explore modern HTML input types and form attributes that make your web forms smarter, safer, and more user-friendly. These features improve usability, reduce typing errors, and enhance user experience across devices.

📋 1️⃣ Common Input Types

Modern HTML supports many input types designed for specific kinds of data.

<form>
  <label>Email:</label>
  <input type="email" name="email"><br><br>

  <label>Phone:</label>
  <input type="tel" name="phone"><br><br>

  <label>Date of Birth:</label>
  <input type="date" name="dob"><br><br>

  <label>Favorite Color:</label>
  <input type="color" name="favcolor"><br><br>

  <label>Upload Resume:</label>
  <input type="file" name="resume"><br><br>

  <input type="submit" value="Submit">
</form>

💡 2️⃣ Additional Input Types

HTML5 introduced several new input types that simplify data collection.

<form>
  <label>Select Range (1–100):</label>
  <input type="range" min="1" max="100"><br><br>

  <label>Enter URL:</label>
  <input type="url" name="website"><br><br>

  <label>Pick Date & Time:</label>
  <input type="datetime-local" name="eventtime"><br><br>

  <label>Search:</label>
  <input type="search" name="query">
</form>

⚙️ 3️⃣ Useful Form Attributes

<form action="/submit" method="post" autocomplete="on" novalidate>
  <label>Username:</label>
  <input type="text" name="user" placeholder="Enter username" required><br><br>

  <label>Email:</label>
  <input type="email" name="email" value="example@mail.com" readonly><br><br>

  <input type="submit" value="Register">
</form>

📘 Attribute Explanations

• placeholder — shows a hint before typing begins
• required — makes input mandatory
• readonly — prevents editing but keeps visible
• disabled — makes an element uneditable and skipped in submission
• autocomplete — lets the browser remember previously entered values
• novalidate — turns off form validation

📂 4️⃣ Autofocus and Pattern

<form>
  <label>Username:</label>
  <input type="text" name="username" autofocus><br><br>

  <label>Password (6–12 letters):</label>
  <input type="password" name="pwd" pattern="[A-Za-z]{6,12}" required>
  <input type="submit" value="Login">
</form>

🧩 5️⃣ Min, Max & Step Attributes

<form>
  <label>Select Quantity (1–10):</label>
  <input type="number" name="qty" min="1" max="10" step="1"><br><br>

  <label>Temperature (0.5 steps):</label>
  <input type="number" name="temp" step="0.5">
</form>

🧱 6️⃣ Datalist for Suggestions

<form>
  <label>Favorite Browser:</label>
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
    <option value="Safari">
  </datalist>
</form>

🧠 7️⃣ Practice Task

1. Create a signup form using email, password, and color picker fields.
2. Use min and max for number inputs.
3. Add pattern for custom validation.
4. Include a datalist for country selection.

🧮 Mini Quiz

• Q1: What is the purpose of the required attribute?
• Q2: Which attribute adds predefined suggestions?
• Q3: How does the pattern attribute help validation?

🎯 Summary

You’ve now learned the wide range of HTML input types and attributes that improve form usability. These tools help ensure correct data entry and user-friendly interaction. Next, we’ll start learning about semantic HTML and accessibility features.

← Prev Next →