Saturday, January 4, 2014

Forms>>Combo Box / Dropdown - (PART_34)

Topic:
How to create a drop down box?
How to make a value selected in combobox?
How to create a multiple option select box?

Combo box / Dropdown box

Example Code:
<form name=myform>
<select name=mytextarea>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
</select>
</form>


Result:

Definition:
Here we define the drop down box using "select" and "option" tags. The select box is defined using the tag "select". The number of options in the combobox is defined by using the "option" tag. As shown in the example we have given users three option to select from. The name to be shown for the option is given inbetween "option" tags.
 

Scrollable Select Option
The size of the select option can be defined using the attribute "size" inside "select" tag.
 

Example Code:
<form name=myform>
<select name=mytextarea
 size=2>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
<option name=four value=four> four </option>
</select>
</form>
 

Result:


Multi Select Option
We can give the option for users to select multiple options using the entity "multiple". So user can select multiple options by using "shift" or "Ctrl" keys.
 

Example Code:
<form name=myform>
<select name=mytextarea size=3
 multiple>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
<option name=four value=four> four </option>
</select>
</form>
 

Result:


Preselected Select Option
The options can be preselected using the entity "selected".

Example Code:
<form name=myform >
<select name=mytextarea size=2>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three
 selected> three </option>
<option name=four value=four> four </option>
</select>
</form>
 

Result: