A form is an HTML 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.
<form>
First name: <input type="text" name="firstname" value="firstName" >
Last name: <input type="text" name="lastname" value="lastName">
</form>
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>
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
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
The form controls are added to the form if 1):
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.
A form may fire two types of event:
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
The document attribute document.forms return an HTMLCollection of the form elements in the Document.
<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);
}
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
Data Validation (Schema Validation)
See also the HTML5 constraint validation API
Form elements such as input, textarea, and select typically maintain their own state in the attribute value and update it based on user input.
The biggest security problem with forms is the fact that an HTML forms can be submitted to other origins.