Skip to content

Instantly share code, notes, and snippets.

@mdbadsha

mdbadsha/MDL Reg Form.html

Last active September 20, 2016 15:05
Show Gist options
  • Save mdbadsha/b63246cc1202229e8522345f7f2a6e39 to your computer and use it in GitHub Desktop.
Save mdbadsha/b63246cc1202229e8522345f7f2a6e39 to your computer and use it in GitHub Desktop.
Download ZIP
MDL Registration Form
Raw
MDL Reg Form.html
<body>
<div class="mdl-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Registration</h2>
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="name">
<label class="mdl-textfield__label" for="name">Full Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" id="email">
<label class="mdl-textfield__label" for="email">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password">
<label class="mdl-textfield__label" for="password">Password</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="repassword">
<label class="mdl-textfield__label" for="repassword">Retype Password</label>
</div>
<span class="mdl-title">Gender : </span>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="male">
<input type="radio" id="male" class="mdl-radio__button" name="options" value="male">
<span class="mdl-radio__label">Male</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="female">
<input type="radio" id="female" class="mdl-radio__button" name="options" value="female">
<span class="mdl-radio__label">Female</span>
</label>
</div>
<div class="mdl-card__actions mdl-card--border">
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Sign Up
</button>
</form>
</div>
</div>
</body>
</html>
Raw
mdl-registration-form.markdown

MDL Registration Form

This is a simple user registration form created by MDL (Material Design Lite)

A Pen by Badsha on CodePen.

License.

Raw
style.css
.mdl-card__title{
background-color: #0BC6DC;
}
body {
margin: 30px 280px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment