Chapter - 5
HTML Forms: Two-Way Communication on the Web

Why Forms Matter

• The web isn't just for reading: users need to log in, comment, search, and buy things.
• Forms make this possible by letting websites collect information from users and send it back to the server for processing.

Key Building Blocks of a Form

The <form> Tag

• Forms are wrapped in <form>...</form>. Everything inside is considered part of the same submission.
• They often include text boxes, checkboxes, buttons, and more.

Inputs: The User's Side

• <input> creates all sorts of form controls—text fields, checkboxes, radio buttons, etc.
• The type decides what each <input> does: type="text" (single line),
  type="password" (hidden text), type="radio" (one out of many),
  type="checkbox" (multiples), type="number", type="date", etc.

Connecting Labels for Clarity

• <label> tells the user what a field is for.
• Bind a label and input using for="id-of-input" (on <label>) and id="..."
  (on <input>), so clicking the label focuses the right box and helps accessibility tools.

The Form Submission Button

• Add an “OK/Submit” by using an <input type="submit"> or a more flexible <button type="submit">.
• Everything filled out inside the form will get packaged and sent when clicked.
• Example:
  <button type="submit">Send</button>

The name Attribute: The Data Label

• Each field should have a name value. That's how the browser labels what the user typed (“firstName=Arjun”).
• The name is what the server looks for after you press submit.
• Example:
  <input type="text" name="email">

Example:

Other Essentials types

Radio Buttons

• Use to let users pick one out of many (like T-shirt size).
• All related radios must have the same name, but different values and ids.
• Example:
  <input type="radio" id="sizeS" name="shirtSize" value="small"> <label for="sizeS">Small</label>
  Small Medium

Checkboxes

• Use to let users pick multiple options (pizza toppings, etc.).
• Same name for all checkboxes in a group, different values and ids.
• Example:
  <input type="checkbox" id="toppingsPep" name="toppings" value="pepperoni"> <label for="toppingPep">Pepperoni</label>
  
  Pepperoni

Textarea

• Provides a big box for long-form text (like comments).
• Example:
  <label for="comments">Your Comment:</label> <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
  Your Comment:
  

Dropdown (Select)

• Compact menu for choosing from lots of options.
• Example:
  
  Country: Select an option USA Canada UK Australia India

Special Types for Better User Experience

• type="email" for emails (adds basic validation).
• type="number" with min and max for allowed ranges.
• type="date" for picking a date with a calendar.
• type="file" for uploads.

Common Attributes

• required: Makes the field mandatory.
• placeholder: Greyed-out text to show what to type.
• Example: <input type="text" required placeholder="Your Name">
  

Extra Elements

• <fieldset> wraps related fields with a box (great for groups).
• <legend> gives a caption for the fieldset.

How Submission Works

• When the user clicks Submit, the browser collects all fields with a name and sends them to a server (usually defined by the form's action).
• If method="get", values go in the web address.
• If method="post", values go in the message "body" (hidden from the address bar).

More References: