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 placeholder Property
The HTML DOM Input URL placeholder property sets or returns a string that provides hints to users about the expected format of the URL input field. The placeholder text appears as grayed-out text inside the input field and disappears when the user starts typing.
Syntax
Following is the syntax for getting the placeholder value −
inputURLObject.placeholder
Following is the syntax for setting the placeholder value −
inputURLObject.placeholder = stringValue
Parameters
stringValue − A string that specifies the placeholder text to display in the URL input field. This should typically be a sample URL format like "https://www.example.com".
Return Value
The property returns a string representing the current placeholder text of the URL input field. If no placeholder is set, it returns an empty string.
Example − Setting Placeholder Dynamically
Following example demonstrates how to set a placeholder for a URL input field using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input URL placeholder Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>URL Input with Placeholder</h2>
<form>
<label for="URLSelect">Enter Website URL:</label><br><br>
<input type="url" id="URLSelect" style="width: 300px; padding: 8px; font-size: 14px;"><br><br>
<button type="button" onclick="setPlaceholder()">Set Example Placeholder</button>
<button type="button" onclick="clearPlaceholder()">Clear Placeholder</button>
</form>
<script>
var inputURL = document.getElementById("URLSelect");
function setPlaceholder() {
inputURL.placeholder = 'https://www.example.com';
}
function clearPlaceholder() {
inputURL.placeholder = '';
}
</script>
</body>
</html>
The output shows a URL input field with buttons to set and clear the placeholder text. When "Set Example Placeholder" is clicked, the placeholder "https://www.example.com" appears in the input field −
URL Input with Placeholder Enter Website URL: [https://www.example.com] [Set Example Placeholder] [Clear Placeholder] (The placeholder text appears grayed out in the input field)
Example − Reading Placeholder Value
Following example shows how to read the current placeholder value and display it −
<!DOCTYPE html>
<html>
<head>
<title>Get URL Placeholder Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Reading URL Placeholder Property</h2>
<form>
<label for="urlInput">Website URL:</label><br><br>
<input type="url" id="urlInput" placeholder="https://www.tutorialspoint.com" style="width: 300px; padding: 8px; font-size: 14px;"><br><br>
<button type="button" onclick="showPlaceholder()">Show Current Placeholder</button>
</form>
<p id="output" style="margin-top: 20px; font-weight: bold;"></p>
<script>
function showPlaceholder() {
var urlInput = document.getElementById("urlInput");
var placeholderValue = urlInput.placeholder;
document.getElementById("output").textContent = "Current placeholder: " + placeholderValue;
}
</script>
</body>
</html>
The output displays the URL input field with a pre-set placeholder, and clicking the button shows the current placeholder value −
Reading URL Placeholder Property Website URL: [https://www.tutorialspoint.com] [Show Current Placeholder] Current placeholder: https://www.tutorialspoint.com
Example − Multiple URL Inputs with Different Placeholders
Following example demonstrates setting different placeholders for multiple URL input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple URL Placeholders</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Website Registration Form</h2>
<form>
<label for="personal">Personal Website:</label><br>
<input type="url" id="personal" style="width: 300px; padding: 8px; margin: 5px 0;"><br><br>
<label for="company">Company Website:</label><br>
<input type="url" id="company" style="width: 300px; padding: 8px; margin: 5px 0;"><br><br>
<label for="portfolio">Portfolio Website:</label><br>
<input type="url" id="portfolio" style="width: 300px; padding: 8px; margin: 5px 0;"><br><br>
<button type="button" onclick="setAllPlaceholders()">Set All Placeholders</button>
</form>
<script>
function setAllPlaceholders() {
document.getElementById("personal").placeholder = "https://www.yourname.com";
document.getElementById("company").placeholder = "https://www.company.com";
document.getElementById("portfolio").placeholder = "https://portfolio.example.com";
}
</script>
</body>
</html>
The output shows three URL input fields, and clicking the button sets appropriate placeholder text for each field based on its purpose −
Website Registration Form Personal Website: [https://www.yourname.com] Company Website: [https://www.company.com] Portfolio Website: [https://portfolio.example.com] [Set All Placeholders]
Key Points
The placeholder property is read-write, meaning you can both get and set its value using JavaScript.
Placeholder text appears in a lighter color (usually gray) and disappears when the user focuses on the input field.
The placeholder should provide helpful examples or format hints for URL input, such as including "https://" to show the expected protocol.
Setting the placeholder to an empty string ("") removes the placeholder text entirely.
The placeholder property is supported in all modern browsers and provides better user experience than using JavaScript to simulate placeholder behavior.
Conclusion
The HTML DOM Input URL placeholder property provides an easy way to guide users on the expected URL format. You can dynamically set, modify, or retrieve placeholder text using JavaScript, making forms more user-friendly and intuitive. The property works seamlessly across all modern browsers and is essential for creating effective URL input interfaces.
227 Views
