How To Create Drop Down Menu In HTML

Here is a tutorial of how to create drop down menu in HTML (HyperText Markup Language). To create drop down menu you have to use two HTML tags that are <select> tag and <option> tag.

HTML Drop Down Menu

<select> tag is parent tag of <option> tag. Options can be specified using <option> tag. This drop down menu is used in city, country, etc list.

Read How To Create Textarea In HTML
Read How To Create Button In HTML
Read How To Create Radio Button In HTML
Read How To Create Checkbox In HTML
Read How To Create Table In HTML
Read How To Create Text and Password Fields In HTML

Let's first understand <select> tag then <option> tag.

<select> tag

<select> tag is parent tag for <option> tag. To create drop down menu, you have to first write <select> tag.

<select> tag has following useful attributes:

• multiple
• name
• disabled

multiple attribute:

Multiple attribute is used to make drop down menu as multiple items can be selected.

For example

<form>
 <select multiple="multiple">
  <option>United States</option>
  <option>United Kingdom</option>
  <option>India</option>
    </select>
</form>

name attribute:

This attribute is available in all HTML elements and it is just name of drop down menu.

For example

<form>
 <select name="country">
  <option>United States</option>
  <option>United Kingdom</option>
  <option>India</option>
    </select>
</form>

disabled attribute:

Disabled attribute is used to make drop down disabled. We can not interact with disabled drop down menu.

For example

<form>
 <select disabled="disabled">
  <option>United States</option>
  <option>United Kingdom</option>
  <option>India</option>
    </select>
</form>

<option> tag

<option> tag is used to create options for drop down menu.

<option> tag contains two important attributes listed below:

• selected
• value

selected attribute:

This attribute is used to select particular item/option from drop down menu.

For example

<form>
 <select>
  <option>United States</option>
  <option selected="selected" >United Kingdom</option>
  <option>India</option>
    </select>
</form>

value attribute:

Value attribute is important for drop down menu. This value is passed to actioned page when form is submitted.

For example

<form>
 <select>
  <option value="US" >United States</option>
  <option value="UK" >United Kingdom</option>
  <option value="IN" >India</option>
    </select>
</form>

HTML Drop Down Menu Example:

<form>
 <select name="country">
  <option value="US">United States</option>
  <option selected="selected" value="UK">United Kingdom</option>
  <option value="IN">India</option>
 </select>
</form>

OUTPUT:

United States United Kingdom India