HTML <input> size Attribute

HTML <input> size Attribute specifies the visible width of an <input> element, typically for text input fields. It determines the width in terms of characters displayed, providing visual control over input size.

Syntax:

<input size="number"> 

Attribute values: It contains the numeric value which specifies the width of an input field in terms of the number of characters. Its default value is 20.

HTML <input> size Attribute Examples

Example: Here is the basic implementation of HTML <input> size Attribute.

HTML
<!DOCTYPE html>
<html>

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

<body>
    <input type="text" 
           value="This is the default size.">
    <br>
    <br>
    <input type="text" 
           size="50" 
           value="This is user specified size with value equals 50">
</body>

</html>

Output:

HTML input size attribute example

Explanation:

  • In the above example The first <input> element lacks a size attribute, so it displays with the default width for text input fields.
  • The second <input> element has size=”50″, making it wider, accommodating up to 50 characters within the visible area.
  • Demonstrates how the size attribute affects the width of input fields, allowing users to input text comfortably based on the specified size.

HTML <input> size Attribute Use Cases

The size attribute in <input type=”text”> tags specifies the visible width of the input field in terms of characters, allowing control over its size for user input.

In HTML5, specify the width of an input element using the size attribute within <input> tags, defining the visible width in characters for text input fields.

The size attribute in <select> tags determines the number of visible options displayed at once, affecting the dropdown list’s height and visibility of options without scrolling.

HTML <input> size Attribute Supported Browsers

The browser supported by HTML input size Attribute are listed below:


Contact Us