📋 Day 5 — Lists & Tables in HTML

on

📄 Day 5 — HTML Forms & User Input

Welcome back! 🎉 In today’s lesson, you’ll learn one of the most powerful and essential parts of web development — **HTML Forms**. Forms allow users to send information to the website — whether it’s logging in, searching, or filling out a contact page. By mastering forms, you’ll enable real interaction between your site and its visitors.

🧩 1️⃣ What is a Form?

An HTML form collects data from users and sends it to a server (or script) for processing. All form elements are wrapped inside the <form> tag. 

<form action="/submit" method="post">
  <label>Name:</label>
  <input type="text" name="username">
  <input type="submit" value="Send">
</form>

🧠 action — where the form data is sent
🧠 method — how the data is sent (GET or POST)

📥 2️⃣ Common Input Types

The <input> tag is the most used form element. It supports multiple types: 

<form>
  <label>Name:</label>
  <input type="text" name="fullname"><br><br>

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

  <label>Password:</label>
  <input type="password" name="pwd"><br><br>

  <label>Age:</label>
  <input type="number" name="age"><br><br>

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

Each type creates a different kind of field: text, email, password, number, checkbox, radio, color picker, and many more.

📋 3️⃣ Labels & Accessibility

The <label> tag improves accessibility by linking text to a form control. 

<label for="email">Email:</label>
<input type="email" id="email" name="email">

When users click the label, it focuses the corresponding input — great for UX and accessibility.

🔘 4️⃣ Checkboxes & Radio Buttons

Use checkboxes for multiple selections and radio buttons for one choice among many. 

<form>
  <p>Select your skills:</p>
  <input type="checkbox" name="skills" value="HTML"> HTML
  <input type="checkbox" name="skills" value="CSS"> CSS
  <input type="checkbox" name="skills" value="JS"> JavaScript

  <p>Select gender:</p>
  <input type="radio" name="gender" value="Male"> Male
  <input type="radio" name="gender" value="Female"> Female
</form>

📤 5️⃣ Dropdowns & Textareas

Dropdowns (<select>) and textareas (<textarea>) are perfect for larger inputs or lists. 

<form>
  <label>Favorite Language:</label>
  <select name="language">
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
  </select>

  <br><br>
  <label>Your Feedback:</label><br>
  <textarea name="message" rows="4" cols="40"></textarea>
</form>

🧱 6️⃣ Fieldset & Legend

Group related inputs together using <fieldset> and <legend>. 

<fieldset>
  <legend>Contact Information</legend>
  <label>Name:</label>
  <input type="text"><br><br>
  <label>Phone:</label>
  <input type="tel">
</fieldset>

🧠 7️⃣ Practice Task

  1. Build a registration form with name, email, and password fields.
  2. Add radio buttons for gender selection.
  3. Include a dropdown for choosing a course.
  4. Use a textarea for user feedback.

🧮 Mini Quiz

  • Q1: Which attribute specifies where the form data is sent?
  • Q2: What’s the difference between checkbox and radio button?
  • Q3: What tag is used to group form fields together?

🎯 Summary

Today, you learned how to build interactive forms and collect user input using various input types and attributes. These are the backbone of every interactive website — from contact forms to login systems. In the next lesson, we’ll go deeper into **input types and validation** to enhance user experience.

Comments

Post a Comment