Skip to content
Related Articles

Related Articles

Improve Article

HTML | size Attribute

  • Difficulty Level : Basic
  • Last Updated : 16 Jul, 2021
Geek Week

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

  • <input>
  • <hr>
  • <select>

Attribute Values: It contains a numeric value which specify 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 input element.
Syntax:  

<input size = "value">

Example:  

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: 
 



input

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

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

Example: 
 

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: 
 

select

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

<hr size = "value">

Example: 
 

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: 
 

hr

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :