HTML Forms - Collecting User Input

The <form> Element

The <form> tag wraps all form controls like input fields, buttons, checkboxes, and select menus.

The action attribute specifies where to send form data when submitted (typically a server URL).

The method attribute defines the HTTP method to use: GET (appends data to URL) or POST (sends data in request body).

GET is used for searches and non-sensitive data; POST is used for sensitive data and data that modifies server state.

<!-- Basic form with GET method -->
<form action="/search" method="GET">
  <label for="query">Search:</label>
  <input type="text" id="query" name="q">
  <button type="submit">Search</button>
</form>

<!-- Form with POST method -->
<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <button type="submit">Login</button>
</form>

The <input> Element

The <input> tag is the most common form control, used to create various types of input fields.

The type attribute determines what kind of input: text, password, email, number, date, checkbox, radio, etc.

The name attribute is crucial - it identifies the data when sent to the server.

The id attribute is used with labels for accessibility and should be unique on the page.

<!-- Text input -->
<label for="name">Name:</label>
<input type="text" id="name" name="fullname">

<!-- Email input with validation -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<!-- Password input (text is hidden) -->
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password">

<!-- Number input -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120">

Labels and Accessibility

The <label> tag defines a label for form controls and improves accessibility.

Labels can be associated with inputs using the for attribute (matching the input's id).

Clicking a label focuses or activates its associated input, improving usability.

Screen readers use labels to describe form controls to visually impaired users.

Always include labels for better accessibility and user experience.

<!-- Label with for attribute (recommended) -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

<!-- Label wrapping input (also valid) -->
<label>
  Subscribe to newsletter
  <input type="checkbox" name="subscribe">
</label>

<!-- Multiple fields with labels -->
<form>
  <div>
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="firstname">
  </div>
  <div>
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="lastname">
  </div>
</form>

Radio Buttons and Checkboxes

Radio buttons allow users to select one option from a group. All radio buttons in a group must have the same name.

Checkboxes allow users to select multiple options. Each checkbox typically has a unique name or the same name with array notation.

The value attribute specifies what data is sent to the server when the option is selected.

The checked attribute can pre-select radio buttons or checkboxes.

<!-- Radio buttons (choose one) -->
<p>Select your size:</p>
<label>
  <input type="radio" name="size" value="small"> Small
</label>
<label>
  <input type="radio" name="size" value="medium" checked> Medium
</label>
<label>
  <input type="radio" name="size" value="large"> Large
</label>

<!-- Checkboxes (choose multiple) -->
<p>Select toppings:</p>
<label>
  <input type="checkbox" name="topping" value="cheese"> Cheese
</label>
<label>
  <input type="checkbox" name="topping" value="pepperoni" checked> Pepperoni
</label>
<label>
  <input type="checkbox" name="topping" value="mushrooms"> Mushrooms
</label>

Dropdown Menus

The <select> element creates a dropdown menu with options defined by <option> tags.

The name attribute on <select> identifies the data, and value attributes on <option> specify the values.

The selected attribute pre-selects an option.

The multiple attribute allows selecting multiple options (usually displays as a list box).

<!-- Single selection dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">-- Select a Country --</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca" selected>Canada</option>
  <option value="au">Australia</option>
</select>

<!-- Multiple selection -->
<label for="skills">Skills (hold Ctrl/Cmd):</label>
<select id="skills" name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>

Textareas and Buttons

The <textarea> element creates a multi-line text input area.

The rows and cols attributes set the visible dimensions, though CSS is preferred for sizing.

The <button> element creates a clickable button. The type attribute can be 'submit', 'reset', or 'button'.

Submit buttons send the form, reset buttons clear the form, and regular buttons do nothing unless JavaScript is attached.

<!-- Textarea for longer text -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Enter your message here..."></textarea>

<!-- Different button types -->
<button type="submit">Submit Form</button>
<button type="reset">Clear Form</button>
<button type="button" onclick="alert('Clicked!')">Click Me</button>

<!-- Input button (older style) -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">