The size
attribute in the HTML <select> element controls how many options are
visible in the dropdown without scrolling. It helps to improve user experience
by showing more options at once, which can be useful when users need to see
more choices without scrolling or opening a dropdown.
How to Use the size Attribute?
The size attribute takes a numeric value that defines how many options should be visible at the same time.
control-options-using-size.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Select Size Attribute Example</title> </head> <body> <form action="https://httpbin.org/post" method="POST"> <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="3" style="width: 100px;"> <option value="volvo">Volvo</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> <option value="mercedes">Mercedes</option> </select><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Above snippet generate below screen.
The size="3" attribute means that 3 options will be visible at once. Users can scroll to see the rest if more options exist. Without the size attribute, the dropdown typically shows only one option at a time, requiring the user to click to see the rest like below.
No comments:
Post a Comment