HTML - Form element

1 - 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.

3 - Structure / Syntax

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

  • field set [optional] that groups:
  • datalist to defines sets of values that may be used in a input and shown as a list.
  • label [optional] label/named each element
  • an output element [optional] that defines where the results / output will be shown

They are typically separated by p element.

The default method is get and not post

4 - 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>

5 - Management

5.1 - Event

5.2 - 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);
}

5.3 - Get data

5.3.1 - Select element

You can select input element via:

and read the value attribute.

Example with the name attribute.


<form onsubmit="handleSubmit(); return false;">
<input name="user" type="text" value="Nico" />
<input name="age"  type="number" value="10" />
<button type="submit">Get this values !</button>
</form>


handleSubmit = () => {
    let form = document.querySelector("form");
    console.log("User: "+form.elements.user.value);
    console.log("Age: "+form.elements['age'].value);
}

5.3.2 - FormData

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

5.4 - Validation

Data Validation (Schema Validation)

6 - State

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

7 - Security

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

8 - Example


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

9 - DOM Accessors

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

10 - Framework

11 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap