HTML Select Size Attribute

The size attribute of the <select> element is used to set the number of visible list items from a drop-down list. A scrollbar would get added if the size is set more than 1.

Following is the syntax−

<select size="num">

Above, num is the count of the visible list items in the drop-down list.

Let us now see an example to implement the size attribute of the <select> element−

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h1>Candidate Profile</h1>
<p>Following are the details to be submitted by the candidate:</p>
<h2>Educational Qualification</h2>
<form action="">
<section>
<h3>Graduation</h3>
<select size = "2">
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
   <option value="btech">B.SC</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select size="2">
   <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><br>
<input type="submit" value="Next">
</form>
</body>
</html>

Output

In the above example, we have set two drop-down lists−

<section>
<h3>Graduation</h3>
<select size = "2">
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
   <option value="btech">B.SC</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select size="2">
   <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>

We have set two drop-down lists above with the size attribute that allows to set the number of visible list items−

<select size="2">
Updated on: 2019-07-30T22:30:26+05:30

89 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements