How do we use a simple drop-down list of items in HTML forms?

HTML Web Development Front End Technology

With HTML, you can create a simple drop-down list of items to get user input in HTML forms. A select box also called drop-down box provides an option to list down various options in the form of drop-down list, from where a user can select one or more options. The <select> tag is used to create a drop-down list in HTML, with the <option> tag.

Here’s the list of attributes of <select> tag:

Sr.No	Attribute & Description
1	Name Used to give a name to the control which is sent to the server to be recognized and get the value.
2	Size This can be used to present a scrolling list box.
3	Multiple If set to "multiple" then allows a user to select multiple items from the menu.

Here’s the list of attributes of <option> tag:

Sr.No	Attribute & Description
1	Value The value that will be used if an option in the select box is selected.
2	Selected Specifies that this option should be the initially selected value when the page loads.
3	Label An alternative way of labeling options.

Example

You can try to run the following to create a simple drop-down list of items to get user input in HTML forms:

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Select Box Control</title>
   </head>
   <body>
      <p>Here's the list of subjects. Select any one:</p>
      <form>
         <select name = "dropdown">
            <option value = "Computer Architecture" selected>Computer Architecture</option>
            <option value = "Java">Java</option>
            <option value = "Discrete Mathematics">Discrete Mathematics</option>
         </select>
      </form>
   </body>
</html>

seetha

Updated on: 12-May-2020

11K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started