Create Beautiful iOS-style Inputs Using Pineput Plugin

File Size: 5.62 KB
Views Total: 1238
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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

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



  • 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.