HTML Tutorial





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
HTML Basic
Introduction
How To
HTML Tags
html, head, body
Text Manipulation
IMAGES
Special Effects
Using Tables
Forms
Other Topics
 

ADVANCED HTML
Introduction
Media
Meta Tag
Frame tags
Fieldset
Tooltip
DTD
Image tags
Subscript & Superscript
Bullet styles
Canvas
Other tags
Ask Your Doubts
More about HTML
Feedback
 

Combo Box / Dropdown


Tutorials Html

Topic

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



Explanation

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:




Other Links

web hosting