HTML Form Attributes

HTML form attributes control how a form behaves, how information is submitted, and how users interact with form controls. They allow developers to specify the destination for submitted data, choose the submission method, enable autocomplete, and apply validation rules.

Understanding form attributes is important when creating registration forms, login pages, contact forms, and online applications.

What Are HTML Form Attributes?

Form attributes are special settings added to HTML elements to define their behavior. Some attributes belong to the <form> element, while others belong to individual inputs and buttons.

For example:

<form action="/register" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

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

Here, action, method, and required control different aspects of the form. Learn more about HTML Form Structure to understand how these elements fit together.

Common HTML Form Attributes

The following table describes frequently used attributes of the <form> element.

AttributePurpose
actionSpecifies where form data is submitted
methodDefines the HTTP method, commonly get or post
autocompleteControls whether browsers may suggest previously entered information
enctypeSpecifies how submitted data is encoded
targetSpecifies where the response is displayed
novalidateDisables built-in browser validation during submission

For example, method="post" sends form data in the request body, while method="get" generally places submitted values in the URL query string.

HTML Form Attributes Example

The following example demonstrates how form attributes work together.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form Attributes</title>
</head>
<body>

    <h1>Registration Form</h1>

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

        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>

        <br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <br><br>

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

    </form>

</body>
</html>

In this example, the form sends data to /register using POST. The autocomplete="on" setting allows the browser to offer suitable suggestions, and required prevents submission when either field is empty.

The /register endpoint must be implemented on a server for the submission to be processed successfully.

Important Input Attributes

Individual form controls also support attributes that determine how they behave.

  • type: Specifies the kind of input, such as text, email, or password.
  • name: Identifies the field in submitted form data.
  • value: Defines an initial or submitted value.
  • placeholder: Displays a hint inside an empty field.
  • required: Requires a value before submission.
  • readonly: Prevents users from editing a field.
  • disabled: Disables a control.
  • min and max: Set minimum and maximum values for supported input types.

Explore HTML Input and HTML Input Types to learn how these attributes are used with different controls.

HTML Form Attributes vs Input Attributes

Form attributes usually control the submission of the entire form, while input attributes control individual fields.

For example, action specifies the form’s destination, whereas placeholder provides a hint inside one input. Similarly, method determines how the form is submitted, while required determines whether a particular field must contain a value.

Frequently Asked Questions

Is the action attribute required?

No. If omitted, the form normally submits to the current document URL.

What is the difference between GET and POST?

GET generally sends values in the URL, while POST sends them in the request body. Use HTTPS and appropriate server-side security when handling sensitive information.

What does the required attribute do?

It prevents a form from passing normal browser validation when a required field is empty. Learn more about the HTML Required Attribute.

What is the purpose of the enctype attribute?

It specifies how form data is encoded when submitted. For file uploads, multipart/form-data is commonly required when using the POST method.

HTML form attributes make forms more useful and flexible by controlling submission, user interaction, and basic browser validation.

3 thoughts on “HTML Form Attributes”

Comments are closed.