HTML form Tag

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.

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.

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

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.

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

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.

• 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

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

Choose the option that lists all and only the correct statements.

1. action
2. method
3. enctype
4. target

Choose the option that lists all and only the correct statements.

1. <form action="submit.php" method="post">

2. <form method="get" target="_blank">

3. <form enctype="multipart/form-data">

4. <form src="/handler" method="post">

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