Form in HTML

When you want to send some data to the server, <form> element is used.
<form> element is an interactive section of the HTML page in which you can enter some data and that data will be sent to the server when you submit the form.
Let us have a look at an example.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <label class="native-style" for="">Login</label>
        <form action="" method="post">
            <div>
                <label class="native-style" for="textUserName">User Name: </label>
                <input id="textUserName" name="username" type="text" />
            </div>
            <div>
                <label class="native-style" for="textPassword">Password: </label>
                <input id="textPassword" name="password" type="password" />
            </div>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form>
    </body>
</html>
                        

Attributes

Following attributes can be used while using <form>.

method attribute

method attribute specifies the HTTP method by which you want to send the data to a server.
There are two values:

  • get

    which directs the form to use HTTP Get method.
    In this method, form data is appended to the URI specified in action attribute separated by ? and result URI is sent to the server.

  • post

    which direct the form to use HTTP Post method.
    In this method, form data is included in the form body and then sent to the server.

Take a look at below example.



<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <label class="native-style" for="">Login form using post method</label>
        <form action="" method="post">
            <div>
                <label class="native-style" for="textUserName">User Name: </label>
                <input id="textUserName" name="username" type="text" />
            </div>
            <div>
                <label class="native-style" for="textPassword">Password: </label>
                <input id="textPassword" name="password" type="password" />
            </div>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form>
        <br>
        <label class="native-style" for="">Subscribe form using get method</label>
        <form action="" method="get">
            <div>
                <label>Email: </label>
                <input type="text" type="email" name="email" />
            </div>
            <div>
                <button type="submit">Subscribe</button>
            </div>
        </form>
    </body>
</html>
                        

In above code, the first form uses post method and second form uses get method. When you submit the first login form, it doesn't show any data in URL. While is you submit the subscribe form, you will see the data is sent to a server via URL.

autocomplete attribute

When you fill the form, the browser tries to auto-complete the form based on the previous information you filled. This setting can be overridden by autocomplete attribute. Possible values can be:

  • off:

    A browser will not show the hint of the value in each field of the form. The user needs to enter the value of the field.

  • on:

    The browser will automatically complete the value based on the previous information you filled in the form.

For the most browser, autocomplete attribute will not prevent a browser from asking to save username and password.

novalidate attribute

when novalidate attribute is added to the form, a browser will not validate the fields otherwise the browser will try to validate the fields.
Let us have a look at an example.



<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <label class="native-style" for="">Validate the form</label>
        <form action="" method="post">
            <div>
                <label class="native-style" for="textUserName">Email: </label>
                <input id="textUserName" name="username" type="email" required/>
            </div>
            <div>
                <button type="submit">Subscribe</button>
            </div>
        </form>
        <br>
        <label class="native-style" for="">Don't validate the form</label>
        <form action="" method="post" novalidate>
            <div>
                <label class="native-style" for="textUserName">Email: </label>
                <input id="textUserName" name="username" type="email" required/>
            </div>
            <div>
                <button type="submit">Subscribe</button>
            </div>
        </form>
    </body>
</html>
                        

In above code, when you submit the first form, it will validate the email field because it has type="email" and required attribute.
But in the second form we have added novalidate attribute added to the form which will stop browser to validate the form.

target attribute

The response is received at target attribute after submitting the form.
Below are the special value of the target attribute:

  • _self:

    Load the response of the form into the same frame in which the form is.

  • _blank:

    Load the response into the context.

  • _parent:

    Load the response into the parent frame of the current frame. If there is no parent frame, it will behave the same as _self.

  • _top:

    Load the response into the top level frame. If there is no top frame, it will behave the same as _self.

  • iframename:

    The response is displayed in a name iframe.

This value can be overridden by formtarget attribute of submit button.

action attribute

Value of action attribute is the URI where you want to send the form data on submission of the form. Let us have a look at the example.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <label class="native-style" for="">Send the data to same page</label>
        <form action="/forms.php" method="post">
            <div>
                <label class="native-style" for="textUserName">Email: </label>
                <input id="textUserName" name="username" type="email" required/>
            </div>
            <div>
                <button type="submit">Subscribe</button>
            </div>
        </form>
    </body>
</html>
                        

In above example, when you submit the form, it will be submitted to '/forms.php'.
This attribute can be overridden by formaction attribute of submit button.

Conclusion

In this section, we have learned about the forms in HTML.
For now, we have cover almost every topic that you should know to create an HTML page and HTML application.
There are many APIs introduced in HTML5. We will create a whole new course of HTML5 APIs. But you should study these topics and practice them.
Thank you !!!