JQuery Material Form Plugin ist ein JQuery Form-Plugin im Material Design-Stil, das auf Bootstrap basiert. Diese Form ändert die Form von Bootstrap in eine flache Form durch benutzerdefinierte Stile und JQuery mit schwimmenden Tag-Effekten.
Online -Vorschau -Quellcode herunterladen
Wie man benutzt
Die Verwendung dieses Materialentwurfsformulars erfordert die Einführung von JQuery, Bootstrap -verwandten Dateien, MaterialformStyles.css, MaterialForm.js -Dateien in die Seite.
<link rel = "styleSheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min 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 -Struktur
Die HTML -Struktur des Formulars für Materialdesign ist behoben. Sie können den folgenden Code kopieren.
<div id = "formoutterWrapper"> <div id = "formInnerWrapper"> <form id = "Materialform" methode = "post" action = "rollen =" Form "autocplete =" off "> <div> <div> <label für =" FirstName "> Benutzername </label> <Eingabe type =" Text "id =" firstname "name" name "name" name "name" name "name" name "name" für = "LastName"> Spitzname </label> <Eingabe type = "text" id = "lastname" name = "lastname"> </div> </div> <div> <div> <label für = "E -Mail"> E -Mail </Label> <Eingabe type = "text" id = "name" name "name =" id "> </div> <div> <div> <darly =" telefon ". name = "Telefon"> </div> </div> <div> <div> <Label für = "Beschreibung"> Projektbeschreibung </Label> <Eingabe type = "text" id = "Beschreibung" name = "Beschreibung"> </div> </div> <div> <div> <button type = "button" id "id"> subg </button> </div> </div> </div> </div> </div> </div> </botte> </div> </div> </div> </button
Die GitHub-Adresse dieses Formular-Plugins lautet: https://github.com/ch0chi/jquery-material-form-plugin