<select name="cars">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Fiat</option>
<option value="4">Audi</option>
</select>
In this example, if the user selects Saab as their option and submits the form using the submit button, the form action will be passed the value of 2 for the ‘cars’ variable.
Forms can easily get messy and confusing, so it’s important that we maintain a high level of usability throughout when we are building them. Fortunately we can make use of two very important elements to help with this. They are the <fieldset> element, and the <legend> element.
Let’s see how they work.
As you probably guessed, a <fieldset> element is what we will use to group together a group of fields of related data into a set. For example, we might have a fieldset for all of the address fields of a contact form, or we might have one for personal information in a sign-up form. Fieldsets can drastically help to improve the user experience of your form. The syntax is nice and simple too. As you’ve also probably guessed by now, you simply wrap your <fieldset> tags around your related fields and that’s it. See below for an example: