Forms in HTML

Forms in HTML are used to get some data from the user visiting the site. In this tutorial, we will learn about forms in HTML.
Submitted by Shivang Yadav, on December 23, 2019

HTML Forms

A form is a page that is used to get some data input from the user. For example, for registration, login, feedback, etc. forms are very useful.

In HTML too, forms are used for the same purpose, it's just that the user is a visitor of the website. Forms in HTML is a collection of different types of input tags along with indications for the user on what to fill in it.

The data collected is tracked by the backend programming languages (like PHP, ASP, etc) to process it.

The form in HTML is created using <form> tag.

Syntax:

<form>
    ...
</form>

All the elements are to be enclosed inside this tag only.

In a form, there are two main parts, the text that makes up the form and the type of input that is used to get input from the user.

The text is simply HTML tags like <h1>, <p>, etc that are used to print text in HTML.

HTML Input

There are multiple types of inputs that are valid and can be used in HTML to get data from the user in the HTML Form. They are,

Text input: used to get input in basic text format.
Radio Button: used to get a radio button (select one out of multiple-choice).
Checkbox: used to get a multi-select option button.
Select Box: used to get a dropdown list of options forms users to select.
File upload: used to place a file upload input box.
Button: used to get a button in the form. The most common is the submit button.

Action Attribute

The action attribute of the HTML form is used to call the page (code) that will act on the particular form. Normally a server-side script is called for acting.

Syntax:

<form action="Action.php">

Target Attribute

The target attribute of the HTML form is used to define the page to which the page will be opened on submitting the form.

The default value of the target attribute is _self.

Syntax:

<form action="action.php" target="_blank">

It will open a new tab to display the result of form submission.

Method Attribute

The method attribute in HTML forms is used to define the HTTP method which is to be used for submitting the form.

Syntax:

<form action="action.php" method="get">

In HTML there are two methods that are used,

get
post

get: get is a method used to submit data to the webserver from HTML forms. In get method, the data which is submitted to the server can be seen in the browser's address bar. Also, the length of data that can be transmitted by the get method is 2048 characters.

post: post method is used to submit data to the webserver from the HTML form. In post method, the data submitted is secure and cannot be seen in the address bar.

Example: A simple HTML login form

<!DOCTYPE html>

<html>

<body>
    <h2>HTML Forms</h2>
    <form action="/action_page.php" target="_blank" method="post">
        <p>UserName or Mobile No. :
            <input type="text">
        </p>
        <p>Password :
            <input type="password">
        </p>
        <input type="submit" value="Submit">
    </form>
</body>

</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples