Form attributes

Now that you are familiar with form creation and different elements in the HTML forms, it's time to take full advantage of HTML forms by adding attributes to them. In this topic, you are going to learn about various attributes that are available for HTML forms.

Attributes

In HTML, attributes are special keywords that provide special characteristics to HTML elements. Each HTML form element can have attributes that define the behavior of elements. Attributes come in a name-value pair, which means that attributes are specified in the starting tag and come in pairs that look like name="value". As you've probably guessed, name is the attribute name and value is the attribute value. Let's take a look at the syntax of attributes when used with the HTML elements:

<element attribute_name="attribute_value">Content inside element</element>

You've already studied the method and action attributes. Now let's learn about the other attributes that can be used with HTML form elements.

The autocomplete attribute

The autocomplete attribute is used to add an autocomplete feature in HTML form elements. It allows the browsers to predict the values based on the earlier typed values. This attribute can be applied to the <form> and <input> elements. The autocomplete attribute can have two values: on and off.

The syntax looks like this:

<element autocomplete="on"> Content of the element</element>

Here is an example:

<form action="/action_page.php" method="get" autocomplete="on">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" /><br /><br />

    <label for="city">City: </label>
    <input type="text" name="city" id="city" /><br /><br />
    <input type="submit" />
</form>

And here is the output:

As you can see, when the user types in "jet", the autocomplete feature suggests the options from the previously entered values that start with the same letters.

The target attribute

The target attribute is used to display the generated response when the user has submitted the form details. There are various values of the target attribute, which means the response can be displayed in many ways. Let's take a look at the syntax and the values available to the target attribute.

Here is the syntax with the values of the target attribute:

<form target=" _self | _blank | _parent | _top | framename">

Now let's see what each value means:

The novalidate attribute

The novalidate attribute, when present in the <form> element, doesn't validate the form while submitting it. The novalidate attribute is also a boolean attribute. Thus, when it is not present, the form is validated when submitting the form responses. Let's take a look at the syntax of the novalidate attribute and the example of its use.

Here is what the syntax looks like:

<form novalidate> ... </form>

Here is an example:

<form action="/action_page.php" method="get" novalidate>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" /><br /><br />

    <label for="city">City: </label>
    <input type="text" name="city" id="city" /><br /><br />
    <input type="submit" />
</form>

Now suppose you have the back end integrated with this form. When the above form is submitted, it will not get validated as the novalidate attribute is present in the form, and any input values entered by the user get directly submitted to the server. For now, remember that the novalidate attribute means the form responses are not validated at the time of submitting the form.

Conclusion

Along with the method and action attributes in HTML forms, now you are aware of other attributes such as autocomplete, target, novalidate. The autocomplete attribute is used to add an autocomplete feature in the form element. The target attribute specifies where the form responses should be displayed after submitting the form. The novalidate attribute, when present in the <form> element, doesn't validate the form while the responses are submitted.