Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## HTML5: Placeholder

Placeholder text can:

- Provide instructions
- Show format

Example 3.17 - Input text placeholder - Example 3.17 (Without Styles) |
<h4>Placeholder Text</h4><p>Used to give instructions:</p><form action="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><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="https://cscie12.dce.harvard.edu/echo" method="post" enctype="application/x-www-form-urlencoded"><p><label for="expiration">Expiration:</label><input id="expiration" name="expiration" type="text" placeholder="MMYY"/><br/><input type="submit"/></p></form>input.searchSubmit { background: url('http://cscie12.dce.harvard.edu/resources/./images/magnifier12.png') no-repeat; width: 16px; height: 16px; border: none; margin-left: 2px; text-indent: -9999em;}

- Markup
- Style
- Display

    <h4>Placeholder Text</h4><p>Used to give instructions:</p>
    <form action="https://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="https://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:

Expiration:

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

Copyright © David Heitmeyer