SQL PHP HTML ASP JavaScript articles and free scripts to download
HTML Web Form

Drop-Down list box

Dropdown listbox is one of the most flexible object in HTML. It is similar to that of radio button i.e, only one item can be selected from a group of items but the only difference is Dropdown menu occupies less space on the for when compared to Radiobutton and people can view one item at a time.

Dropdown listbox can be created like this :
  <select>
  <option> ... </option>
    <option> ... </option>
	  </select>

Attributes of Dropdown Menu:

Attributes of <select>...</select>:
Name: Specifies the name of the object through which it can be referenced.
Size: Used to specify the number of visible items in the list.
Multiple:  If given yes, then multiple choices can be made.

Attributes of <option>...</option>:
value: Used to specify the value to be submitted if the form has been submitted.
selected: Default selection of the item.

Example:

Favourite color: 
<select name="ddl">
<option value='blue'>Blue</option>
<option value='green'>Green</option>
<option value='red'>Red</option>
<option value='yellow'>Yelllow</option>
<option value='' selected>Select a Color </option>
<option value='white'>White</option>
</select>

This will give the output like :

Favourite Color: 

In the code see how we have kept value equal to blank for the tag Select a colour. Now let us try one multiple selection dropdown list box.

Managing width of the select box

If we are changing the elements of the select box dynamically, then the width of the drop down select box will keep changing. It will get stretched or reduce based on the elements of the select box. This will not look nice so to give a fix width we have to use style sheet. By just adding width attribute we can't achieve the result in internet explorer and in other browsers except Netscape. Here is the code to manage the width of a select box.
<select name="ddl" width=300 STYLE="width: 350px">
<option value='blue'>Blue</option>
<option value='green'>Green</option>
<option value='red'>Red</option>
<option value='yellow'>Yelllow</option>
<option value='' selected>Select a Color </option>
<option value='white'>White</option>
</select>
Multiple selection from a dropdown listbox
We can give choice to users to select more than one option by adding the attribute multiple. We can also specify the size to display number of options without expanding the pull down list. Here is the sample of listbox with multiple option.



Here is the code of above.
<select name="ddl" size=4 multiple>
<option value='blue'>Blue</option>
<option value='green'>Green</option>
<option value='red'>Red</option>
<option value='yellow'>Yelllow</option>
<option value='' selected>Select a Color </option>
<option value='white'>White</option>
</select>

Read how multiple selection options of list box are handled using PHP

Selecting one option out of many choices by Radio button

Be the first to post comment on this article :


Google+
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer