- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete
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 entriesoff
— 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
andmethod
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
andmethod
- Control form behavior with attributes like
target
,autocomplete
, andenctype
Next Up
Next, we’ll explore each input type in depth — from text and email to checkboxes, radios, and more — in HTML Input Elements.