HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field.
Here’s an example showing what a placeholder is. The hint to email i.e. [email protected] is placeholder here:
Example
You can try to run the following code to learn how to use placeholder attribute:
<!DOCTYPE HTML> <html> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="email" name="newinput" placeholder="[email protected]"/> <input type="submit" value="submit" /> </form> </body> </html>
Example
To change the input placeholder color, use CSS.
<!DOCTYPE HTML> <html> <style> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #7F0D10; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #7F0D10; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #7F0D10; opacity: 1; } </style> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="email" name="newinput" placeholder="[email protected]"/> <input type="submit" value="submit" /> </form> </body> </html>