Section 16: Form Structure, Action, Method and Submission

Learning Objectives

• Understand why HTML forms are used.
• Learn the form, input, label, button and textarea elements.
• Understand action, method, enctype and autocomplete.
• Learn how browsers submit form data.

1. What Is an HTML Form?

An HTML form collects information from users. Common examples include login forms, registration forms, contact forms, search boxes and checkout forms.

2. Basic Form Structure

<form action="/register" method="post">
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Register</button>
</form>

The form element groups controls and defines how their data is submitted. The label describes each field, and the button submits the form.

3. The action Attribute

The action attribute specifies the URL that receives the submitted form data. If it is omitted, the browser normally submits to the current document URL.

<form action="/contact" method="post">
  ...
</form>

The URL must be handled by a server or application route. HTML alone does not store the data in a database or send an email.

4. GET vs POST

<!-- Search form -->
<form action="/search" method="get">
  <input type="search" name="q" placeholder="Search products">
  <button type="submit">Search</button>
</form>

<!-- Registration form -->
<form action="/register" method="post">
  <input type="text" name="username" required>
  <button type="submit">Create Account</button>
</form>

5. The name Attribute

The name attribute identifies a control in submitted form data. A field with an id but no name is generally not included in the form submission.

<input type="text" id="username" name="username">

6. The enctype Attribute

enctype defines how POST form data is encoded.

• application/x-www-form-urlencoded: the default for ordinary form submissions.
• multipart/form-data: required when a form uploads files.
• text/plain: a rarely used format, generally unsuitable for production forms.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="document">Upload document:</label>
  <input type="file" id="document" name="document">
  <button type="submit">Upload</button>
</form>

7. Autocomplete

The autocomplete attribute tells the browser whether it may suggest previously entered information.

<form autocomplete="on">
  <input type="email" name="email" autocomplete="email">
  <input type="text" name="given-name" autocomplete="given-name">
</form>

8. Complete Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Us</h1>

  <form action="/contact" method="post">
    <div>
      <label for="full-name">Full Name</label>
      <input id="full-name" name="full_name" type="text" required>
    </div>

    <div>
      <label for="contact-email">Email Address</label>
      <input id="contact-email" name="email" type="email" required>
    </div>

    <div>
      <label for="message">Message</label>
      <textarea id="message" name="message" rows="5" required></textarea>
    </div>

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

9. Important Security Notes

• Use HTTPS when transmitting information.
• Validate submitted data on the server even when browser validation exists.
• Use appropriate authentication, authorization and CSRF protection where needed.
• Never assume that hiding or disabling a field makes its data trustworthy.

Common Mistakes

• Forgetting the name attribute.
• Using GET for passwords or other sensitive data.
• Expecting an HTML form to save information without a backend.
• Using file inputs without multipart/form-data for a standard POST upload.
• Using a submit button when the intended action is to reset or perform a separate task.

Practice Exercises

1. Create a search form using GET with a search field named q.
2. Create a registration form using POST with username and email fields.
3. Create a document upload form using multipart/form-data.
4. Explain why the name attribute matters during submission.

Revision Quiz

1. Which element groups controls for form submission?
2. Which attribute identifies the URL receiving submitted data?
3. Which method commonly places form values in the URL?
4. Which attribute is needed for a control to be included under its field name in normal form submission?
5. Which enctype is commonly required for file uploads?
6. Does POST automatically encrypt form data?

Answer Key and Explanations

1. form — It groups form controls and defines submission behavior.
2. action — It specifies the submission destination.
3. GET — Values are commonly included in the query string.
4. name — It supplies the field name in submitted data.
5. multipart/form-data — It supports transmitting files with form data.
6. No. HTTPS provides transport encryption; POST alone does not.