Tutorialsplane

Material design lite Registration page


Material design lite Registration page : You can create registration form simply using the predefined classes in material design lite. Here in this tutorial we are going to explain how you can create a registration form page using material design lite classes. You can also use our online editor to edit and run the example online.


Material design lite Registration page: Registration Form 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-grid">
<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">Regiser</h2>
			</div>
	  	<div class="mdl-card__supporting-text">
				
			</div>
			<div class="mdl-card__actions mdl-card--border">
				<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Register</button>
			</div>
		</div>
	</main>
</div>

                                                                                    

</div>

Try it ยป

If you run the above example it will produce the output for registration page ie. registration form something like this โ€“

MDL - Faq