Jquery Material Form Plugin is a Material Design-style jQuery form plugin based on Bootstrap. This form changes Bootstrap's form to a flat-style form through custom styles and jQuery, with floating tag effects.
Online preview source code download
How to use
Using this Material Design style form requires the introduction of jquery, bootstrap related files, materialFormStyles.css, materialForm.js files into the page.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"><link rel="stylesheet" href="css/materialFormStyles.css"><script src="js/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="js/materialForm.js"></script>
HTML structure
The HTML structure of the Material Design style form is fixed, you can copy the following code.
<div id="formOutterWrapper"><div id="formInnerWrapper"><form id="materialForm" method="post" action="" role="form" autocomplete="off"><div><div><label for="firstName">User name</label><input type="text" id="firstName" name="firstName"></div><div><label for="lastName">Nickname</label><input type="text" id="lastName" name="lastName"></div></div><div><div><label for="email">Email</label><input type="text" id="email" name="email"></div><div><label for="phone">Telephone</label><input type="tel" id="phone" name="phone"></div></div><div><div><label for="description">Project description</label><input type="text" id="description" name="description"></div></div><div><div><button type="button" id="submit">Submit</button></div></div></form></div></div>
The github address of this form plugin is: https://github.com/ch0chi/Jquery-Material-Form-Plugin