HTML Dropdown

HTML Dropdown form element allows the user to select one or more options from multiple options presented as a dropdown list. It is presented as a textbox and a clickable down button. When a user clicks in this small down button, a list of options appears below the textbox. Depending upon the type of HTML Dropdown user can choose one or more than one options. 

The example of data that can be entered in an HTML Dropdown are list of cities, list of bands, list of songs etc .

Syntax – HTML Dropdown

A Dropdown in an HTML form is created by using <SELECT></SELECT> tag. It requires all the options of the drop down to be added using <OPTION></OPTION> tag. Both <SELECT> and <OPTION> are a paired tags.

<SELECT [tag attributes]>
<OPTION VALUE=”value of option”>option as seen by user</OPTION>
</SELECT>

Attributes- HTML Dropdown

HTML Dropdown control created with <SELECT> tag uses the following attributes.

ID

This attribute is used to give identification to the Dropdown in a web form. The ID must be an alphanumeric string. The ID value for each field of web form must be unique. This ID is used in a script to manipulate the data entered by a user in the Dropdown.

NAME

The NAME attribute is used to give name to a Dropdown.  The name attribute is used to access its values by the associated php or asp script file.

SIZE

Size attribute is used to define how many options will be visible to the user. The number of actual options in the dropdown may be more than the number of options visible to user.

MULTIPLE

If this attribute is given in the SELECT tag it allows the user to select more than one option in the dropdown. User has to press CTRL + click or SHIFT+ down-arrow to select more than one option.

Attributes of <OPTION> tag

VALUE

The VALUE attribute represents the value of a specific option given in the dropdown. It is in the OPTION tag of a specific item. When the data is sent to a script this value is used in the key-value pair. Key is the name of the dropdown and value is the VALUE of selected item(s). It can be numeric or text.

SELECTED

If you want an option to be selected by default in the dropdown you must include SELECTED attribute in that specific option.

Example of HTML Dropdown

<H2>Choose your Options</H2>
<HR>

  <H2> Type of Clothing</H2>
  <SELECT>
  <OPTION VALUE="TS">T Shirt</OPTION>
  <OPTION VALUE="SH">Shirt</OPTION>
  <OPTION VALUE="TR">Trousers</OPTION>
  <OPTION VALUE="TP">Track Pants</OPTION>
  <OPTION VALUE="SR">Shorts</OPTION>
  </SELECT>

  <H2> Accessories</H2>
  <SELECT Size="3">
  <OPTION>Belts</OPTION>
  <OPTION>Wallets</OPTION>
  <OPTION>Hankerchiefs</OPTION>
  <OPTION>Cuff Links</OPTION>
  <OPTION>Ties</OPTION>
  </SELECT>

<H2> Care</H2>
  <SELECT Size="4" MULTIPLE>
  <OPTION>Shampoo</OPTION>
  <OPTION>Scrub</OPTION>
  <OPTION SELECTED>Lotion</OPTION>
  <OPTION>Hair Gel</OPTION>
  <OPTION>Perfume</OPTION>
  </SELECT>
HTML Dropdown example