Attribute	Purpose
`action`	Specifies where the form data is submitted.
`method`	Specifies the HTTP method used to submit the data.
`target`	Specifies where the response is displayed.
`autocomplete`	Controls browser autocomplete behavior.
`enctype`	Specifies how form data is encoded.
`novalidate`	Disables built-in browser validation during submission.
`accept-charset`	Specifies character encodings accepted for submission.

2. action Attribute

The action attribute specifies the URL or endpoint that receives the submitted form data.

<form action="/register">

    <input type="text"
           name="username">

    <button type="submit">
        Register
    </button>

</form>

When the form is submitted, the browser sends the form data toward the address specified by action.

3. action with an Absolute URL

The action can also specify a complete URL.

<form action="https://example.com/register"
      method="post">

    <input type="text"
           name="username">

    <button type="submit">
        Register
    </button>

</form>

4. method Attribute

The method attribute specifies the HTTP method used when the form is submitted.

<form action="/search"
      method="get">

    <input type="text"
           name="query">

    <button type="submit">
        Search
    </button>

</form>

Common form methods are GET and POST.

5. method="get"

With the GET method, form data is generally encoded into the request URL as query parameters.

<form action="/search"
      method="get">

    <label for="query">
        Search:
    </label>

    <input type="text"
           id="query"
           name="query">

    <button type="submit">
        Search
    </button>

</form>

Common Use: GET is commonly used for searches and other operations where query parameters are appropriate.

6. method="post"

With the POST method, form data is sent in the request body.

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

    <label for="name">
        Name:
    </label>

    <input type="text"
           id="name"
           name="name">

    <button type="submit">
        Register
    </button>

</form>

7. target Attribute

The target attribute specifies where the response from the submitted form should be displayed.

Value	Purpose
`_self`	Displays the response in the current browsing context.
`_blank`	Displays the response in a new browsing context.
`_parent`	Displays the response in the parent browsing context.
`_top`	Displays the response in the top-level browsing context.

Example

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

    <input type="text"
           name="query">

    <button type="submit">
        Search
    </button>

</form>

8. autocomplete Attribute

The autocomplete attribute controls whether the browser can provide previously entered or stored values.

<form autocomplete="on">

    <label for="name">
        Name:
    </label>

    <input type="text"
           id="name"
           name="name"
           autocomplete="name">

</form>

The attribute can be set to on or off on a form, while controls can also use more specific autocomplete tokens.

9. autocomplete="off"

<form autocomplete="off">

    <label for="code">
        Verification Code:
    </label>

    <input type="text"
           id="code"
           name="code">

</form>

Note: Browser behavior around autocomplete can vary depending on the browser and the type of information being entered.

10. enctype Attribute

The enctype attribute specifies how form data is encoded when using the POST method.

Value	Purpose
`application/x-www-form-urlencoded`	Default encoding for most forms.
`multipart/form-data`	Used when the form includes file uploads.
`text/plain`	Submits data in a simple text representation.

11. application/x-www-form-urlencoded

This is the default encoding for a normal form submission.

<form action="/register"
      method="post"
      enctype="application/x-www-form-urlencoded">

    <input type="text"
           name="name">

    <input type="email"
           name="email">

    <button type="submit">
        Register
    </button>

</form>

12. multipart/form-data

Use multipart/form-data when a form uploads files.

<form action="/upload"
      method="post"
      enctype="multipart/form-data">

    <label for="resume">
        Resume:
    </label>

    <input type="file"
           id="resume"
           name="resume">

    <button type="submit">
        Upload
    </button>

</form>

Important: When uploading files through a standard HTML form, multipart/form-data is commonly required.

13. text/plain

The text/plain value submits form data as plain text.

<form action="/submit"
      method="post"
      enctype="text/plain">

    <input type="text"
           name="name">

    <input type="email"
           name="email">

    <button type="submit">
        Submit
    </button>

</form>

14. novalidate Attribute

The novalidate attribute tells the browser not to perform its built-in form validation when submitting the form.

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

    <input type="email"
           name="email"
           required>

    <button type="submit">
        Submit
    </button>

</form>

Important: Disabling browser validation does not remove the need for server-side validation and appropriate application-level checks.

15. accept-charset Attribute

The accept-charset attribute indicates the character encodings accepted for form submission.

<form action="/submit"
      method="post"
      accept-charset="UTF-8">

    <input type="text"
           name="name">

    <button type="submit">
        Submit
    </button>

</form>

16. Form Attribute Example

<form
    action="/register"
    method="post"
    target="_self"
    autocomplete="on"
    accept-charset="UTF-8">

    <label for="name">
        Full Name:
    </label>

    <input type="text"
           id="name"
           name="name"
           autocomplete="name"
           required>

    <br><br>

    <button type="submit">
        Register
    </button>

</form>

17. Form Attribute with File Upload

<form
    action="/upload"
    method="post"
    enctype="multipart/form-data">

    <label for="resume">
        Upload Resume:
    </label>

    <input type="file"
           id="resume"
           name="resume"
           required>

    <br><br>

    <button type="submit">
        Upload Resume
    </button>

</form>

18. Form Attribute with Search

<form
    action="/search"
    method="get"
    autocomplete="off">

    <label for="search">
        Search:
    </label>

    <input type="search"
           id="search"
           name="query"
           placeholder="Search courses">

    <button type="submit">
        Search
    </button>

</form>

19. Form Attribute with Registration

<form
    action="/register"
    method="post"
    autocomplete="on">

    <label for="username">
        Username:
    </label>

    <input type="text"
           id="username"
           name="username"
           autocomplete="username"
           required>

    <br><br>

    <label for="email">
        Email:
    </label>

    <input type="email"
           id="email"
           name="email"
           autocomplete="email"
           required>

    <br><br>

    <button type="submit">
        Create Account
    </button>

</form>

20. Form Attribute vs Input Attribute

Some attributes belong to the <form> itself, while others belong to individual controls.

Form-Level Attribute	Control-Level Attribute
`action`	`name`
`method`	`value`
`target`	`placeholder`
`enctype`	`required`
`novalidate`	`readonly`
`autocomplete`	`disabled`

21. Form Submission Example

<form
    action="/contact"
    method="post"
    enctype="application/x-www-form-urlencoded">

    <label for="name">
        Name:
    </label>

    <input type="text"
           id="name"
           name="name"
           required>

    <br><br>

    <label for="message">
        Message:
    </label>

    <br>

    <textarea
        id="message"
        name="message"
        rows="5"
        required>
    </textarea>

    <br><br>

    <button type="submit">
        Send Message
    </button>

</form>

22. Form Controls and Names

Form controls that should contribute data to the submission normally need a useful name attribute.

<form action="/login"
      method="post">

    <input type="text"
           name="username">

    <input type="password"
           name="password">

    <button type="submit">
        Login
    </button>

</form>

23. Form Attribute and Validation

Form-level and control-level attributes can work together to create a predictable submission process.

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

    <input type="text"
           name="username"
           minlength="5"
           maxlength="20"
           required>

    <input type="email"
           name="email"
           required>

    <button type="submit">
        Register
    </button>

</form>

24. Accessibility Considerations

Form attributes should support clear, predictable, and accessible interaction.

Use meaningful labels and control names.
Do not rely only on placeholders.
Use appropriate autocomplete values.
Provide clear validation feedback.
Use suitable submission methods for the operation.
Use file upload encoding correctly.

25. Common Mistakes

Forgetting the action when a specific endpoint is required.
Using an unsuitable method.
Forgetting multipart/form-data for file uploads.
Using novalidate without implementing appropriate validation elsewhere.
Using unclear or missing name attributes.
Using inappropriate autocomplete settings.
Assuming client-side validation is sufficient for application security.

26. Best Practices

Choose the form action and method according to the operation.
Use POST when submitting data that should be sent in the request body.
Use GET for search and query-style interactions when appropriate.
Use multipart/form-data for file uploads.
Use meaningful control names.
Use appropriate autocomplete hints.
Do not rely only on browser validation.

27. Practice Task

Create the following forms:

A search form using GET.
A registration form using POST.
A form that opens the response in a new browsing context.
A file upload form using multipart/form-data.
A form using autocomplete.
A form using novalidate.
A form using accept-charset="UTF-8".

28. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>Form Attributes Example</title>

</head>

<body>

    <h1>Student Registration</h1>

    <form
        action="/register"
        method="post"
        autocomplete="on"
        accept-charset="UTF-8">

        <fieldset>

            <legend>
                Account Information
            </legend>

            <label for="username">
                Username:
            </label>

            <input
                type="text"
                id="username"
                name="username"
                autocomplete="username"
                required>

            <br><br>

            <label for="email">
                Email:
            </label>

            <input
                type="email"
                id="email"
                name="email"
                autocomplete="email"
                required>

            <br><br>

            <label for="resume">
                Resume:
            </label>

            <input
                type="file"
                id="resume"
                name="resume">

            <br><br>

            <button type="submit">
                Register
            </button>

        </fieldset>

    </form>

</body>

</html>

Summary

HTML form attributes control how forms submit and handle data. The most important attributes include action, method, target, autocomplete, enctype, novalidate, and accept-charset. GET is commonly used for query-style operations, while POST sends form data in the request body. For file uploads, multipart/form-data is commonly used.

← Previous: Form Basics Next: Input Types →