The novalidate
form element tells the browser if the form should be validated once it is submitted. It is either true or false. It is assumed that the form should be validated if the novalidate
element is not there.
The method
element in a form tells the browser how to send the form data. The two main values of method
are get
and post
. Get
will send the form data visible at the end of the URL while post
will send the form behind the scenes (not visible to the end user). The post
method is more secure and the best way to send sensitive data.
The action
element tells the browser what will be used to process the form. This generally points to some kind of server side script that will take the form data and process it in some way.
The fieldset
element takes multiple form elements and groups them together. This is helpful when using form fields like radio buttons that you want to group under one question, or to group a form label with it's input. One great attribute of a fieldset
is that you can use the form
attribute to link it to the id of another form on the page, which makes it part of that form. You can also disable a whole fieldset at once using the disabled
attribute.
The legend
element creates a title for the whole fieldset. The fieldset is put into a box and the legend
element creates a title at the top of this box.
The label
element creates a title/label for the form input. It is used to ask the question or to specifiy what input is being requested by the form. The labels also help create accessibility so the form is easier to ready and associate the questions with the input boxes.
To help make the label even more useful, the for
element is used to tie the label to the input it is associated with. The following code will link the label to the input so that when the label text is clicked, the form input is selected:
This shows up as:
The id
element is used for multiple things, but there are 2 main uses. The first is to tie it together with the for
element in the label to link them together. The other is to be used by CSS and JavaScript to reference that specific element by name.
Forms are a great way to get information from the end user. They are used as a means of contact, to get feedback, to get an email address for a mailing list, and to create a shopping/checkout process on an ecommerce site.
The various elements that forms can use help to make the form work with each part of itself to create a good interface for the end user that is easy to navigate and accessible to all.