## HTML5: Placeholder

Placeholder text can:

- Provide instructions
- Show format

Example 3.15 - Input text placeholder - Example 3.15<h4>Placeholder Text</h4><p>Used to give instructions:</p><form action="https://cs12.net/form/submit.php" 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://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><p><label for="expiration">Expiration:</label><input id="expiration" name="expiration" type="text" placeholder="MMYY"/><br/><button type="submit">Submit</button></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://cs12.net/form/submit.php" 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://cs12.net/form/submit.php" method="post">
       <p>
         <label for="expiration">Expiration:     </label>
         <input id="expiration" name="expiration" type="text" placeholder="MMYY"/>

         <br/>

         <button type="submit">Submit     </button>
       </p>
     </form>

In `style` element (`<style>`) 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