Maison > interface Web > js tutoriel > Implémentation d'un plug-in de formulaire de style Material Design basé sur Bootstrap avec des compétences en téléchargement_javascript de code source

Implémentation d'un plug-in de formulaire de style Material Design basé sur Bootstrap avec des compétences en téléchargement_javascript de code source

WBOY
Libérer: 2016-05-16 15:04:59
original
1299 Les gens l'ont consulté

Jquery Material Form Plugin est un plug-in de formulaire jQuery basé sur le style Material Design de Bootstrap. Ce formulaire utilise des styles personnalisés et jQuery pour modifier le formulaire Bootstrap en un formulaire de style plat avec des effets d'étiquette flottants.

Aperçu en ligne Téléchargement du code source

Comment utiliser

Pour utiliser ce formulaire de style Material Design, vous devez introduire les fichiers jquery, bootstrap et MaterialFormStyles.css, MaterialForm.js dans la 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="js/materialForm.js"></script>
Copier après la connexion

Structure HTML

La structure HTML de ce formulaire de style Material Design est corrigée, vous pouvez copier le code ci-dessous.

<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> 
Copier après la connexion

L'adresse github du plug-in de formulaire est : https://github.com/ch0chi/Jquery-Material-Form-Plugin

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal