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
How to display a short hint that describes the expected value of the element in HTML?
The placeholder attribute in HTML displays a short hint that describes the expected value of an input element. This hint appears inside the input field when it is empty and disappears when the user starts typing. It provides users with guidance on what type of information to enter without taking up additional screen space.
Syntax
Following is the syntax for the placeholder attribute −
<input type="text" placeholder="hint text" name="fieldName">
The placeholder text should be concise and descriptive, helping users understand the expected input format or content.
Supported Elements
The placeholder attribute works with the following HTML input types −
text− Single-line text inputpassword− Password input fieldemail− Email address inputtel− Telephone number inputurl− URL input fieldsearch− Search input fieldtextarea− Multi-line text area
Basic Login Form Example
Following example shows how to use the placeholder attribute in a login form −
<!DOCTYPE html>
<html>
<head>
<title>Placeholder Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Login</h2>
<form action="/new.php">
<input type="text" placeholder="Student UserName" name="name" style="padding: 8px; margin: 5px 0; width: 200px;"><br>
<input type="password" placeholder="Password" name="password" style="padding: 8px; margin: 5px 0; width: 200px;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px;">
</form>
</body>
</html>
The output displays a login form with placeholder hints in the input fields −
Login [Student UserName ] (grayed placeholder text) [Password ] (grayed placeholder text) [Submit]
Contact Form with Multiple Input Types
Following example demonstrates placeholder usage with various input types −
<!DOCTYPE html>
<html>
<head>
<title>Contact Form with Placeholders</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Us</h2>
<form action="/contact.php" method="post">
<input type="text" placeholder="Your Full Name" name="fullname" style="padding: 8px; margin: 5px 0; width: 250px; display: block;">
<input type="email" placeholder="your.email@example.com" name="email" style="padding: 8px; margin: 5px 0; width: 250px; display: block;">
<input type="tel" placeholder="+1-555-123-4567" name="phone" style="padding: 8px; margin: 5px 0; width: 250px; display: block;">
<input type="url" placeholder="https://yourwebsite.com" name="website" style="padding: 8px; margin: 5px 0; width: 250px; display: block;">
<textarea placeholder="Enter your message here..." name="message" rows="4" style="padding: 8px; margin: 5px 0; width: 250px; display: block; resize: vertical;"></textarea>
<input type="submit" value="Send Message" style="padding: 10px 20px; margin: 10px 0;">
</form>
</body>
</html>
Each input field shows appropriate placeholder hints for different data types. The placeholders provide clear examples of the expected format.
Search Form Example
Following example shows placeholder usage in a search form −
<!DOCTYPE html>
<html>
<head>
<title>Search Form with Placeholder</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Articles</h2>
<form action="/search.php" method="get">
<input type="search" placeholder="Search for HTML, CSS, JavaScript..." name="query" style="padding: 10px; width: 300px; border: 2px solid #ddd; border-radius: 4px;">
<input type="submit" value="Search" style="padding: 10px 20px; margin-left: 10px; background: #007bff; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
The search input uses a descriptive placeholder that suggests what users can search for.
Key Points
Here are important points to remember when using the placeholder attribute −
Accessibility − Placeholder text should not replace proper labels. Use both
<label>elements and placeholders together for better accessibility.Styling − Placeholder text appears in a lighter color (usually gray) and disappears when the user starts typing.
Not a replacement for labels − Screen readers may not always read placeholder text, so include proper form labels.
Browser support − The placeholder attribute is supported in all modern browsers (HTML5 feature).
Character limit − Keep placeholder text short and concise for better user experience.
Placeholder with Labels for Accessibility
For better accessibility, combine placeholder attributes with proper label elements −
<!DOCTYPE html>
<html>
<head>
<title>Accessible Form with Placeholders</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form action="/register.php" method="post">
<label for="username" style="display: block; margin-bottom: 5px; font-weight: bold;">Username:</label>
<input type="text" id="username" name="username" placeholder="Choose a unique username" style="padding: 8px; width: 250px; margin-bottom: 15px;">
<label for="email" style="display: block; margin-bottom: 5px; font-weight: bold;">Email:</label>
<input type="email" id="email" name="email" placeholder="your.email@domain.com" style="padding: 8px; width: 250px; margin-bottom: 15px;">
<input type="submit" value="Register" style="padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
This approach provides both visible labels for all users and helpful placeholder hints for additional guidance.
Conclusion
The placeholder attribute provides an effective way to offer helpful hints to users about expected input values. While it enhances user experience by providing inline guidance, it should always be used alongside proper form labels to ensure accessibility. The placeholder attribute works with various input types and is widely supported across modern browsers.
375 Views
