HTML - size Attribute

Quiz

HTML size attribute is used to specify the initial width of the input field and the number of visible rows for the selected element.

For an input element, the size attribute specifies the visible width, in characters and for the select elements, the size attribute specifies the number of visible options in a drop-down list.

Syntax

<element size="value">

Applies on

Below-listed elements allow the use of the HTML size attribute.

Element	Description
<input>	HTML <input> tag is used to specify the input field.
<select>	HTML <select> tag is used to create dropdown lists in online forms.

Examples of HTML size attribute

Below examples will illustrate the HTML size attribute, where and how we should use this attribute!

Form input fields with different size

The output window displays the last name field with a larger size than the first name field.

<!DOCTYPE html>
<html>

<head>
    <title>HTML size Attribute in input tag</title>
</head>

<body>
    <h2> HTML size Attribute in input tag</h2>
    <form>
       firstName: <input type="text">
       <br><br> 
       lastName: <input type="text" size="50">
    </form>
</body>

</html>

Dropdown list with more than one visible option

On executing the below code, based on the size attribute, drop-down list shows three options at a time.

<!DOCTYPE html>
<html>

<head>
    <title>HTML size Attribute in select tag</title>
</head>

<body>
    <h2>HTML size Attribute in select tag</h2>
    <p>Select the option of your choice:</p>
    <select size="3">
      <option value="merge"> merge sort </option>
      <option value="bubble"> bubble sort </option>
      <option value="selection"> selection sort </option>
      <option value="quick"> quick sort </option>
      <option value="insertion"> insertion sort </option>
    </select>
</body>

</html>

Supported Browsers

Attribute
size	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page