Create Beautiful iOS-style Inputs Using Pineput Plugin

Pineput is a small jQuery plugin to create beautiful, animated input fields with floating labels/placeholders as you see on iOS and Android apps.

The plugin uses the HTML <label> element for the input's placeholder and moves the label value above the typed text when the input fields gets focused. Also known as Float Label Pattern.

How to use it:

1. Import jQuery library and the Pineput plugin into the HTML page.

<link rel="stylesheet" href="jquery.pineput.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.pineput.js"></script>

2. Attach the plugin to the HTML form.

$(function(){
  $('form').pineput();
});

3. Add the <label> elements to your input fields and done.

<form>
  <div class="input-field">
    <label>Your Email</label>
    <input type="email" />
  </div>
  <div class="input-field">
    <label>Your Password</label>
    <input type="password" />
  </div>
  <div class="input-field">
    <label>Your Name</label>
    <input type="text" />
  </div>
  <div class="input-field">
    <label>Your Website</label>
    <input type="url" />
  </div>
</form>

Changelog:

2021-03-16

• added select element support

---

This awesome jQuery plugin is developed by stamat. For more Advanced Usages, please check the demo page or visit the official website.