What is an HTML Form?

About

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.

Example

Basic

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

Pizza Order

The pizza order form (taken from the HTML spec)

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <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>
 </fieldset>
 <fieldset>
  <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>
 </fieldset>
 <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>
</form>

Structure / Syntax

Attributes

By default, when a form is submitted,

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

<form 
    method="..."
    enctype="..."
    action="..."
    autocomplete="on|off"
>
<!--  form control and layout element -->
</form>

where

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

Controls

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):

Tabular

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)

Management

Event

A form may fire two types of event:

Autocomplete

An example with the autocompletion of an email

Why ? because the attribute autocomplete of the email input field is set to email.

To see it in action, you should click on it to see a list of possible values that the browser can autofill.

<forms>
    <label for="inputEmail">Enter your email</label>
    <input autocomplete="email"  type="email" id="inputEmail" placeholder="Enter your email">
    <button type="submit">Subscribe</button>
</forms>

For more information on autocomplete, see the dedicated page: autocomplete

List

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

Validation

Data Validation (Schema Validation)

See also the HTML5 constraint validation API

State

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

Security

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

Framework / Builder

Documentation / Reference





Discover More
Browser
Browser - Fetching Resources (Request/Response)

This article is fetching (http request/response) in the browser. User agents can implement a variety of transfer protocols to fetch resources such as: HTTP : , ... Form FTP ... rendering...
CSS - Block Level (element|box)

Block-level refers to the (HTML) elements that are formatted visually as blocks. See for more information: Except for table boxes, and replaced elements, a block-level box can also be a block container...
Grid Form With Horizontal Vertical Alignment
CSS - Grid

grid is a CSS layout system that provides a mechanism: to divide the available space into columns and rows (two-dimensional grid) to position into one or more intersections an html element (known...
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - AutoComplete

autocompletion in HTML will be find: in the HTML autocomplete attribute implemented in the datalist element or via a implementation/library The autocomplete attribute permits to fill forms with...
HTML - Dialog

A dialog in HTML represents a part of an application that a user interacts with to perform a task For example: a dialog box, inspector, or window. The HTML with a form and two submit button....
HTML - Escape / Sanitizer

HTML A sanitizer is a program that will: not accept all HTML elements and or transform them as text (escape) This is to avoid script injection and should be used on the server side (ie not client)...
HTML - FieldSet element

fieldSet is an HTML element that groups element in a form A fieldset: may have a legend can also be nested ( fieldset inside fieldset) ...
HTML - Form Validation

This page is form validation in HTML. The javascript counterpart is called the constraint validation API . In short, you set standard HTML attributes that constrain the possible value of form elements....



Share this page:
Follow us:
Task Runner