totn HTML

HTML: <form> tag

This HTML tutorial explains how to use the HTML element called the <form> tag with syntax and examples.

Description

The HTML <form> tag is used to create a form on a web page that has interactive controls for user input. This tag is also commonly referred to as the <form> element.

Syntax

In HTML, the syntax for the <form> tag is:

<body>
  <form action="" method="get">
    Company: <input type="text" name="company"><br>
    Address: <input type="text" name="address"><br>
    <input type="submit" value="Submit">
  </form>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <form> tag:

Attribute Description HTML Compatibility
accept List of content types (comma separated) that the server accepts as file types HTML 4.01, Obsolete in HTML5
accept-charset List of character sets (comma or space separated) that the server accepts HTML 4.01, HTML5
action URL of the page that processes the information submitted by the form HTML 4.01, HTML5
autocomplete Value of either on or off to indicate whether the browser can automatically complete the values in the input elements based on values previously entered in the form HTML5
enctype When the method for the form is post, specifies the MIME type for how the form data should be encoded

application/x-www-form-urlencoded (default)
multipart/form-data
text/plain		 HTML 4.01, HTML5
method HTTP method used to submit the form. It can be either post or get HTML 4.01, HTML5
name The name of the form HTML 4.01, HTML5
novalidate Boolean value indicating whether the form should be validated when it is submitted HTML5
target Specifies where to display the response after submitting the form. It can be one of the following values: _self, _blank, _parent, _top

_self - means that the resource loads into the current frame or context
_blank - means that the resource loads into a new window or context
_parent - means that the resource loads into the parent frame or context
_top - means that the resource loads into the full, original window		 HTML 4.01, HTML5

Note

  • The HTML <form> element is found within the <body> tag.
  • HTML forms can contain elements such as: <button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select> and <textarea> tags

Browser Compatibility

The <form> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <form> tag below, exploring examples of how to use the <form> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <form> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  Company: <input type="text" name="company"><br>
  Address: <input type="text" name="address"><br>
  <input type="submit" value="Submit">
</form>
</body>

</html>

In this HTML5 Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as a submit button.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <form> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  Company: <input type="text" name="company"><br>
  Address: <input type="text" name="address"><br>
  <input type="submit" value="Submit">
</form>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as a submit button.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <form> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  Company: <input type="text" name="company" /><br />
  Address: <input type="text" name="address" /><br />
  <input type="submit" value="Submit" />
</form>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as a submit button.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <form> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  <div>
    Company: <input type="text" name="company" /><br />
    Address: <input type="text" name="address" /><br />
    <input type="submit" value="Submit" />
  </div>
</form>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as a submit button.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <form> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<form action="" method="get">
  <div>
    Company: <input type="text" name="company" /><br />
    Address: <input type="text" name="address" /><br />
    <input type="submit" value="Submit" />
  </div>
</form>
</body>

</html>

In this XHTML 1.1 Document example, we have used the <form> tag to create an HTML form. This form contains two <input> controls for Company and Address as well as a submit button.

Share on: