What is an HTML Form?

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>

Attributes

By default, when a form is submitted,

• the data in the form controls is converted into the structure specified by the enctype,
• and then sent to the destination specified by the action
• using the given method.

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

• method may be:
  • get: the http get method (default)
  • post: the http post method
  • dialog: Close the dialog box in which the form finds itself, if any, and otherwise not submit.
• enctype is a mime value that design the encoding of the key and values of the form:
  • application/x-www-form-urlencoded:Media Type - x-www-form-urlencoded (default)
  • multipart/form-data: HTML - multipart/form-data encoding / mime
  • text/plain: a list of name-value pairs pairs - intended to be human readable, as the format is ambiguous (for example, there is no way to distinguish a literal newline in a value from the newline at the end of the value).
• action is an url
• autocomplete takes the value on (default) or off, see HTML autocomplete

Controls

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

The form controls may be arranged in the below hierarchy:

• field set [optional] that groups:
  • input element for the definition of a scalar value on a single line such as:
    • basic primitive: text, boolean, number, …
    • a little bit more complex: such as file, email, color, date, …
  • textarea for the definition of a text on multiple-line
  • select element that create a list where a single or multiple choice can be made where
    • optgroup groups [optionally] the option
      • option defines the values
• datalist to defines sets of values that may be used in a input and shown as a list.
• label [optional] label/named each element
• a submit button
• a reset button
• an output element [optional] that defines where the results / output will be shown

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 ¹⁾:

• they are inside the form element
• or if the form attribute got the id value of the form

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)

Event

A form may fire two types of event:

• HTML Form - 1001 ways to submit a Form and handle the corresponding Event
• HTML Form - Reset (Element and 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)

• Client Side:
  • See Read form data with formData
  • What is the Native Form Validation ( HTML only)?
• Server Side: The server gets the data and return the result (slow as you need two http call).

See also the HTML5 constraint validation API