HTML Forms

Forms (<form>) are the primary way web pages interact with users — login, registration, search, and contact messages all rely on forms to collect data.

Form Basics

The <form> tag defines a form area that contains various input controls. When users fill in and submit the form, data is sent to the server:

<form action="/submit" method="post">
  <label>Username: <input type="text" name="username"></label>
  <label>Password: <input type="password" name="password"></label>
  <button type="submit">Login</button>
</form>

Common Input Controls

<input> is the most versatile control — its type attribute transforms it into different input forms:

<!-- Text input -->
<input type="text" placeholder="Enter your name">

<!-- Email -->
<input type="email" placeholder="you@example.com">

<!-- Number -->
<input type="number" min="1" max="100">

<!-- Radio buttons -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<!-- Checkbox -->
<input type="checkbox" name="hobby" value="coding"> Coding

<!-- Dropdown -->
<select>
  <option>Select a city</option>
  <option>New York</option>
  <option>London</option>
</select>

<!-- Textarea -->
<textarea rows="4" placeholder="Enter your message..."></textarea>

Form Grouping & More Elements

<fieldset> groups related controls, <legend> provides a group title. <datalist> offers a pre-populated suggestion list for input fields:

<form>
  <fieldset>
    <legend>Personal Info</legend>
    <label>Name: <input type="text" name="name" list="names"></label>

    <label>Gender:
      <input type="radio" name="gender" value="male"> Male
      <input type="radio" name="gender" value="female"> Female
    </label>
  </fieldset>

  <datalist id="names">
    <option value="Alice">
    <option value="Bob">
    <option value="Charlie">
  </datalist>

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" onclick="alert('You clicked me!')">Regular Button</button>
</form>

• <fieldset> + <legend>: Group form controls with a title
• <datalist> + <option>: Provides input suggestions, used with the list attribute
• <button> types: submit submits, reset clears, button is a generic button

📖 Summary

• <form> defines a form; action and method control submission behavior
• <input> types: text, password, email, number, radio, checkbox
• <select> + <option> for dropdowns; <textarea> for multi-line text
• <fieldset> + <legend> for grouping; <datalist> for input suggestions
• <button> type determines behavior: submit / reset / button

📝 Exercises

1. Registration form: Create a registration page with username, email, password, confirm password, gender (radio), interests (checkbox), a submit button, and a reset button. Use <fieldset> for grouping.
2. Input suggestions: Use <datalist> to create a "City Selection" input that automatically suggests New York, London, Tokyo, and Sydney as you type.