jquery material form plugin是一款基于bootstrap的material design风格的jquery表单插件。该表单通过自定义样式和jquery来将bootstrap的表单修改为扁平风格的表单，并带有浮动标签特效。
在线预览    源码下载
使用方法使用该material design风格表单需要在页面中引入jquery，bootstrap相关文件和materialformstyles.css、materialform.js文件。
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=js/materialform.js>script>
html结构该material design风格表单的html结构是固定的，你可以复制下面的代码。
div class=container id=formoutterwrapper> div class=container id=forminnerwrapper> form id=materialform class=form method=post action= role=form autocomplete=off> div class=form-group> div class=col-xs-6> label class=labels for=firstname>用户名称label> input type=text class=forminput id=firstname name=firstname> div> div class=col-xs-6> label class=labels for=lastname>昵　称label> input type=text class=forminput id=lastname name=lastname> div> div> div class=form-group> div class=col-xs-6> label class=labels for=email>电子邮件label> input type=text class=forminput id=email name=email> div> div class=col-xs-6> label class=labels for=phone>联系电话label> input type=tel class=forminput id=phone name=phone> div> div> div class=form-group> div class=col-xs-12> label class=labels for=description>项目描述label> input type=text class=forminput id=description name=description> div> div> div class=form-group> div class=col-xs-12> button type=button class=btn btn-primary green flatbutton id=submit>提交button> div> div> form> div>div>
该表单插件的github地址为：https://github.com/ch0chi/jquery-material-form-plugin
在线预览    源码下载