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

HTMLWeb DevelopmentFront 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>
raja
Published on 07-Feb-2018 12:38:04
Advertisements