HTML Select Element

HTML Form Element: Select

Many a times you will want the user to let choose some items. This can be by using the HTML select element.
This element is like a menu. Each select has multiple options. User can choose any option of his choice. An
example of a typical select element is as follows. Example of select

Code Output
<select>
<option>Choice one</option>
<option>Choice two</option>
</select>

The code above creates a select element with two default options. These options can not be changed by the
user. He can choose only the options available. Using select option removes a great burden on validations. In
fact it does not, the input options are anyway validated on the server side. But it does reduce the chances of
error. It also helps determine the necessary validations.

By default the browser allows to select only one option at a time. The user can only change the options but
can not select multiple options. To allow multiple options one should specify the attribute multiple. Just
like the attribute readonly this attribute is also of Boolean in nature. It means though you can specify the
attribute as multiple=true, even if you do not specify “true” and just write multiple, the browser will allow
multiple selections. Refer the example given below for further clarification

Code Output
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

HTML Form Element: Scrollable Select

To create a scrollable HTML select element you should use the attribute size of select. If this attribute
is not specified, the browser will create a drop-down menu. The example of a scrollable selection option menu
is given below

Code Output
<select size=3>
<option>option1</option>
<option> option2</option>
<option> option3</option>
<option> option4</option>
<option> option5</option>
<option> option6</option>
</select>
  • 467 reads