Form Elements

Form Element Attribute - novalidate, method, action

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.

Form Elements - fieldset and legend

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.

Form Element - label and how to use attributes: for and id

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:

<label for="birthday">What is your birthday?</label>
<input type="text" name="birthday" id="birthday">

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.

Summary

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.

References: