foxholder.js 15 types of placeholder examples

Foxholder.js Github here

Step1:
link the stylesheet in the head.
<link rel="stylesheet" type="text/css" href="foxholder-styles.css">

link the jQuery library and foxholder.js file in the body
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="foxholder.js"></script>

Step2:
HTML

<div class="your-class">
    <input id="your-id-1" type="text" placeholder="My Input" />
    <textarea id="your-id-2" placeholder="My Textarea"></textarea>
    <button type="submit">Submit</button>
</div>

Note! Use only tag for submit buttons

html

html

html

15 different types of placeholder above.

The point is the div with a className should be the parents of the form table.  Later we can grab the content through the className.

Style the html in a good view position in the browser.

css

Step3:
JS

js

Easy way to call the style with demo number.Choose the number you want to use.