框架材料表单插件是一款基于引导程序的材料设计风格的框架表单插件。该表单通过自定义样式和框架来将引导程序的表单修改为扁平风格的表单，并带有浮动标签特效。

在线预览源码下载

使用方法

使用该材料设计风格表单需要在页面中引入jquery，引导相关文件和materialFormStyles.css、materialForm.js文件。

链接rel='样式表href=' https://cdnjs。cloudflare。com/Ajax/libs/Twitter-bootstrap/3。3 .6/CSS/bootstrap。量滴CSS ' link rel='样式表href=' CSS/material form style。CSS ' script src=' http : js/jquery。量滴js '/script script src=' http :3359 cdnjs。cloudflare。com/Ajax/libs/Twitter结构

该材料设计风格表单的超文本标记语言结构是固定的，你可以复制下面的代码。

div class=' container ' id=' formoutwrapper ' div class=' container ' id=' formInnerWrapper ' form id=' material form ' class=' form ' method=' post ' action=' role=' form ' autocomplete=' off ' div class=' form-group ' div class=' col-xs-6 ' label class=' labels ' for=' first name '用户名称/label输入类型=' text class=' formInput ' id=' first name ' name=' first name '/div div class=' col-xs-6 ' label class=' labels ' for=' last name '昵称/label输入类型=' text ' class=' formInput ' id=' last name ' name=' last name '/div/div class=' form-group ' div class=' col-xs-6 ' label class=' labels ' for=' 电子邮件电子邮件/label输入类型=' text ' class=' formInput ' id=' email ' name=' email '/div div class=' col-xs-6 ' label class=' labels ' for=' phone '联系电话/label输入类型=' tel ' class=' formInput ' id=' phone ' name=' phone '/div/div class=' form-group ' div class=' col-xs-12 ' label class=' labels ' for=描述项目描述/labelinput类型=' text ' class=' formInput ' id=' description ' name=' description '/div/div class=' form-group ' div class=' col-xs-12 '按钮类型=' button ' class=' BTN BTN-主要绿色平面按钮' id=' submit '提交/button/div/div/form/div/div该表单插件的开源代码库地址为：https://github。 com/ch0chi/Jquery-素材-表单-插件