Materialize css login form in popup
Materialize css login form in popup modal– To create login form in popup we can use materialize css modal. It is very simple to use materialize form elements to create beautiful form in modal. Here in this article we are going to explain how you can create login form in modal. You can use our online editor to edit and run the code online.
Materialize css login form in popup modal Example
Here is an example of login form with email, password, submit button and forgot password link.
Example:
<!-- Modal Button -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Login Modal</a>
<!-- Modal Body -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Login</h4>
<div class="col s6">
<form class="">
<div class="row">
<div class="input-field col s12">
<input id="Email" type="email" class="validate">
<label for="Email">Email</label>
</div>
<div class="input-field col s12">
<input id="Password" type="text" class="validate">
<label for="Password">Password</label>
</div>
<div class="input-field col s12">
<button type="submit" class="waves-effect waves-light btn">Login</button>
</div>
<div class="input-field col s12">
<a href="#">Forgot Password?</a>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
|
Output of above example-
For Modals Tutorials – Materialize Css Modal
For Form Elements Tutorials – Materialize Css Form
Advertisements
