HTML Form Attributes

The <form> element is the container for all your form fields (like <input>, <textarea>, and <select>). While the input fields collect the data, the <form> element itself defines how and where that data is sent once the user hits the submit button.

It achieves this control using specific attributes that tell the browser what to do with the collected information. Understanding these attributes is key to successful form handling.

Core Submission Attributes: Where and How

The two most critical attributes for any form are action and method. They dictate the destination and the transport mechanism for your data.

1. The `action` Attribute

The action attribute specifies the URL where the form data should be sent (submitted) for processing when the form is submitted.

Value: A valid URL (absolute or relative).
Purpose: This URL points to the script or endpoint on a server (e.g., PHP, Python, Node.js) that will handle the incoming data.

<form action="/scripts/process-signup.php" method="post">
</form>

2. The `method` Attribute

The method attribute defines the HTTP method used to send the form data. The two most common methods are GET and POST.

Method	Description	When to Use
`GET`	Appends the form data to the URL as a query string (e.g., `url?name=value`).	Use for non-sensitive data and simple queries (like search forms) where users might want to bookmark the results. Data is visible in the URL.
`POST`	Packages the form data within the body of the HTTP request.	Use for sensitive data (passwords, credit cards) or when sending large amounts of data (like file uploads). Data is hidden from the URL.

<form action="/api/register" method="post">
</form>

Behavior Attributes: Display and Encoding

These attributes control where the response from the server appears and how the data is formatted before transmission.

3. The `target` Attribute

The target attribute specifies where to display the response received after submitting the form. Its function is identical to the target attribute used on the <a> (anchor) tag.

Value	Description
`_self`	(Default) Loads the response in the same window/tab.
`_blank`	Loads the response in a new window or tab.
`_parent`	Loads the response in the parent frame (if using frames).
`_top`	Loads the response in the full body of the window.

<form action="/report" method="get" target="_blank">
</form>

4. The `enctype` Attribute (Encoding Type)

The enctype (Encoding Type) attribute specifies how the form data should be encoded when sending it to the server. This attribute is only relevant when the method is set to post.

Value	Description	When to Use
`application/x-www-form-urlencoded`	(Default) All characters are encoded before sending.	Standard for almost all text-only forms.
`multipart/form-data`	No characters are encoded.	MUST be used if the user is uploading files (e.g., using `<input type="file">`).
`text/plain`	Spaces are converted to `+`, but no other special encoding.	Rarely used; mostly for debugging purposes.

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="document">
</form>

Validation and Browser Control Attributes

These attributes give you control over browser-native features like auto-filling and form validation.

5. The `autocomplete` Attribute

The autocomplete attribute controls whether the browser should automatically fill in form values based on past user input.

Value: on (Default) or off.

<form autocomplete="off">
</form>

note

autocomplete can also be set on individual <input> fields to control specific fields within a form.

6. The `novalidate` Attribute

By default, the browser performs client-side validation (e.g., checking for the required attribute or an email format) before submitting the form. The novalidate attribute overrides this behavior.

Value: It's a boolean attribute, meaning its presence alone sets it to true.

<form action="/submit" method="post" novalidate>
</form>

Summary of Essential Form Attributes

Attribute	Default Value	Purpose	When to Use
`action`	Current page URL	Specifies the URL where the form data is sent.	Always required for server submission.
`method`	`GET`	Specifies the HTTP method (`GET` or `POST`).	Use `POST` for sensitive data.
`target`	`_self`	Specifies where to display the server's response.	To open a response in a new tab (`_blank`).
`enctype`	`application/x-www-form-urlencoded`	Specifies how the data is encoded.	Must be `multipart/form-data` for file uploads.
`autocomplete`	`on`	Controls browser auto-filling suggestions.	To disable suggestions for sensitive forms (`off`).
`novalidate`	(Absent)	Tells the browser to skip client-side validation.	When server-side validation is preferred or necessary.

Example: A Complete Form Setup

Here is how you combine multiple attributes for a secure and functional user profile update form that includes a photo upload:

profile-update.html
<form action="/api/profile-update"
      method="post"
      enctype="multipart/form-data" 
      target="_self"
      autocomplete="off">

    <h2>Update Profile</h2>
    
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" required>
    
    <label for="photo">Profile Photo:</label>
    <input type="file" id="photo" name="profile_photo">
    
    <button type="submit">Save Changes</button>
</form>

Conclusion

The attributes of the <form> element are the controls that determine the communication pathway between the user's browser and your web server. By correctly setting the action (destination), method (transport type), and enctype (data format), you ensure that form data is submitted securely and correctly every time.

Core Submission Attributes: Where and How​

1. The action Attribute​

2. The method Attribute​

Behavior Attributes: Display and Encoding​

3. The target Attribute​

4. The enctype Attribute (Encoding Type)​

Validation and Browser Control Attributes​

5. The autocomplete Attribute​

6. The novalidate Attribute​

Summary of Essential Form Attributes​

Example: A Complete Form Setup​

Conclusion​