HTML <form> tag

Definition and Usage

<form> The tag is used to create HTML forms to receive user input.

<form> Elements can contain one or more of the following form elements:

See also:

HTML Tutorial:HTML Forms and Inputs

HTML DOM Reference Manual:Form Object

CSS Tutorial: Set form styles

Instance

Example 1

HTML form with two input fields and a submit button:

<form action="/action_page.php" method="get">
  <label for="fname">Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Surname:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

Try It Yourself

Example 2

HTML form with checkboxes:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1">I have a bicycle</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2">I have a car</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3">I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

Try It Yourself

Example 3

HTML form with radio buttons:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

Try It Yourself

Attribute

Attribute Value Description
accept-charset Character set Specifies the character encoding to be used when submitting the form.
action URL Specifies where to send the form data when submitting the form.
autocomplete
  • on
  • off
 Specifies whether the form should enable the auto-complete feature.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Specifies how form data should be encoded when submitting form data to the server.
method
  • get
  • post
 Specifies the HTTP method to be used when sending form data.
name Text Specifies the name of the form.
novalidate novalidate Specifies that the form should not be validated when submitting the form.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Specifies the relationship between the link resource and the current document.
target
  • _blank
  • _self
  • _parent
  • _top
 Specifies where to display the response received after submitting the form.

Global attributes

<form> The tag also supports Global attributes in HTML.

Event attributes

<form> The tag also supports Event attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <form> Element:

form {
  display: block;
  margin-top: 0em;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support