HTML5: How to define the number of visible options in a drop-down list?

Last update on February 12 2024 12:52:29 (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 the number of 
visible options in a drop-down 
list</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<form method="post" action="https://www.w3resource.com/html-css-exercise/basic/solution/select-size-answer-demo.php"><!-- Start of form with method and action attributes -->
<select size="2"><!-- Start of dropdown menu with size attribute -->
<option value="lion">Lion</option><!-- First option in the dropdown menu -->
<option value="tiger">Tiger</option><!-- Second option in the dropdown menu -->
<option value="elephant">Elephant</option><!-- Third option in the dropdown menu -->
</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 and a dropdown menu.
The form is set to submit data using the POST method to a specified URL.
The dropdown menu allows users to select one option from the provided choices.
Each option in the dropdown menu represents an animal.
The size attribute is added to the <select> tag, specifying the number of visible options in the dropdown menu.
In this case, the size is set to "2", so only two options will be visible at a time without the need for scrolling.
This attribute provides a way to control the appearance and behavior of the dropdown menu based on the number of options to be displayed.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page