HTML - Form element

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="..."
>
<!--  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 HTML - How to create a form for tabular data (rows)

Management

Event

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


Powered by ComboStrap