I’ve been working with a lot of forms recently and I am in love with the
placeholder attribute. It lets you add contextual instructions or an example input to an input field. (That said, it’s not a replacement for labels!)
Now, if you want to demonstrate multiple example inputs or have more complicated instructions, standard placeholders won’t cut it. For that, you need a superplaceholder.js.
Created by Kushagra Gour, superplaceholder.js cycles through a list of strings once you click into an input field, augmenting the original placeholder. You can control the ‘typing speed’, speed at which the strings are cycles, and looping behavior.
Here’s how you initialize it:
// delay between sentences (in milliseconds) sentenceDelay: 1000, // should start on input focus. Set false to autostart startOnFocus: true, // loop through passed sentences loop: true, // Initially shuffle the passed sentences shuffle: false, // Show cursor or not. Shows by default showCursor: true, // String to show as cursor cursor: '|' } }); ```
Easy, right? You can install it via npm, Bower, or just download the library from GitHub. Now go forth and form some forms!