Плагин материала JQUERY-это плагин в стиле дизайна материала, основанный на начальной загрузке. Эта форма изменяет форму начальной загрузки на форму плоского стиля с помощью пользовательских стилей и jQuery, с плавающими эффектами.
Скачать исходный код в Интернете
Как использовать
Использование этой формы стиля дизайна материала требует введения jQuery, File, связанных с начальной загрузкой, MaterialFormStyles.css, MaterialForm.js Files в страницу.
<link rel = "styleSheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> <link rel = "Стили-часа" href = "css/materialformstyles.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> <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 -структура
HTML -структура формы стиля дизайна материала исправлена, вы можете скопировать следующий код.
<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>
Адрес GitHub этого плагина: https://github.com/ch0chi/jquery-material-form-plugin