Web Development: HTML Element: form

HTML Element: form

The <form> element is a really important part of HTML. It plays home to a collection of other elements (like inputs, text areas, checkboxes etc.) and these controls allow users to submit information. That information can be sent to a server for processing, or used in all kinds of other ways.

Example

Syntax

1	<form action="https://google.com/search" method="get">
2	<input type="search" name="q" placeholder="Search...">
3	<input type="submit" value="Search Google...">
4	</form>

Result

Browser Support

The HTML <form> tag is supported in all modern browsers. Read more on caniuse.com.

Attributes

The <form> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

The <form> element also supports the following attributes:

action: URL to use for form submission
method: HTTP method to use for form submission ("GET"; "POST")
enctype: Form data set ecoding type to use for form submission ("application/x-www-form-urlencoded"; "multipart/form-data"; "text/plain")
name: Name of form to use in the document.forms API
accept-charset: Character encodings to use for form submission
novalidate: Bypass form control validation for form submission
target: Browsing context for form submission.
autocomplete: Default setting for autofill feature for controls in the form

Which Method?

The GET and POST methods are used to transfer data. We can use both methods to send form data, though GET is used to request data whereas POST is used as a way of sending data to a web server. The clearest difference between the two is that GET appends the request parameter to the URL, like this:

screenshot of website URL with form data appended

Content

Within a <form>, flow content and palpable content are supported.

A <form> element cannot be nested within another <form> element!

Here’s a typical form structure with examples of element hierarchy. You’ll notice the <ul> and <li> elements being used to contain the radio buttons. <p> and <div> elements are commonly used to wrap other form controls, and <section> is perfectly fine for containing related groups of form inputs.

<form>
    <fieldset>
        <legend>Preferred use of ketchup</legend>
        <ul>
            <li>
                <input type="radio" name="ketchup" id="ketchup_1" value="burger" />
                <label for="ketchup_1">Burger</label>
            </li>
            <li>
                <input type="radio" name="ketchup" id="ketchup_4" value="fries" />
                <label for="ketchup_2">Fries</label>
            </li>
            <li>
                <input type="radio" name="ketchup" id="ketchup_3" value="cheese sandwich" />
                <label for="ketchup_3">Cheese sandwich</label>
            </li>
        </ul>
    </fieldset>
    <p>
        <input type="submit" value="Submit answer" />
    </p>
</form>

<fieldset> and <legend> should only be used to group multiple form controls, as a higher-level label.

Accessibility Considerations

Control labeling: Label all form controls appropriately. There are two ways to associate labels with form controls:
1. by giving the control an id, and referencing that id in the for attribute on the label.
2. by wrapping the form control in the label.

Autocomplete: On inputs use the autocomplete="" attribute for common data types (like name, address, birthdate etc.) Many browsers will suggest the user’s own details for even faster form entry.
Tabbing: To dictate the tab order of interactive elements (like inputs) you can use the tabindex attribute. tabindex="0", for example, would be the first element to get focus when hitting the Tab key on the keyboard.

Fun fact: the maximum value for tabindex is 32767

Learn More

Official W3C specification <form>

Web Development

Friday, March 3, 2023