المكون الإضافي لـ JQuery Material Form هو مكون إضافي على طراز JQuery Form على طراز تصميم المواد يعتمد على bootstrap. يغير هذا النموذج نموذج bootstrap إلى نموذج مسطح من خلال أنماط مخصصة و jQuery ، مع تأثيرات العلامة العائمة.
تنزيل رمز مصدر المعاينة عبر الإنترنت
كيفية استخدام
يتطلب استخدام نموذج نمط تصميم المواد هذا إدخال ملفات 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 = "stylesheh elef =" css/materialStyles.Css src = "js/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"> </script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"> </script> <script src = "js/matherform.js"> </script>
هيكل HTML
تم إصلاح هيكل HTML لنموذج نمط تصميم المواد ، ويمكنك نسخ الكود التالي.
<div id = "formoutterWrapper"> <div id = "forminnerwrapper"> <form id = "materialform" method = "post" action = "" roly = "form" autocomplete = "off" بالنسبة إلى = "lastName"> لقب </label> <إدخال type = "text" id = "lastName" name = "lastName"> </div> </viv> <viv> <viv> <label for = "email"> البريد الإلكتروني </label> <input type = "text" id = "email" name =/div> <iv> name = "phone"> </viv> </viv> <viv> <viv> <label for = "description"> وصف المشروع </label> <input type = "text" id = "description" name = "description"> </viv> </viv> <viv> <button type = "button" id = "submit"
عنوان GitHub لهذا البرنامج المساعد هو: https://github.com/ch0chi/jquery-material-form-plugin