HTML - Form element


form is an element that represents a user-submittable form.

When parsed as HTML, a form element's start tag will imply a p element's end tag just before.



First name: <input type="text" name="firstname" value="firstName" >
Last name:  <input type="text" name="lastname" value="lastName">

Pizza Order

The pizza order form (taken from the HTML spec)

<form method="post"
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
<p><label>Buzzer code: <input name="custbuzz" inputmode="numeric"></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset >
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>

Structure / Syntax


By default, when a form is submitted,

enctype, action and method are all html attributes of the form element.

<!--  form control and layout element -->


The browser will navigate away of your current page performing an HTTP request, the server then needs to respond with a redirection or a HTML page.

If you want to stay on the page, you need to handle the submit via javascript. See HTML Form - 1001 ways to submit a Form and handle the corresponding Event


A form element is composed of element known collectively as form controls

The form controls may be arranged in the below hierarchy:

They are typically separated by p element but you may used any layout element such as div or table

Control to Form Association

The form controls are added to the form if 1):


You may also submit tabular data because a form may contain multiple control element with the same name (ie property) resulting in an array of values for this property.

See How to create a HTML form for tabular data (rows)




The document attribute document.forms return an HTMLCollection of the form elements in the Document.

  • Javascript: ie document.forms contains all forms on a page
<form id="Foo"></form>
<form id="Bar"></form>
var length = document.forms.length;
console.log("Number of forms is "+length+" with the id:");
for(var i = 0; i < length; i++) {
   console.log("  * "+document.forms[i].id);

Get data

How to get the data of a form via Javascript ? See this dedicated page: HTML - How to retrieve the data of a form with Javascript


Data Validation (Schema Validation)

See also the HTML5 constraint validation API


Form elements such as <input>, <textarea>, and <select> typically maintain their own state in the attribute value and update it based on user input.


The biggest security problem with forms is the fact that an HTML forms can be submitted to other origins.

Framework / Builder

Documentation / Reference

Powered by ComboStrap