HTML — Form Elements

Friendly Intro – What & Why

A form lets users send data to a server.
It can collect names, addresses, choices, or feedback.
The elements inside the <form> tag are the building blocks that capture the data.
We’ll explore each block, see how to write it, and understand what the browser shows you.

---

Basic Form Elements

A form starts with <form> and ends with </form>.
Inside you place fields and a submit button.

<form action="/submit" method="post">
  <label for="name">Your name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Send</button>
</form>

What the browser displays

• A single line with the text “Your name:” followed by a text box.
• A button that says “Send” below the box.
• The browser will require the name field before sending.

---

Grouping Elements – <fieldset> & <legend>

Use <fieldset> to group related fields and <legend> to give the group a title.

<form action="/register" method="post">
  <fieldset>
    <legend>Personal Details</legend>

    <label for="first">First name:</label>
    <input type="text" id="first" name="first">

    <label for="last">Last name:</label>
    <input type="text" id="last" name="last">
  </fieldset>

  <button type="submit">Register</button>
</form>

What the browser displays

• A box around the two name fields.
• The title “Personal Details” appears on top of the box.
• The register button sits below the box.

---

Text‑Based Inputs – <input type="text"> & <textarea>

<input type="text"> is for a single line.
<textarea> lets users type multiple lines.

<form action="/message" method="post">
  <label for="subject">Subject:</label>
  <input type="text" id="subject" name="subject">

  <label for="body">Message:</label>
  <textarea id="body" name="body" rows="4"></textarea>

  <button type="submit">Send</button>
</form>

What the browser displays

• A single‑line box for “Subject”.
• A larger, multi‑line box for “Message”.
• The button below both fields.

---

Selecting Options – <select> & <option>

A drop‑down list uses <select> with nested <option> tags.

<form action="/choose" method="post">
  <label for="color">Favorite color:</label>
  <select id="color" name="color">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>

  <button type="submit">Pick</button>
</form>

What the browser displays

• A labeled drop‑down that shows “Red” by default.
• Clicking the arrow reveals the other two options.
• The button below the list.

---

Checkboxes & Radio Buttons

Check boxes let users choose multiple items.
Radio buttons let them pick one option from a set.

<form action="/preferences" method="post">
  <fieldset>
    <legend>Newsletter</legend>

    <label>
      <input type="checkbox" name="news" value="weekly"> Weekly
    </label>
    <label>
      <input type="checkbox" name="news" value="monthly"> Monthly
    </label>
  </fieldset>

  <fieldset>
    <legend>Contact Method</legend>

    <label>
      <input type="radio" name="contact" value="email" checked> Email
    </label>
    <label>
      <input type="radio" name="contact" value="phone"> Phone
    </label>
  </fieldset>

  <button type="submit">Save</button>
</form>

What the browser displays

• Two check boxes labeled “Weekly” and “Monthly”.
• Two radio buttons labeled “Email” (pre‑selected) and “Phone”.
• A “Save” button below the groups.

---

Buttons – <button> & <input type="submit">

Both create clickable actions.
<button> can contain text or other HTML.
<input type="submit"> is a single‑tag button.

<form action="/login" method="post">
  <label for="user">User:</label>
  <input type="text" id="user" name="user">

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

  <button type="submit">Log In</button>
  <input type="reset" value="Clear">
</form>

What the browser displays

• Two labeled fields: one for username, one for password.
• A “Log In” button that submits the form.
• A “Clear” button that empties all fields.

---

Accessibility Tips – Linking Labels

A label must be connected to its input so screen readers can read it.
Two ways:

Method	Code	Benefit
for attribute	<label for="email">Email</label><br><input id="email">	Explicit link, works even if label wraps input.
Wrapping input	<label>Email <input></label>	Shorter syntax, still accessible.

Good to know: Using for is clearer when you have many fields or complex layouts.

---

Common Mistakes Checklist

• No label for each input – users can’t identify fields.
• Wrong name attribute – data won’t be sent correctly.
• Missing action or method – form won’t submit.
• Unescaped characters inside HTML – can break the page.
• Too many nested <form> tags – browsers ignore inner forms.

---

Mini Practice

1. Create a form that asks for a user’s first name, last name, and email.
2. Add a drop‑down to choose a country from at least three options.
3. Include a checkbox for “Subscribe to newsletter”.
4. Use a radio button group for “Preferred contact method” (email or phone).
5. Add a submit button that says “Submit Form”.

Good luck – test your form in the browser and see how the controls look and behave!