HTML Forms

HTML forms are the core of web interaction, used to collect user input data. From simple search boxes to complex registration pages, forms are everywhere.

The <form> Element

The <form> element is the container for all form controls. It defines the start and end of a form.

<form action="/submit-page" method="get">
  <!-- Form controls go here -->
</form>

The <form> element has two important attributes:

• action: Specifies the server-side URL where data will be sent when the user submits the form.
• method: Specifies the HTTP method used to send form data. The most common values are:
  • GET: Appends form data to the end of the URL (e.g., ?name=value&name2=value2). Suitable for non-sensitive data, like search queries. Has length limitations.
  • POST: Sends form data in the body of the HTTP request. Suitable for sensitive information (like passwords) or large amounts of data. No length limitations.

The <input> Element

The <input> element is the most versatile and core form control. Its behavior is determined by the type attribute.

Common type Values:

• text: Single-line text input field.

  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username">

• password: Password input field where entered content is hidden.

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

• radio: Radio button. Among a group (with the same name attribute), users can only select one.

  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>

• checkbox: Checkbox. Users can select zero, one, or multiple options.

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label>

• submit: Submit button. Clicking triggers the form submission.

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

• button: A clickable button that has no default behavior. Usually used with JavaScript.

  <input type="button" value="Click Me" onclick="alert('Hello!')">

The <label> Element

The <label> tag provides a text label for form controls. It has two important benefits:

1. Improves accessibility: Screen readers will read the label, helping users understand the input field's purpose.
2. Improves user experience: When users click on <label> text, the browser automatically focuses on the associated form control. For checkboxes and radio buttons, clicking the label is equivalent to clicking the button itself.

By setting the <label>'s for attribute to the id of the corresponding control, you can associate them.

Other Common Form Elements

• <textarea>: Defines a multi-line text input area, suitable for comments, messages, and other long text.

  <textarea name="message" rows="10" cols="30">
  Write your message here...
  </textarea>

• <button>: Similar to <input type="submit">, but the <button> element can contain richer content, like text and icons.

  <button type="submit">
    <img src="icon.png" alt=""> Submit
  </button>

• <select> and <option>: Creates a dropdown selection list.

  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
  </select>