HTML - Form element

About

The form element 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.

Structure / Syntax

A form element is composed of element known collectively as form controls that may be arranged in the below hierarchy:

They are typically separated by p element.

The default method is get and not post

Example

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>

Management

Event

List

  • Javascript: document.forms contains all forms on a page
<form id="Nico"></form>
<form id="Nicolas"></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

Event

From the event, you can get the following value

  • event.submitter.value - the submitter value (ie the submit button)
  • event.target.elements - holds the elements and their values
  • event.target - the form element

You can:

Example with the name attribute.

<form onsubmit="handleSubmit(event); return false;">
<input name="user" type="text" value="Nico" />
<input id="ageid" name="age"  type="number" value="10" />
<button type="submit">Get this values !</button>
</form>
handleSubmit = (event) => {
    let form = event.target;
    console.log("User: "+form.elements.user.value);
    console.log("Age element index via name: "+form.elements['age'].value);
    console.log("Age direct notation via name: "+form.age.value);
    console.log("Age direct notation via id: "+form.ageid.value);
}

FormData

A FormData object is a javascript runtime object of the data of a forms.

It provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method.

Validation

Data Validation (Schema Validation)

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.

Example

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

DOM Accessors

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

Framework / Builder

Documentation / Reference


Powered by ComboStrap