April 6, 2016

Material design lite login page

Material design lite login page(template) : You can create login form using predefined classes in material design lite. Here in this tutorial we are going to explain how you can create a simple login page with example and demo.

Material design lite login page | Login Form | Template Example

You can create simple login form in material design lite as below. This form contains two input fields – email, password and one submit button.

Material design lite login page Example:

<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
	<main class="mdl-layout__content">
		<div class="mdl-card mdl-shadow--6dp">
			<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
				<h2 class="mdl-card__title-text">Login</h2>
			</div>
	  	<div class="mdl-card__supporting-text">
				<form action="#">
					<div class="mdl-textfield mdl-js-textfield">
						<input class="mdl-textfield__input" type="text" id="email" />
						<label class="mdl-textfield__label" for="email">Email</label>
					</div>
					<div class="mdl-textfield mdl-js-textfield">
						<input class="mdl-textfield__input" type="password" id="userpass" />
						<label class="mdl-textfield__label" for="userpass">Password</label>
					</div>
				</form>
			</div>
			<div class="mdl-card__actions mdl-card--border">
				<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Sign In </button>
			</div>
		</div>
	</main>
</div>

Try it »

If you run the above example it will produce the output something like this –

Material design lite login page : Login Form Example

Learn More

Let us have some More example on Login templates of Material Design Lite.

Material Design Lite Login Form In Popup Dialog(Modal)

You can create login form in material design lite popup modal simply as below –

Login Form in Popup Dialog Modal Example:

                            
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<style>
.remove-padding{
padding:0px;
}
</style>
</head>
<body>
  <button id="show-dialog" type="button" class="mdl-button">Login</button>
  <dialog class="mdl-dialog remove-padding">
        <div class="mdl-card mdl-shadow--6dp">
			<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
				<h2 class="mdl-card__title-text">Login</h2>
			</div>
	  	        <div class="mdl-card__supporting-text">
				<form action="#">
					<div class="mdl-textfield mdl-js-textfield">
						<input class="mdl-textfield__input" type="text" id="email" />
						<label class="mdl-textfield__label" for="email">Email</label>
					</div>
					<div class="mdl-textfield mdl-js-textfield">
						<input class="mdl-textfield__input" type="password" id="userpass" />
						<label class="mdl-textfield__label" for="userpass">Password</label>
					</div>
				</form>
			</div>
			<div class="mdl-card__actions mdl-card--border">
				<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Sign In </button>
                                
			</div>
		</div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });   
  </script>
</body>
</html>

Try it »

If you run the above example it will show a popup dialog and login form simply as below –

Material design lite login form in Modal Popup Dialog

Add Comment

📖 Read More

Material Design Lite Tutorial

Material design lite login page