HTML size Attribute

Last Updated : 29 Aug, 2024

The size attribute in HTML is used to specify the initial width for the input field and the number of visible rows for the select element.
The size attribute can be used with the following elements:

Attribute Values: It contains a numeric value that specifies the number of visible options in the drop-down list. It has a default value which is 4.

<input> size Attribute: This attribute specifies the visible width of the input element.

Syntax:

<input size = "value">

Example: In this example we document demonstrates the size attribute in <input> fields, setting the width of the "Email-id" input to 50 characters, with centered headings and content.

html

<!DOCTYPE html>
<html>

<head>
    <title>HTML size Attribute</title>
    <style>
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>

        <h2>
            HTML size Attribute
        </h2>

        <!-- It is the default size -->
        Name:
        <input type="text">
        <br>
        <br>
        <!-- It's user specified size with value 50 -->
        Email-id:
        <input type="text" size="50">
    </center>
</body>

</html>

Output:

<select> size Attribute: This attribute specifies the number of visible options in a drop-down list.

Syntax:

<select size = "value"> option values...</select>

Example: In this example we demonstrates the size attribute in a <select> element, showing three visible options at once from a list of sorting algorithms, with centered headings and styled text.

html

<!DOCTYPE html>
<html>

<head>
    <title>HTML size Attribute</title>
    <style>
        h1, h2 {
            text-align: center;
        } 
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h2>
        HTML size Attribute
    </h2>

    <p>Sorting Algorithms</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>

Output:

<hr> size Attribute: This attribute specifies the height of the horizontal line.

Syntax:

<hr size = "value">

Example: In this example we demonstrates the size attribute in an <hr> element, setting the height of the horizontal rule to 26 pixels. The content includes centered headings and a green line.

html

<!DOCTYPE html>
<html>

<head>
    <title>HTML size Attribute</title>
    <style>
        h1, h2 {
            text-align: center;
        } 
        hr {
            background: green;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h2>
        HTML size Attribute
    </h2>
    <hr size="26">
</body>

</html>

Output:

Supported Browsers: The browsers supported by size attribute are listed below:

HTML srclang Attribute

Vishal Chaudhary 2

Improve

Article Tags :

HTML size Attribute

Similar Reads

Thank You!

What kind of Experience do you want to share?