First off what is placeholder text? Placeholder text is alternate hint text, word or short phrase to help the user enter the correct data. The placeholder text is displayed in the <input> or <textarea> elements only when the user has not yet entered any data, clicked or tabbed to the <input> or <textarea> elements. The placeholder text usually returns when the user has unfocused the <input> or <textarea> elements and has not entered any data in the <input> or <textarea> elements.
The placeholder text is usually displayed in a lighter shade of color than the <input> or <textarea> elements values.
In-order to add placeholder text to the <input> or <textarea> elements you will need to use the HTML5 placeholder attribute which must have a text value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
The placeholder attribute should not be used as an alternative to a label. For a longer hint or other helpful text, the title attribute would be more appropriate. Browsers that do not support the placeholder attribute will simply ignore it.
Here is how to code the placeholder attribute.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <form> <input type="email" placeholder="email@example.com"> <textarea placeholder="Enter Optional Message"></textarea> </form> </body> </html>
Here is how to code the placeholder attribute for XHTML5.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <form> <input type="email" placeholder="email@example.com" /> <textarea placeholder="Enter Optional Message"></textarea> </form> </body> </html>
0 comments:
Post a Comment