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.