DEV Community

Charity Parks
Charity Parks

Posted on

HTML dropdown boxes explained

Inside of a form that you are collecting user data, you may find the need to use a dropdown box. This is where you want the user to only be able to select one of the options that are provided.

Dropdown boxes in HTML are created inside a <form> with a <select> element. The <select> element is what creates the dropdown list box. <select> has attributes such as 'name'. Without the name attribute nothing would show up inside the dropdown list. Inside of the 'select' element use the <option> element. Its used to give the user the choices (options) to choose from in the dropdown box. Use 'value' element is used inside the 'select' element and it indicates what is being sent to the server along with the 'name'.

Example:

<form action="http://www.123example.com/profile.php">
<p>Which state is your favorite?</p>
<select name="states">
<option value="california">California</option>
<option value="maine">Maine</option>
<option value="texas">Texas</option>
<option value="florida">Florida</option>
</select>
</form>

Happy Coding!

Top comments (0)