HTML

HTML Form Attributes

HTML forms let users send data to web servers and interact with applications. You can add attributes to a form to control how it submits data, validates input, and handles results. This tutorial covers common form attributes, explains their syntax, and shows practical examples.

Learning Outcomes

After reading this tutorial, you will be able to:

Understand key form attributes like action, method, and target.
Apply validation and input features such as autocomplete, novalidate, and enctype.
Choose the correct HTTP method for secure data submission.
Control form submission behavior using target.
Ensure cross-browser compatibility for your forms.

What Are HTML Form Attributes?

Form attributes add details to a form’s behavior. You add them inside the <form> tag to set the submission URL, HTTP method, validation rules, and autofill options. You need these attributes to build interactive, user-friendly forms.

Syntax:

Attributes are added directly to the <form> tag or its child elements. Here’s an example of a basic form with attributes:

<form action="/submit_form" method="post" autocomplete="on" enctype="multipart/form-data">
    <!-- Form inputs go here -->
</form>

All HTML Form Attributes

Attribute	Description
action	Defines where to send the form data upon submission.
method	Specifies the HTTP method to use when sending form data (GET or POST).
target	Determines where to display the response after submitting the form.
autocomplete	Allows the browser to suggest and auto-fill form input values.
novalidate	Disables form validation before submission.
rel	Defines the relationship between the current document and the linked resource.
accept-charset	Specifies the character encoding for the form submission.
enctype	Specifies how form data should be encoded when sending it to the server, usually for file uploads.

The Action Attribute

The action attribute specifies where to send the form data when the form is submitted. It defines the URL of the server-side script or service that will process the submitted data.

Syntax:

<form action="URL">

Example:

<form action="/submit_form.php" method="post">
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

Notes:

If the action attribute is omitted, the form data is sent to the current page.
Ensure that the URL provided is correct and points to a script or service that can handle the form submission.

The Target Attribute

The target attribute specifies where to display the response after submitting the form. This can be a new window, the current window, or a specific iframe.

Syntax:

<form action="URL" target="_blank">

Example:

<form action="/submit_form.php" method="post" target="_blank">
    <input type="text" name="email" required>
    <input type="submit" value="Submit">
</form>

Notes:

Common values include _self (current window), _blank (new tab), and framename (specific iframe).

The Method Attribute

The method attribute defines the HTTP method used when submitting form data. The two most common methods are GET and POST. GET appends form data to the URL, while POST sends data within the body of the request.

Syntax:

<form method="get">

Example:

<form action="/submit_form.php" method="post">
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

Notes:

GET is suitable for non-sensitive data, but not recommended for large or sensitive submissions.
POST is ideal for submitting sensitive data as it doesn't expose the data in the URL.

The Autocomplete Attribute

The autocomplete attribute controls the autofill behavior of form inputs. It can be set to "on" to allow the browser to suggest previously entered values or "off" to disable the feature.

Syntax:

<form autocomplete="on">

Example:

<form action="/submit_form.php" method="post" autocomplete="on">
    <input type="text" name="email" autocomplete="email">
    <input type="submit" value="Submit">
</form>

Notes:

It’s advisable to set autocomplete="off" for sensitive fields like passwords or personal identification.

The Novalidate Attribute

The novalidate attribute disables HTML5 client-side form validation. This allows the form to submit even if the data doesn't meet the specified constraints (e.g., required fields, valid email format).

Syntax:

<form novalidate>

Example:

<form action="/submit_form.php" novalidate>
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

Notes:

Useful when you need custom validation logic or want to bypass built-in HTML validation.

The Rel Attribute

The rel attribute specifies the relationship between the current document and a linked resource. It’s typically used with anchor (<a>) or link (<link>) tags.

Syntax:

<a href="https://www.sitepoint.com" rel="nofollow">Visit SitePoint Website</a>

Example:

<form action="/submit_form.php" rel="noopener">
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

Notes:

Often used with links to specify relationship types like nofollow, noopener, or external.

The Accept-Charset Attribute

The accept-charset attribute specifies the character encoding to be used when submitting the form. It’s important for ensuring that non-ASCII characters (like those in international languages) are properly handled.

Syntax:

<form accept-charset="UTF-8">

Example:

<form action="/submit_form.php" method="post" accept-charset="UTF-8">
    <input type="text" name="name" required>
    <input type="submit" value="Submit">
</form>

Notes:

UTF-8 is the most common character encoding and supports a wide range of languages.

The Enctype Attribute

The enctype attribute specifies how form data should be encoded when submitting it to the server. It’s essential when submitting files through forms.

Syntax:

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

Example:

<form action="/submit_form.php" method="post" enctype="multipart/form-data">
    <input type="file" name="profile_pic">
    <input type="submit" value="Upload">
</form>

Notes:

Use multipart/form-data when uploading files.
Use application/x-www-form-urlencoded for regular form submissions without files.

Supported Browsers

HTML form attributes are supported across all major browsers, including:

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Opera

Ensure that your forms are tested across multiple browsers to verify compatibility and behavior.

FAQs on HTML Form Attributes

What Are the Two Most Important Attributes of an HTML Form?

The two most important attributes are action and method:

action: Specifies the URL where form data is sent for processing.
method: Defines the HTTP method (GET or POST) used to submit the form.

How Do I Disable Form Validation?

Use the novalidate attribute to disable HTML5 form validation:

<form novalidate>
    <input type="text" name="username" required>
    <input type="submit" value="Submit">
</form>

Can I Use Both GET and POST Methods in the Same Form?

No, a form can only use one method—either GET or POST. Choose based on the nature of the form data:

GET: Data is appended to the URL, visible to users.
POST: Data is sent in the request body, not visible to users.

What Is the Difference Between GET and POST Methods in Forms?

Forms send data with either the GET or POST method. Each method handles data in a different way.

GET sends form data by appending it to the URL as query parameters. Use GET for small, non-sensitive data, such as search terms. Data appears in the URL and stays within browser URL-length limits.
POST sends form data in the HTTP request body. Use POST for sensitive or large data, such as login details or file uploads. Data does not appear in the URL and can exceed URL-length limits.

Attribute	GET	POST
Data location	URL query string	Request body
Data visibility	Visible in URL	Hidden from URL
Data size limits	About 2,048 characters (browser-dependent)	No practical limit
Security	Not for sensitive data	Better for sensitive data
Common use cases	Search forms, filters	Login forms, file uploads
Bookmark support	URLs with data can be bookmarked	Cannot bookmark form data

Choose GET for simple reads and POST for writes or data that must stay hidden.

Previous Next