HTML5: Placeholder

Placeholder text can:

html5 placeholder

Example 3.17 - Input text placeholder - Example 3.17 (Without Styles) |
<h4>Placeholder Text</h4><p>Used to give instructions:</p>
<form action="http://cscie12.dce.harvard.edu/echo" method="post">

<input size="30" name="search" type="text" placeholder="What can we help you find?"/>
<input class="searchSubmit" value="Search" type="submit"/>
</form>
<hr/><p>Used to show format:</p>
<form action="http://cscie12.dce.harvard.edu/echo" method="post">
<p><label for="expiration">Expiration:</label>
<input id="expiration" name="expiration" type="text" placeholder="MMYY"/><br/>
<input type="submit"/></p>

</form>

In style element (<style type="text/css">) within head element:

input.searchSubmit {
    background: url('./images/magnifier12.png') no-repeat;
    width: 16px;
    height: 16px;
    border: none;
    margin-left: 2px;
    text-indent: -9999em;}

Placeholder Text

Used to give instructions:


Used to show format:


 
Magnifier icon made by SimpleIcon from www.flaticon.com is licensed by CC BY 3.0

Copyright © David Heitmeyer