The placeholder attribute in an <input> element in HTML provides a short hint that describes the expected value of the input field. This hint is displayed inside the input field when it is empty and disappears as soon as the user starts typing.
The placeholder attribute is used to provide guidance to users, especially when the input field label alone might not give enough context or when the input field has specific formatting or requirements.
The placeholder text is visible only when the field is empty. Once the user starts typing, the text disappears, and if the user erases the text, the placeholder reappears.
<input type="text" placeholder="Enter your name">
In this example,
1. The input field is of type text.
2. The placeholder attribute has the value "Enter your name", which appears inside the text box when it is empty.
placeholder-attribute.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Placeholder attribute Demo</title> </head> <body> <h2>Login Form</h2> <form action="https://httpbin.org/post" method="POST"> <p> <label for="email">Email:</label><br> <input type="email" id="email" name="email" placeholder="example@domain.com"> </p> <p> <label for="password">Password:</label><br> <input type="password" id="password" name="password" placeholder="Enter your password"> </p> <p> <input type="submit" value="Submit"> </p> </form> </body> </html>
Above snippet generate below screen.
Previous Next Home
No comments:
Post a Comment