HTML: Forms and User Input

Until now, our webpages have been a one-way street: the server sends data to the user. Forms allow the user to send data back to the server. Whether it is a login page, a search bar, or a checkout cart, it is built using an HTML Form.

Step 1: The Form Container & Data Transmission

All input fields must be wrapped inside a <form> tag. This tag acts as the envelope for the data. It requires two absolutely critical attributes:

• action: The URL of the backend script (like PHP, Python, or Node.js) that will process the data.
• method: HOW the data is sent. The two choices are GET and POST.

GET vs. POST (Crucial Advanced Concept):
- GET: Appends the form data directly into the URL (e.g., ?search=shoes). Use this ONLY for retrieving data (like search engines). Never use GET for passwords, as the password will be saved in the browser's URL history!
- POST: Hides the data inside the HTTP request body. Use this for logging in, uploading files, or changing data in a database.

Step 2: Text Inputs & Textareas

The most common input is the single-line text box. We use the <input> tag, which is self-closing.

• type="text": Standard visible text.
• type="password": Masks the characters with dots/asterisks for security.
• name: The most important attribute! This is the variable name the server uses to identify the data. If you forget the name attribute, the data will NOT be sent!

For multi-line text (like an essay or a message), we do not use the input tag. We use the <textarea> tag.

The Code:

<form action="/submit_profile" method="POST">
  Username: <input type="text" name="user_id" maxlength="15" />
  <br>
  Password: <input type="password" name="user_pass" />
  <br>
  Biography: <br>
  <!-- Textarea uses rows and cols to set its size -->
  <textarea name="bio" rows="4" cols="30">Type your bio here...</textarea>
</form>

Output (Try typing in them!):

Username:
Password:
Biography:
Type your bio here...

Step 3: Making Choices (Radios & Checkboxes)

When you want users to select from predefined options, you use Checkboxes (multiple choices allowed) or Radio Buttons (strictly one choice allowed).

The Radio Button Rule: For radio buttons to work correctly (meaning clicking one deselects the other), they must share the exact same `name` attribute.

The Code: Custom Pizza Order

<form>
  <h3>1. Choose Crust (Select One)</h3>
  <!-- Notice both have name="crust_type" -->
  <input type="radio" name="crust_type" value="thin" checked> Thin Crust
  <input type="radio" name="crust_type" value="thick"> Thick Crust

  <h3>2. Add Toppings (Select Many)</h3>
  <!-- Checkboxes usually have unique names -->
  <input type="checkbox" name="top_cheese" value="yes"> Extra Cheese
  <input type="checkbox" name="top_mushroom" value="yes"> Mushrooms
</form>

Output:

1. Choose Crust (Select One)

Thin Crust
Thick Crust

2. Add Toppings (Select Many)

Extra Cheese
Mushrooms

Step 4: Dropdown Menus (Select)

If you have 50 options (like choosing a country), a list of 50 radio buttons takes up too much screen space. A Dropdown menu is much cleaner. It uses the <select> tag as the wrapper, and <option> tags for the choices.

The Code:

Country:
<select name="country_list">
  <option value="US">United States</option>
  <!-- Use 'selected' to make it the default choice -->
  <option value="IN" selected>India</option>
  <option value="UK">United Kingdom</option>
</select>

Output:

Country:
United States India United Kingdom

Step 5: File Uploads & Hidden Data

To allow users to upload images or documents, you use <input type="file">. However, standard text forms cannot carry heavy binary files like images.

To fix this, you MUST add enctype="multipart/form-data" to your opening <form> tag. If you forget this, the server will only receive the file's *name*, not the actual file!

Hidden Inputs

Sometimes you need to send data to the server that the user shouldn't see or edit (like a security token, or the ID of the current page). We use type="hidden".

The Code:

<!-- enctype is REQUIRED for file uploads! -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  Upload Profile Picture: <input type="file" name="avatar" accept="image/*" />
  <br><br>
  <!-- Invisible to the user, but sent to the server -->
  <input type="hidden" name="security_token" value="12345ABC" />
  
  <!-- The Submit Button -->
  <input type="submit" value="Save Profile" />
</form>

Output:

Upload Profile Picture:

UX Note on "Reset" Buttons: HTML provides an <input type="reset"> button which instantly deletes everything the user just typed. Modern UX designers strictly advise against using it, as users often click it by accident and lose all their hard work!

Final Quiz: Test Your Engineering Logic

Click the buttons below to check your understanding of Form architecture.

1. If you are building a Login Form, which HTTP method MUST you use in the form tag to keep the password out of the browser history?

A) method="GET"

Incorrect. GET puts all the form data directly into the URL, making it visible to anyone walking past the computer, and saving it in the browser history.

B) method="POST"

Correct! POST safely hides the data payload inside the body of the HTTP request, keeping it out of the URL bar.

C) method="SECURE"

Incorrect. There is no such method in HTML.

2. What attribute must you use to group three radio buttons together so that selecting one automatically deselects the others?

A) They must share the exact same `id` attribute.

Incorrect. An `id` must be absolutely unique to a single element on a page. You cannot share them.

B) They must share the exact same `value` attribute.

Incorrect. If they share the same value, the server won't know which one you actually picked!

C) They must share the exact same `name` attribute.

Correct! Giving them the same `name` tells the browser they belong to the same logical group, enforcing the "single choice" rule.

3. Look at this code: `<textarea value="Hello"></textarea>`. What is wrong with it?

A) Nothing, it works perfectly.

Incorrect. The textarea will be blank.

B) Textarea does not use the `value` attribute; the text goes BETWEEN the tags.

Correct! Unlike the `<input>` tag, textarea is not self-closing. The starting text must be written like this: `<textarea>Hello</textarea>`.

C) It is missing the type="textarea" attribute.

Incorrect. Textarea is its own tag, not a type of input tag.

4. You built a form to let users upload profile pictures, but the server is receiving empty files. What did you likely forget to add to the `<form>` tag?

A) enctype="multipart/form-data"

Correct! Standard form encoding cannot handle binary file data. You MUST specify `multipart/form-data` if your form includes a file upload box.

B) method="UPLOAD"

Incorrect. The method should be POST, there is no UPLOAD method.

C) action="save_file"

Incorrect. The action dictates *where* the data goes, but not *how* the browser packages the binary data.

Class Dismissed!

You have mastered HTML forms. This is one of the most critical skills for a web developer, as forms are the primary way web applications interact with their users.

Keep advancing your Web Development skills!