HTML5 introduces a new smart attribute associated with the input controls that inserts text in the input
field, but disappears if the field gets the focus or makes it reappear if it loses focus. All of this is
accomplished without JavaScript code.
The attribute that allows you to implement this functionality is the placeholder. It is extremely easy to use
the placeholder text in a web form:
<input type="text" placeholder="Insert your first name"/>
Example
<!DOCTYPE html>
<html>
<head>
<title>
Solution 4-9: Setting placeholder text in an input field
</title>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Solution 4-9: Setting placeholder text in an input field</legend>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Insert your first name"/><br/>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Insert your email"/><br/>
<label for="blog">Blog</label>
<input id="blog" name="blog" type="url" placeholder="Insert your blog"/><br/>
</fieldset>
</form>
</body>
</html>
0 comments:
Post a Comment