9.8 Select with Size

A selection form can be displayed in another way using another useful form attribute: size. This selects how many options will be displayed before needing the visitor to scroll. Again the selected attribute has been used to tell the browser which choice to select by default. For example:

<form>
Car Manufacturers
<select multiple name="cars" size="4">
<option value="Audi"selected>Audi</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Hyundi">Hyundi</option>
<option value="Jeep">Jeep</option>
<option value="Peugot">Peugot</option>
<option value="Renault">Renault</option>
<option value="Subaru">Subaru</option>
<option value="Vauxhall">Vauxhall</option>
</select>
</form>

This would look like this in a browser:

Car Manufacturers

And had size been been set to six for example:

<form>
Car Manufacturers
<select multiple name="cars" size="6">
<option value="Audi"selected>Audi</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Hyundi">Hyundi</option>
<option value="Jeep">Jeep</option>
<option value="Peugot">Peugot</option>
<option value="Renault">Renault</option>
<option value="Subaru">Subaru</option>
<option value="Vauxhall">Vauxhall</option>
</select>
</form>

This would look like this in a browser:

Car Manufacturers

In this tutorial you may have noticed that all the forms have been presented using theri defaul browser settings. These can be overwritten using CSS to provide some more interesting forms.