<div class="demo-preview-block forms sample"> <div class="firstblock"> <h5>Form validation</h5> <form method="post" class="right mdl-form mdl-form-registration demo-registration"> <h5 class="mdl-form__title">Register for launch</h5> <div class="mdl-form__content"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sample1" required autofocus /> <label class="mdl-textfield__label" for="sample1">Name</label> <span class="mdl-textfield__error">This field must not be empty</span> </div> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="email" id="email" required /> <label class="mdl-textfield__label" for="email">Email</label> <span class="mdl-textfield__error">This is not a valid email-address</span> </div> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember_me"> <input type="checkbox" id="remember_me" class="mdl-checkbox__input" required /> <span class="mdl-checkbox__label">Remember me</span> </label> </div> <div class="mdl-form__actions"> <button class="mdl-button mdl-js-button mdl-button--submit mdl-button--raised mdl-button--primary mdl-js-ripple-effect" disabled> Login </button> </div> </form> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <form method="post" class="mdl-form"> <h5 class="mdl-form__title">Define your colors</h5> <div class="mdl-form__content"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sample1" /> <label class="mdl-textfield__label" for="sample1">Name</label> </div> <div class="mdl-textfield mdl-js-textfield"> <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"> <input class="mdl-textfield__input" type="tel" id="tel"/> <label class="mdl-textfield__label" for="tel">Telephone, (555) 555 5555</label> </div> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="red1"> <input type="checkbox" id="red1" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Red</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="green1"> <input type="checkbox" id="green1" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Green</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="blue1"> <input type="checkbox" id="blue1" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Blue</span> </label> </div> <div class="mdl-form__actions"> <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Cancel</button> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">Sign up</button> </div> </form> <form method="post" class="mdl-form"> <h5 class="mdl-form__title">Define your colors (hor)</h5> <div class="mdl-form__content"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sample1" /> <label class="mdl-textfield__label" for="sample1">Name</label> </div> <div class="mdl-textfield mdl-js-textfield"> <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"> <input class="mdl-textfield__input" type="tel" id="tel"/> <label class="mdl-textfield__label" for="tel">Telephone, (555) 555 5555</label> </div> <div class="mdl-form__group"> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="red2"> <input type="checkbox" id="red2" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Red</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="green2"> <input type="checkbox" id="green2" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Green</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="blue2"> <input type="checkbox" id="blue2" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">Blue</span> </label> </div> </div> <div class="mdl-form__actions"> <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Cancel</button> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">Sign up</button> </div> </form> <form method="post" class="mdl-form"> <h5 class="mdl-form__title">Define your colors (radio)</h5> <div class="mdl-form__content"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sample1" /> <label class="mdl-textfield__label" for="sample1">Name</label> </div> <div class="mdl-textfield mdl-js-textfield"> <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"> <input class="mdl-textfield__input" type="tel" id="tel"/> <label class="mdl-textfield__label" for="tel">Telephone, (555) 555 5555</label> </div> <div class="mdl-form__group"> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="red3"> <input type="radio" id="red3" class="mdl-radio__button" name="color[]"/> <span class="mdl-radio__label">Red</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="green3"> <input type="radio" id="green3" class="mdl-radio__button" name="color[]" /> <span class="mdl-radio__label">Green</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="blue3"> <input type="radio" id="blue3" class="mdl-radio__button" name="color[]"/> <span class="mdl-radio__label">Blue</span> </label> </div> </div> <div class="mdl-form__actions"> <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Cancel</button> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">Sign up</button> </div> </form> <form method="post" class="mdl-form demo-slider"> <h5 class="mdl-form__title">Settings</h5> <div class="mdl-form__content"> <div class="mdl-form__group"> <i class="material-icons mdl-icon mdl-color-text--grey-600">volume_up</i> <div class="mdl-slider__container__container"> <span class="mdl-slider__label mdl-color-text--grey-500">Media volume</span> <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="30" tabindex="0"/> </div> </div> <div class="mdl-form__group"> <i class="material-icons mdl-icon mdl-color-text--grey-600">alarm</i> <div class="mdl-slider__container__container"> <span class="mdl-slider__label mdl-color-text--grey-500">Alarm volume</span> <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0"/> </div> </div> <div class="mdl-form__group"> <i class="material-icons mdl-icon mdl-color-text--grey-600">ring_volume</i> <div class="mdl-slider__container__container"> <span class="mdl-slider__label mdl-color-text--grey-500">Ring volume</span> <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0"/> </div> </div> </div> </form> </div> </div>