by Dinesh Thakur Category: HTML

A pull down menu lets the user select one choice out of many possible choices. One nice aspect of pull-down menus is that all choices do not have to be seen on the screen and are normally hidden. They occupy minimal amount of space as it displays only on item of the list. In this kind of input field you use <SELECT>instead of <INPUT> and it has a closing tag.

Syntax:

<SELECT name = "text-id" size="n" multiple >
<OPTION Value = "Choice-id" selected> Text Label -1 </OPTION>
...................
...................
<OPTION Value = "Choice id m" selected> TEXT LABEL. - m </OPTION>
</SELECT>

Name: To establish a name for the select field and is used for form processing.

Size: The number of options you want to show in the window. By default its value is one, specifying size value greater than one turns the pull down list into a scrolling list. In the SELECT field, by default, the user can select only one field.

Multiple: To set the SELECT field to accept any number of options. To select multiple options press ctrl key and click on the options.

<OPTION> Tag: To include the list items. For each list item there must be an <option> tag "The closing" tag is optional.

Value: Whenever a form is submitted, the options in the pull down list are passed to the form handles using the "Value" attribute. If the "Value" attribute is omitted the contents of the option are used instead.

Selected: This attribute is used to specify the default other than the first option. More than the first option- More than one option can be made default by using this attribute but in that case you just include the multiple attribute, otherwise the last option having selected attribute will be considered as default. The defaults will appear when the form is loaded or reset. The following lines of code will add a pull down list to our sample form.

<html>

<head><title> text fields</title></head>
<body bgcolor="pink">
<p align ="center"><b>admission form</b>
<form>
<p>
<input type ="text" name="name" value="enter your name:" size="25" maxlength="30"> name<br><br>
<input type ="password" name="passwd" size="25" maxlength="30"><br><br>
<input type ="text" name="address" size="25" maxlength="30"> address<br><br>
<input type="radio" name="sex" value="male" checked>male<br>
<input type="radio" name="sex" value="female" >female<br>
<select name ="country">
<option value = "india">india
<option value = "america"> america
<option value = "australia"> australia
<option value = "new zealand"> new zealand
<option value = "china"> china
</select><b>country</b>
</form>
</body>
</html>

But if the "multiple" attribute is included, the list will become a scrolling list. This attribute is added in the <SELECT> tag as shown below:

<SELECT NAME="COUNTRY" MULTIPLE>


  <OPTION VALUE="INDIA">INDIA
  <OPTION VALUE=" AMERICA" SELECTED>AMERICA
  <OPTION VALUE="AUSTRALIA">AUSTRALIA
  <OPTION VALUE="NEW ZEALAND">NEW ZEALAND
  <OPTION VALUE="CHINA">CHINA
</SELECT><B>COUNTRY</B>


About Dinesh Thakur

Dinesh ThakurDinesh Thakur holds an B.SC (Computer Science), MCSE, MCDBA, CCNA, CCNP, A+, SCJP certifications. Dinesh authors the hugely popular blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps. For any type of query or something that you think is missing, please feel free to Contact us.