HTML <form> Tag
Attributes and Examples

HTML <form> Tag: The Gateway to User Input

The <form> tag is the foundation of all user-driven interactions on the web. Whether it's logging in, subscribing, or submitting feedback — every action starts with a form. Let's explore how the form element works, what its attributes do, and how to structure it effectively.

What is the <form> Element?

The <form> tag creates an interactive region for input fields, buttons, checkboxes, dropdowns, and more. It doesn’t collect information on its own — instead, it defines how and where to send the information the user provides.

Basic Form Syntax

<form action="/submit" method="post">
  <input type="text" name="fruit" placeholder="Enter a fruit">
  <input type="submit" value="Send">
</form>
[ Enter a fruit            ] [Send]

Let’s break it down using the most essential attributes.

Key Attributes of <form>

1. action

This defines where the form data is sent. It could be a URL, a server endpoint, or a script file.

<form action="submit.php">

If omitted, the form submits to the same page.

2. method

This defines how the data is sent. Usually:

  • get — appends data to the URL (visible in browser)
  • post — sends data invisibly in the request body
<form action="/search" method="get">
  <input type="text" name="q">
  <input type="submit" value="Search">
</form>
[ ________ ] [Search]

With method="get", the data appears in the URL like: /search?q=apple

3. target

This attribute specifies where to open the response after form submission.

  • _self — same tab (default)
  • _blank — new tab
<form action="/thankyou" target="_blank">

This opens the result page in a new tab.

4. autocomplete

Enables or disables autofill suggestions by the browser.

  • on — allows browsers to remember previous entries
  • off — disables autofill
<form autocomplete="off">

Useful for login forms or sensitive information.

5. enctype

Defines how the form data should be encoded. Most relevant when uploading files.

  • application/x-www-form-urlencoded (default)
  • multipart/form-data — used when uploading files
<form method="post" enctype="multipart/form-data">
  <input type="file" name="image">
</form>

Use multipart/form-data whenever your form includes file uploads.

Minimal Form Example

<form action="/submit" method="post">
  <label for="fruit">Favorite Fruit:</label>
  <input type="text" id="fruit" name="fruit" placeholder="Apple"><br><br>

  <input type="submit" value="Send">
</form>
Favorite Fruit: [ Apple           ] [Send]

Each time the user clicks "Send", the form data is packaged and sent to /submit.

Form Doesn’t Work Alone

The form is just the container. It comes to life when paired with:

  • <input> fields for text, email, etc.
  • <textarea> for larger messages
  • <select> dropdown menus
  • <button> or <input type="submit"> to trigger actions

Think of <form> as a blank survey sheet. What makes it useful is what you place inside.

Best Practices

  • Always use the action and method for clarity and consistency
  • Use autocomplete="off" if your form handles private or one-time-use data
  • Ensure name attributes are present for each field — otherwise, the data won’t be sent

Summary

The <form> tag is the structural foundation of user input on the web. You now know how to:

  • Wrap input fields inside a form
  • Define where and how the data should be submitted using action and method
  • Control form behavior with attributes like target, autocomplete, and enctype

Next Up

Next, we’ll explore each input type in depth — from text and email to checkboxes, radios, and more — in HTML Input Elements.

QUIZ

Question 1:Which HTML tag is used to create a form that collects user input?

Question 2:The action attribute in the <form> tag defines the URL where form data should be submitted.

Question 3:Which of the following are valid attributes of the <form> tag?

Question 4:Which form method is recommended when sensitive data like passwords is being submitted?

Question 5:Using method="get" appends form data to the URL in name/value pairs.

Question 6:Which examples show correct usage of the <form> tag with attributes?