HTML Forms - <form> Tag Examples

1. Overview

In this tutorial, We'll learn about how to use <form> tag and what is the importance of it. We will talk about a few examples where <form> tag usage is appropriate.

The HTML <form> element defines a form that is used to collect user input. Below is the format of the form tag.

<form>
...
...
form inside elements
...
...
</form>

<form> tag is used in all registration or log in pages. Because the user provides the data and pushed to the server for persistence.

2. <form> elements

<form> elements can be any input accepting elements such as text fields, checkboxes, radio buttons, submit buttons, and more.

input elements tag is <input> and it has a attribute 'text'. This attribute value will change based on our input type choice.

<input type="text">: Defines a one-line text input field
<input type="radio">: Defines a radio button (for selecting one of many choices)
<input type="submit">: Defines a submit button (for submitting the form)

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
</form>

As of now, we have seen the input accepting elements. But these are optional.

Important is <form> tag should have one submit button that takes the values and passes to the action. We will talk about the action in the next section of this article.

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
  <input type="submit" value="Submit">
</form>

3. <form> tag attributes

<form> tag mainly has three attributes.

a) action
b) target
c) method

3.1 action attribute

The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

<form action='login-form.php'>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
  <input type="submit" value="Submit">
</form>

The best practice is providing the action name. If we do not provide the action then it takes the action to the current page.

3.2 target attribute

Apart from the action attribute, there is another attribute that is target. This tells to the browser to open the next page in the new window or in the same window.

The following are the values for the target attribute.

_blank: Opens in a new tab or browser
_self: Open in the current window.
_parent: Opens the linked document in the parent frame
_top: Opens the linked document in the full body of the window

<form action='login-form.php' target='_blank'>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
  <input type="submit" value="Submit">
</form>

3.3 method attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.

GET Example:

<form action='login-form.php' target='_blank' method='get'>

POST Example:

<form action='login-form.php' target='_blank' method='post'>

The default method type is GET. This is used when there is no sensitive data that is posted on the page because all of the form data is visible in the browser URL.

login-form.php?firstName=Jhon&lastName=Peter

Important points on GET:

Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user wants to bookmark the result
GET is better for non-secure data, like query strings in Google

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

Important points on POST:

POST has no size limitations and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked

4. Name attribute on <input> tag

By this, you should have got a doubt on how to get the values of form in the action. Because there should be some mapping to the values for input tag.

<input> tag has a name attribute that takes the name to each input field.

Take a look at the following input tags which has name attributes and it has a unique value.

  <input type="text" name="firstname">
  <input type="text" name="lastname">
  <input type="text" name="email">

If we do not provide the name attribute to the input fields then these values will not be sent to the action.

5. <form> tag attributes

We have seen already 3 attributes of form. Apart from them, there are many others as below.

accept-charset: Specifies the charset used in the submitted form (default: the page charset).
action: Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete: Specifies if the browser should autocomplete the form (default: on).
enctype: Specifies the encoding of the submitted data (default: is url-encoded).
method: Specifies the HTTP method used when submitting the form (default: GET).
name: Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate: Specifies that the browser should not validate the form.
target: Specifies the target of the address in the action attribute (default: _self).

6. Conclusion

In this article, We have seen HTML <form> tag and its attributes.

<form> should have submit button and input fields should have 'name' attribute.

Every form tag should have action and method attributes.

If you have a different set of input fields then we can group them using <fieldset> tag.