What is the size attribute in HTML?

In this shot, we learn about the size attribute in HTML.

The size attribute specifies the visible width of an input element. It is provided as the number of characters.

The default visible width of an input element is 20 characters.

Syntax

<input size="number">

We can use the above syntax to use the size attribute, where number specifies the width of the input element in characters.

Let’s take a look at an example.

Example

In the following example, we create four input elements of different sizes.

Code

<html>
<head>
</head>
<body>
<div id="content">
<!-- size attribute -->
<p>Input element with size 5</p>
<input type="text" size="5">
<p>Input element with size 10</p>
<input type="text" size="10">
<p>Input element with size 15</p>
<input type="text" size="15">
<p>Input element with default size</p>
<input type="text">
</div>
</body>
</html>

Explanation

Here is a line-by-line explanation of the above code:

  • Line 8: We create an input element with a size of 5 characters.
  • Line 11: We create an input element with a size of 10 characters.
  • Line 14: We create an input element with a size of 15 characters.
  • Line 17: We create an input element with the default size of 20 characters.

Free Resources