Form validation refers to ensuring form input information is in the correct format when it is submitted (phone number input must be only numbers, email input must end in a valid email domain, required fields cannot be left blank, etc.). By default, a web browser automatically validates form data. novalidate is a Boolean attribute which indicates that a form should not be validated when submitted, which overrides the browser's validation and allows custom error messages and styling to be used instead.
The method attribute determines the HTTP method for how the form submits data. There are three methods that can be used, the default being get, which appends the form data to the URL. The post method sends the form data in the body of the HTTP request, making it the more secure option for submitting sensitive information like credit card numbers or passwords. The dialog method can be used when form information is inside a dialog element; upon submitting, the dialog box will close and the form control states are saved but not submitted.
The action attribute provides the relative or absolute URL to send the form data for processing. If the attribute is not provided, the form data will instead be sent to the current page the form resides on. If the form method is set to dialog, the action attribute is ignored.
The fieldset element can be used to group several form controls and labels within their own box, which can be styled with CSS to put emphasis on the grouped content.
The legend element is applied as a child of fieldset and displays a caption for the specified fieldset. An example of a fieldset with a legend is displayed below.
The label element displays a caption for a user interface item. When applied to a form control, it associates the label text with its text input, which allows accessibility devices like screen readers to read out the label text for the given form control it is associated with. It also allows the label text itself to act as an extension of the form controls. If a label is applied to a text entry box, clicking the label text will place the text cursor inside the box. If it is applied to a checkbox or radio, it selects the associated form control. For example, here is the fieldset from above with the label elements removed and replaced with plain text.
While the text for each form control still displays, it is not connected to the actual form controls. Clicking the text of each option does not select the corresponding radio button, and the hover styling no longer has any effect. A screen reader will also not associate this text with the form controls. It is best practice to always use the label element on form controls for these reasons.
To associate a label with a form input element, you must use the for and id attributes. The specific input element should be given an id to specify which input option is being displayed (name, address, phone, email, etc., or in the case of the fieldset above, the specific options vanilla, chocolate, and strawberry), and the for attribute must match this id for each input. The first element containing an id which matches the for attribute is called the labeled control if the element can be given a label (if it is not a labelable element, the for attribute has no effect). Any given label can only be associated with one form control, as each id must be unique.
The above elements and attributes are important pieces of properly formatting a form to not only be in compliance with A11Y standards, but also for functionality. novalidate is a helpful attribute if a form is meant to save a user's progress before submission, method and action are required for forms to work properly, and fieldset and legend are helpful to categorize and group form elements together. Using label is also a necessity for A11Y purposes, as neglecting to include proper labels can open web developers up to potential legal action for discrimination.