HTML Forms

HTML Tutorial: HTML Forms

Learn HTML forms to collect user input with colorful examples, explanations, and clear outputs

---

HTML forms allow websites to collect user input. Forms can include text fields, checkboxes, radio buttons, dropdowns, and buttons to submit data.

---

1️⃣ Basic HTML Form

INPUT:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

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

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

OUTPUT:

Name:

Email:

✔️ <form> defines the form ✔️ action → URL where data is sent ✔️ method → "post" or "get" ✔️ <input> fields for user input

---

2️⃣ Form with Radio Buttons and Checkboxes

INPUT:

<form>
  <p>Gender:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">Reading</label>
  <input type="checkbox" id="travel" name="hobby" value="travel">
  <label for="travel">Travel</label><br><br>

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

OUTPUT:

Gender:

Male Female

Hobbies:

Reading Travel

✔️ type="radio" → select one option ✔️ type="checkbox" → select multiple options ✔️ name groups radio buttons

---

3️⃣ Form with Dropdown Menu

INPUT:

<form>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="nigeria">Nigeria</option>
    <option value="ghana">Ghana</option>
    <option value="kenya">Kenya</option>
  </select><br><br>

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

OUTPUT:

Country: Nigeria Ghana Kenya

✔️ <select> creates a dropdown menu ✔️ <option> defines options inside the dropdown

---

4️⃣ Best Practices for HTML Forms

• Use <label> for better accessibility
• Group related radio buttons with the same name
• Use type="email" or type="number" for proper validation
• Style forms with CSS for better UX
• Always include a submit button

---

🚀 What’s Next?

👉 HTML Form Attributes

Next lesson will cover:

• Form attributes like action, method, autocomplete, target
• Enhancing form functionality
• Advanced form customization

---

HTML forms are essential for interactive web pages, allowing you to collect user data effectively and create dynamic user experiences.