Form Structure, Action, Method and Submission HTML Forms

<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.