Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <form> Tag

The <form> tag defines an area with input elements.

All input values inside the form are submitted to the server as a group.

By default, forms are invisible.

Example

#

A <form> with two input fields and a button.
The <form> itself is not visible.





<form action="/tutorial/action.html">
  <input type="text" name="firstname" placeholder="First name"><br /><br />
  <input type="text" name="lastname" placeholder="Last name"><br /><br />
  
  <button type="submit">Submit</button>
</form>

Using <form>

The <form> tag creates an interactive form that accepts user input.

A form contains input elements that are submitted as a group to the server.

Forms may contain any number of the following elements:

Forms are invisible. They can be made visible with styling attributes, but this is not adviced.

More Examples

A <form> with labels, input fields, and a submit button.
The <fieldset> and <legend> logically group the fields.

Customer Information  

 

<form action="/tutorial/action.html">
 <fieldset>
    <legend>Customer Information</legend>

     <label for="firstname">First Name:</label> &nbsp;
     <input type="text" id="firstname" name="firstname"> <br /> <br />

     <label for="lastname">Last Name:</label> &nbsp;
     <input type="text" id="lastname" name="lastname"> <br /> <br />
  
     <input type="submit" value="Submit">
  </fieldset>
</form>

Attributes for <form>

A list with <form> tag attributes.

Attribute Value Description
action URL URL or path the submitted form data will be sent to
method get
post
HTTP method to use when sending form data
id   identifier Defines a unique identifier for the form.
data-*   value Defines additional data that can be used by JavaScript.
enctype application/x-www-form-urlencoded,
multipart/form-data,
text/plain
Only for method="post", indicates how the submitted form data should be encoded to the server
target _blank
_self
_parent
_top
framename
Defines where or how to open the submission results page
autocomplete on
off
Presents the user with previously selected values
novalidate novalidate Indicates that the form will not be validated upon submission
accept-charset character_set Character encoding to be used for form submission
rel nofollow
noopener
noreferrer
external
author
help
license
next
bookmark
search
Defines the relationship between the current page and the action URL (the form handler).

For addional global attributes see our global attributes list.

Tip:   Forms are designed to group and submit data values. By default, forms are invisible, but they can be made visible with class and style attributes. The problem is that this adds additional responsibility to the form which is not recommended. If styling is required, wrapping the form in a <div> element solves this easily.


Obsolete Attributes

Do not use the attribute listed below.  It is no longer valid on the form tag in HTML5.

Attribute Description Alternative
accept List of file extensions that are accepted in file picker. accept attribute
on <input type="file">

Did you know?

Did you know?

Forms cannot be nested

  • HTML does not support nested forms.
  • You can try and place a form inside another, but the browser will treat it as a single form (the outer element).
  • Therefore, never place a form inside another.

Form Tags

The <form> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions.

Here is a list of form tags

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Browser support

Here is when <form> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides