<form action="path/to/myFormHandler.php" method="post" id="myForm"> ... </form>
Should be either "get" or "post". The default is "get" but I find it more predictable and explicit to always include the
- encodes form data into the url, and can be bookmarked
- should be used for requests that have no side-effects, such as a search form
- should NOT be used for any kind of sensitive data, such as passwords
- is restricted by the safe url limit of browsers and web servers (generally, a good rule of thumb to be below 2048 characters)
- is restricted to ascii characters to be url-safe
- can be cached due to the lack of server-side effects
- encoded form data into the request body, and cannot be bookmarked
- should be used for forms that create/modify/delete data, such as signup and user profile editing
- should be used (in conjunction with HTTPS) for submitting sensitive data to the server
- supports file uploading and large parameter payloads
id attribute is not strictly required, I find it very useful to include on the base form element for a few reasons.
- Using an ID exposes the form to the
document.forms.myForm. This gives the developer a simple, clear, and efficient way to access any form on the page instead of having to resort to queries such as
- It allows you to deep link to a form, just like any other ID-labelled element.
- HTML5 introduced a new
formattribute on form controls that allows the form to include them even if they're not a descendant of the
<form>element. While support is questionable now, its use in the future may reduce the number of styling hacks needed when creating form markup.
Children of the form
Controls within the form all share a few characteristics. When the form is submitted, controlls within the form send their current values to the server.
Most form controls have an initial value set. If it's a binary input like a checkbox or radio button, the initial value is whether or not it's checked. Text inputs have an initial value specified in the
Initial values come into play when a form is reset, either by the user interacting with a reset button or calling the
These two similar attributes are often a cause of confusion. While they both label the control, they actually serve two different purposes.
id attribute to identify a specific form control. Doing so will allow a
<label> element to target the control with its
for attribute. Another benefit of using an ID is that, similar to
document.forms, a shortcut is provided in the DOM API to select form elements with IDs. We’ll go into more depth later.
id attributes must be non-empty and unique within the page.
name attribute serves a couple of purposes on controls. First, it is the key used when sending data to the server in key-value pairs. For example, searching for "R2D2" in a form where the search input has a name of "search" might end with this:
?search=R2D2. The second use is grouping elements such as radio buttons. Radio buttons with the same name will limit the number of checked buttons to 1 element in the set.
name attributes CAN be duplicated within a form, and therefore, are not a fool-proof way to select an element.
Form controls, such as
<input> elements, have a binary
disabled attribute that has a few side effects. Disabled controls:
- are often greyed out by the browser and user interaction is prohibited
- are NOT sent to the server via form submission
- do not validate via HTML5 form validation
- can be styled with the
:disabledcss selector (IE9+) or the
[disabled]css attribute selector (IE7+).
Controlling the form
Reset will clear the form and reset each control to its initial value.
document.forms, the DOM provides a collection on the form element itself called
elements. Using this collection, we can grab a reference to any form control child with an ID by using
Now that we’ve started from scratch with forms, we can look at more complex patterns within them. To recap what we’ve covered here:
- Forms need
method, and (preferrably)
- Use "get" and "post" correctly and responsibly.
- Form elements have initial values that can be easily reset.
- Disabled elements behave differently than normal controls.
- Make use of
form.elementsto simplify DOM selection and traversal.