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> 

Try it »

Output of above example-

Materialize css login form in popup

For Modals Tutorials – Materialize Css Modal
For Form Elements Tutorials – Materialize Css Form


Add Comment

📖 Read More


    Advertisements