Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML size Attribute
The size attribute in HTML controls the number of visible options displayed in a <select> element. When the size is set to 1 or omitted, the select element appears as a dropdown list. When size is greater than 1, it displays as a list box showing multiple options simultaneously with a scrollbar if needed.
Syntax
Following is the syntax for the size attribute −
<select size="number"> <option value="value1">Option 1</option> <option value="value2">Option 2</option> </select>
Here, number is a positive integer representing the number of visible options. If the size attribute is not specified, the default value is 1, which creates a dropdown list.
How the Size Attribute Works
The size attribute changes the visual presentation of the select element −
-
size="1" (default) − Creates a dropdown list that shows one option at a time. Users click to expand and see all options.
-
size > 1 − Creates a list box that displays the specified number of options simultaneously. A vertical scrollbar appears if there are more options than the size value.
Basic Example − Dropdown vs List Box
Example
Following example demonstrates the difference between a dropdown (size=1) and a list box (size=3) −
<!DOCTYPE html>
<html>
<head>
<title>Size Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Programming Language</h2>
<h3>Dropdown List (size=1, default)</h3>
<select name="language1">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
<h3>List Box (size=3)</h3>
<select name="language2" size="3">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
</body>
</html>
The output shows two different presentations of the same options −
Dropdown List (size=1, default) [Select Option ?] (click to expand) List Box (size=3) HTML CSS JavaScript (scrollable for remaining options)
Educational Qualification Form Example
Example
Following example creates a candidate profile form with educational qualification sections using the size attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML Size Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Candidate Profile</h1>
<p>Following are the details to be submitted by the candidate:</p>
<h2>Educational Qualification</h2>
<form action="">
<section style="margin-bottom: 20px;">
<h3>Graduation</h3>
<select size="2" name="graduation">
<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>
<option value="bsc">B.SC</option>
</select>
</section>
<section style="margin-bottom: 20px;">
<h3>Postgraduation</h3>
<select size="2" name="postgraduation">
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech">M.TECH</option>
<option value="msc">M.SC</option>
</select>
</section>
<input type="submit" value="Next" style="padding: 8px 16px;">
</form>
</body>
</html>
The output displays list boxes showing 2 visible options each, with scrollbars for additional options −
Candidate Profile Educational Qualification Graduation BCA B.COM (scrollable for B.TECH, B.SC) Postgraduation MCA M.COM (scrollable for M.TECH, M.SC) [Next]
Multiple Selection with Size Attribute
Example
The size attribute works well with the multiple attribute to allow users to select multiple options −
<!DOCTYPE html>
<html>
<head>
<title>Size with Multiple Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Skills</h2>
<p>Hold Ctrl (or Cmd on Mac) to select multiple options:</p>
<select name="skills" size="4" multiple>
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="javascript">JavaScript</option>
<option value="react">React</option>
<option value="nodejs">Node.js</option>
<option value="python">Python</option>
</select>
<br><br>
<button type="submit">Submit Skills</button>
</body>
</html>
The list box shows 4 options simultaneously and allows multiple selections −
Select Your Skills Hold Ctrl (or Cmd on Mac) to select multiple options: HTML5 CSS3 JavaScript React (scrollable for Node.js, Python) [Submit Skills]
Comparison of Size Values
| Size Value | Appearance | User Interaction | Use Case |
|---|---|---|---|
| 1 (default) | Dropdown list | Click to expand and select | Single selection from many options |
| 2-4 | Small list box | Click to select, scroll if needed | Quick selection from few options |
| 5+ | Large list box | Scroll through visible options | Multiple selections or lengthy lists |
Key Points
-
The size attribute only affects the visual presentation, not the functionality of the select element.
-
When size is greater than the number of available options, the list box adjusts to show only the available options without extra empty space.
-
The size attribute works independently of the
multipleattribute but they complement each other well. -
A scrollbar automatically appears when the number of options exceeds the specified size value.
Conclusion
The HTML size attribute controls how many options are visible in a select element. Use size="1" for dropdown lists and size > 1 for list boxes. This attribute improves user experience by showing multiple options simultaneously and is particularly useful when combined with the multiple attribute for multi-selection scenarios.
179 Views
