HTML5: How to define a drop-down list?

Last update on February 12 2024 12:51:58 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to define a drop-down 
list</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<form name="example" action="html-select-option-optgroup-example.html" ><!-- Start of form with name and action attributes -->
Select one or more sections: <!-- Prompt for user selection -->
<select name="languages" multiple><!-- Start of dropdown menu with name and multiple attributes -->
<optgroup label="Server_side"><!-- Grouping of options with a label -->
<option>PHP</option><!-- First option under Server_side group -->
<option>ASP</option><!-- Second option under Server_side group -->
<option>Ruby on Rails </option><!-- Third option under Server_side group -->
</optgroup><!-- End of Server_side group -->
<optgroup label="Client_side"><!-- Another grouping of options with a label -->
<option>JavaScript</option><!-- First option under Client_side group -->
<option>VB Script </option><!-- Second option under Client_side group -->
</optgroup><!-- End of Client_side group -->
</select><!-- End of dropdown menu -->
</form><!-- End of form -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a form containing a dropdown menu.
The form allows users to select one or more sections.
The dropdown menu has two groups: "Server_side" and "Client_side".
Each group contains multiple options.
The options are related to programming languages commonly used on server-side (like PHP, ASP, Ruby on Rails) and client-side (like JavaScript, VB Script).

Live Demo:

See the Pen select-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page