Drop-down menus

Drop-down menus make your forms more efficient, accessible, and organized.

You can use the <select> container tag to create a drop-down list.

The <option> container tag is used inside a <select> tag to add choices for the user.

You can use the <select> element as part of a form to collect user input.

Submitting a form sends information to a database. The name attribute is needed to submit the form data.

form>
<select name="color">
<option>Red</option>
<option>Blue</option>
</select>
</form>

Data will be sent when the form is submitted. You can control the data each option sends with the value attribute.

<select id="dropdown">
 <option value="r">Red</option>
 <option value="g">Green</option>
 <option value="b">Blue</option>
</select>

The selected attribute creates a drop-down menu with a pre-selected option. The pre-selected option will be displayed first.

<select name="color">
 <option value="r">
         Red</option>
 <option value="g">
         Green</option>
 <option value="b" selected>
         Blue</option>
</select>

You can add labels to drop-down menus.

<form>

<label>

Vehicle type:

</label>

<select name="vehicle">

<option value="car">Car</option>

<option value="bus">Bus</option>

</select>

</form>

Labels and drop-down menus are connected with for and id attributes, just like any other form element.

<form>
 <label for="s1">
      Vehicle type:</label>
  <select name="vehicle" id="s1">
   <option value="car">
      Car</option>
   <option value="bus">
      Bus</option>
  </select>
</form>

<input type="text">:

text box

<input type="checkbox">:

checkbox

<input type="radio">:

radio button

<input type="submit">:

submit button

There are many other types of input elements that you can use in your forms.

<input type="email">
<input type="password">
<input type="tel">