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 Email size Property
The HTML DOM Input Email size property returns or sets the size attribute of an input email field. This property determines the visible width of the input field in characters. If not specified, the default value is 20.
Syntax
Following is the syntax for returning the size property −
inputEmailObject.size
Following is the syntax for setting the size property −
inputEmailObject.size = number
Parameters
The size property accepts a numeric value representing the number of characters the input field should display. The value must be a positive integer. Common values range from 10 to 50 characters depending on the layout requirements.
Return Value
The property returns a numeric value representing the current size of the email input field. If no size attribute was originally set, it returns the default value of 20.
Example − Getting and Setting Email Input Size
Following example demonstrates how to get and modify the size property of an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Size Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
input, button {
padding: 8px;
margin: 5px;
font-size: 14px;
}
button {
border-radius: 5px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Email Input Size Demo</legend>
<label for="emailField">Email Address:</label><br>
<input type="email" id="emailField" size="15" placeholder="Enter your email"><br>
<button type="button" onclick="getCurrentSize()">Get Size</button>
<button type="button" onclick="increaseSize()">Increase Size</button>
<button type="button" onclick="decreaseSize()">Decrease Size</button>
<div id="result"></div>
</fieldset>
</form>
<script>
var emailField = document.getElementById("emailField");
var result = document.getElementById("result");
function getCurrentSize() {
result.textContent = "Current size: " + emailField.size + " characters";
}
function increaseSize() {
emailField.size = parseInt(emailField.size) + 10;
result.textContent = "Size increased to: " + emailField.size + " characters";
}
function decreaseSize() {
if (emailField.size > 10) {
emailField.size = parseInt(emailField.size) - 5;
result.textContent = "Size decreased to: " + emailField.size + " characters";
} else {
result.textContent = "Minimum size reached (10 characters)";
}
}
</script>
</body>
</html>
The example creates an email input field with an initial size of 15 characters. The buttons allow you to check the current size and modify it dynamically −
Email Address: [_______________] (15 characters wide) [Get Size] [Increase Size] [Decrease Size] After clicking "Get Size": Current size: 15 characters After clicking "Increase Size": Size increased to: 25 characters After clicking "Decrease Size": Size decreased to: 20 characters
Example − Dynamic Form Layout
Following example shows how the size property can be used to create responsive form layouts −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Email Input Sizing</title>
<style>
.form-container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="email"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.size-controls {
margin-top: 10px;
}
.size-controls button {
margin-right: 10px;
padding: 5px 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="form-container">
<h3>Contact Form</h3>
<div class="form-group">
<label for="primaryEmail">Primary Email:</label>
<input type="email" id="primaryEmail" size="25">
</div>
<div class="form-group">
<label for="secondaryEmail">Secondary Email:</label>
<input type="email" id="secondaryEmail" size="25">
</div>
<div class="size-controls">
<button onclick="setCompactView()">Compact View</button>
<button onclick="setStandardView()">Standard View</button>
<button onclick="setWideView()">Wide View</button>
</div>
<div id="currentView" style="margin-top: 10px; color: #666;">Current: Standard View</div>
</div>
<script>
var primaryEmail = document.getElementById("primaryEmail");
var secondaryEmail = document.getElementById("secondaryEmail");
var currentView = document.getElementById("currentView");
function setCompactView() {
primaryEmail.size = 20;
secondaryEmail.size = 20;
currentView.textContent = "Current: Compact View (20 characters)";
}
function setStandardView() {
primaryEmail.size = 25;
secondaryEmail.size = 25;
currentView.textContent = "Current: Standard View (25 characters)";
}
function setWideView() {
primaryEmail.size = 35;
secondaryEmail.size = 35;
currentView.textContent = "Current: Wide View (35 characters)";
}
</script>
</body>
</html>
This example demonstrates how different size values affect the visual appearance of email input fields, allowing users to switch between compact, standard, and wide layouts −
Contact Form Primary Email: [_________________________] (25 characters) Secondary Email: [_________________________] (25 characters) [Compact View] [Standard View] [Wide View] Current: Standard View
Key Points
-
The
sizeproperty only affects the visual width of the input field, not the maximum number of characters that can be entered. -
For limiting input length, use the
maxlengthattribute instead ofsize. -
The default size value is 20 characters if not specified.
-
Size values should be positive integers; negative values are ignored.
-
Modern CSS alternatives like
widthandmax-widthprovide more flexible sizing options.
Conclusion
The HTML DOM Input Email size property provides a simple way to control the visual width of email input fields. While useful for basic layouts, modern web development often relies on CSS for more sophisticated responsive design. The size property remains valuable for quick adjustments and maintaining consistent field widths across forms.
174 Views
