HTML – Form Attributes


What are HTML Form Attributes ?

HTML attributes controls behaviour during HTML form during submission.

Some of the attributes are listed below,

1. action

2. method

3. enctype

4. novalidate

5. target

1. action

Once when the form is submitted the form action is triggered with input data to the action URL.

This “action” processes the form submission to the particular URL with data as input.

Usually “action” is a backend script to process your passed input data to the URL.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp">
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>

Output :

2. method


This is the HTTP method to submit the form, usually POST or GET.

1. POST method :

POST method posts/pushes the form data to URL as the request body.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp" method="post">
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>

Output :

Learn html course !!!

Click to Learn More about – HTML Tutorial for beginners

2. GET method :

GET method is used to GET data from the URL.

We can send the input params by appending to the action URL with a “?” separator.

Method POST/GET names are case insensitive.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp" method="get">
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>

Output :

3. enctype

enctype is the MIME type of the form submission.

If the POST method is used the possible values while submitting the form will be,

1. Default value will be “application/x-www-form-urlencoded”.

2. If we use <input> elements with type=file, “multipart/form-data” will also be sent.

3. In HTML5 on form submission “text/plain” is introduced.

4. novalidate

“novalidate” is a boolean attribute indicates that the form shouldn’t be validated when submitted.

If the attribute is set the form will not be validated while submission.

If the attribute is not set and therefore the form is validated, this will override the form novalidate attribute like submit button for validation.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp" method="get" novalidate>
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>

Output :

5. target

“target” determines the location of where the action should be executed.

It helps in landing the action request properly for getting the response.

1.target

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp" method="get" novalidate target="_self">
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>

2. _blank

Sends the action request(POST/GET) in the next web tab or new location.


Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp" method="get" novalidate target="_blank">
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>

3. _parent

Send the action request(POST/GET) into the parent browsing context of the current location.

If there is no parent location, behaves the same as _self.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp" method="get" novalidate target="_parent">
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>

4. _top

Send the action request(POST/GET) into the top-level browsing context.

If there is no parent location, behaves the same as _self.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form action="actionpage.jsp" method="get" novalidate target="_top">
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                        <br/><br/>
                        <input type="submit" value="Submit">
                </form>
        </body>
        </html>