The HTML size attribute is used to control the visible width (in characters) of an <input> field and the number of visible options in a <select> drop-down list.
Definition and Usage
➔ The input type, size attribute specifies the visible width of the field based on the number of characters that can be displayed at once.
➔ For the select element, the size attribute determines the number of options visible to the user at once.
➔ It is generally recommended to use CSS properties (width, height, font-size, etc.) to style the dimensions of elements.
Syntax
//In HTML
<input type="text" name="name" id="name" size="25">
<input type="text" name="code" id="code" size="4">
<select size="3" id="sample">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="berry">Berry</option>
</select>
//In Javascript
let element = document.getElementById("sample");
element.size = 30;
//Or
eement.setAttribute("size", "30");
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML size attribute example</title>
</head>
<body>
<h3>HTML size attribute example</h3>
<p>The size attribute is used to set the number of visible options in a drop-down list</p>
Name:<input type="text" name="name" id="name" size="25"><br><br>
Code:<input type="text" name="code" id="code" size="4"><br><br>
<label for="sample">Choose a fruit:</label><br>
<select size="3" id="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="berry">Berry</option>
</select>
</body>
</html>
Click on the "Try it Now" button to see how it works.