August 16, 2016

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:

<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>
</head>
<body>
<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">
				<form action="#">
				    <div class="mdl-textfield mdl-js-textfield">
						<input class="mdl-textfield__input" type="text" id="name" />
						<label class="mdl-textfield__label" for="name">Name</label>
					</div>
					<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="text" id="phone" />
						<label class="mdl-textfield__label" for="phone">Phone</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>
					<div class="mdl-textfield mdl-js-textfield">
						<input class="mdl-textfield__input" type="password" id="cnfuserpass" />
						<label class="mdl-textfield__label" for="cnfuserpass">Confirm 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">Register</button>
			</div>
		</div>
	</main>
</div>
</body>
</html>

Try it »

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

Material design lite Registration page

Add Comment

📖 Read More

Material Design Lite Tutorial

Material design lite Registration page