Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input URL size Property
The Input URL size property in HTML DOM controls the visible width of a URL input field. It specifies how many characters the input field displays at once. If not defined, this property returns the default value of 20.
Syntax
Following is the syntax for returning the size attribute −
inputURLObject.size
Following is the syntax for setting the size property to a number −
inputURLObject.size = number
Parameters
The size property accepts a numeric value representing the number of characters visible in the input field. The value should be a positive integer. If no size is specified, the browser uses a default value of 20.
Return Value
The size property returns a number representing the current visible width of the URL input field in characters.
Example − Getting and Setting Size Property
Following example demonstrates how to get and modify the size property of a URL input field −
<!DOCTYPE html>
<html>
<head>
<title>Input URL size Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
input {
margin: 5px;
padding: 5px;
}
button {
border-radius: 5px;
padding: 8px 16px;
margin: 5px;
}
#display {
margin: 15px 0;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>URL Input Size Control</legend>
<label for="urlInput">Enter URL: </label>
<input type="url" id="urlInput" size="10" placeholder="https://example.com">
<br><br>
<button type="button" onclick="increaseSize()">Increase Size (30)</button>
<button type="button" onclick="decreaseSize()">Decrease Size (5)</button>
<button type="button" onclick="showSize()">Show Current Size</button>
<div id="display"></div>
</fieldset>
</form>
<script>
var urlInput = document.getElementById("urlInput");
var display = document.getElementById("display");
function increaseSize() {
urlInput.size = 30;
display.textContent = "Size increased to " + urlInput.size + " characters";
}
function decreaseSize() {
urlInput.size = 5;
display.textContent = "Size decreased to " + urlInput.size + " characters";
}
function showSize() {
display.textContent = "Current size: " + urlInput.size + " characters";
}
</script>
</body>
</html>
The output shows the URL input field with different sizes based on user interaction −
Initial state: Small URL input (10 characters wide) After "Increase Size": Larger URL input (30 characters wide) After "Decrease Size": Very small URL input (5 characters wide) Display shows: "Size increased to 30 characters"
Example − Dynamic Size Adjustment
Following example shows how to dynamically adjust the size based on input length −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic URL Size Adjustment</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic URL Input Size</h2>
<p>The input field grows as you type:</p>
<label for="dynamicUrl">URL: </label>
<input type="url" id="dynamicUrl" size="20" oninput="adjustSize()" placeholder="Start typing...">
<br><br>
<div id="info">Current size: 20 characters</div>
<script>
function adjustSize() {
var input = document.getElementById("dynamicUrl");
var info = document.getElementById("info");
var inputLength = input.value.length;
// Set size to at least 20, or length + 5 for buffer
var newSize = Math.max(20, inputLength + 5);
input.size = newSize;
info.textContent = "Current size: " + input.size + " characters (input length: " + inputLength + ")";
}
</script>
</body>
</html>
As the user types, the input field automatically adjusts its size to accommodate the content with some buffer space.
Key Points
-
The size property only affects the visual width of the input field, not the maximum length of input.
-
The default size value is
20characters if not specified. -
Users can still enter text longer than the size value; they will need to scroll within the input field.
-
The size property accepts positive integer values. Setting it to 0 or negative values may cause unpredictable behavior.
-
This property is different from the
maxlengthattribute, which limits the actual number of characters that can be entered.
Browser Compatibility
The Input URL size property is supported in all modern browsers that support HTML5 URL input type, including Chrome, Firefox, Safari, Edge, and Opera. The property works consistently across different platforms and devices.
Conclusion
The Input URL size property provides control over the visual width of URL input fields, enhancing user experience by adjusting field size based on content or design requirements. It returns the current size value and allows dynamic modification through JavaScript, with a default value of 20 characters when not specified.
158 Views
