Welcome Guest! (App Version 3.1)

websitnero logo name

HTML Select

Making Dropdowns in HTML Forms using Select

Select Box provides a dropdown list of options from which a user can select an option. Select box serves the same purpose as radio buttons with the only difference is that in Radio Buttons you can see all options directly on screen while in case of Select Box you will need to open the dropdown to make the selection.

<select>
    <option value="someValue1">//option1</option>
    <option value="someValue2">//option2</option>
    <option value="someValue3">//option3</option>
</select>

<select name="someName">
    <option value="rose">Rose</option>
    <option value="lily">Lily</option>
    <option value="marigold">Marigold</option>
</select>

Example

<form>
  <select name="flower">
    <option value="rose">Rose</option>
    <option value="lily">Lily</option>
    <option value="lotus">Lotus</option>
  </select>
</form>

HTML Dropdown with Multiple Selection of items

Select box allows us to make multiple selection of the options provided in it. For it just add the multiple property in the select box.

<select name="someName" multiple>
    <option value="someValue1">//option1</option>
    <option value="someValue2">//option2</option>
    <option value="someValue3">//option3</option>
</select>

<select name="flowers" multiple>
    <option value="rose">Rose</option>
    <option value="lily">Lily</option>
    <option value="marigold">Marigold</option>
</select>

Example

<form>
  <select name="flowers" multiple>
    <option value="rose">Rose</option>
    <option value="lily">Lily</option>
    <option value="marigold">Marigold</option>
  </select>
</form>
Further Reading

1. <select>

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.