"Sign Up Form"
Bootstrap 3.3.0 Snippet by harunpehlivan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css'> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link href="https://fonts.googleapis.com/css?family=Caveat:400,700" rel="stylesheet"> <body ng-controller="RegisterCtrl" ng-app="myApp"> <div class="container"> <div id="signup"> <div class="signup-screen col-sm-6 col-sm-offset-3"> <div class="space-bot text-center"> <h1>Sign up</h1> <div class="divider"></div> </div> <form class="form-register" method="post" name="register" novalidate> <div class="input-field col s6"> <input id="first-name" type="text" class="validate" required> <label for="first-name">First Name</label> </div> <div class="input-field col s6"> <input id="last-name" type="text" class="validate" required> <label for="last-name">Last Name</label> </div> <div class="input-field col s6"> <input id="email" type="email" name="email" ng-model="email" class="validate" required> <label for="email">Email</label> </div> <p class="alert alert-danger" ng-show="form-register.email.$error.email">Your email is invalid.</p> <div class="input-field col s6"> <input id="password" type="password" name="password" ng-model="password" ng-minlength='6' class="validate" required> <label for="password">Password</label> </div> <p class="alert alert-danger" ng-show="form-register.password.$error.minlength || form.password.$invalid">Your password must be at least 6 characters.</p> <div class="space-top text-center"> <button ng-disabled="form-register.$invalid" class="waves-effect waves-light btn done"> <i class="material-icons left">done</i> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank">Done</a> </button> <button type="button" class="waves-effect waves-light btn cancel"> <i class="material-icons left">clear</i>Cancel </button> </div> </form> </div> </div> </div> </body> <script src='http://code.jquery.com/jquery-2.1.4.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>
@import url('https://fonts.googleapis.com/css?family=Caveat:400,700'); body { min-height:100%; background:url(http://blog.jobs24.co.uk/wp-content/uploads/2014/06/resign-letter.jpg); font-family: 'Caveat', cursive; background-size: cover; background-attachment: fixed; } .text-center{ text-align: center; } .space-bot{ margin-bottom: 35px; } .space-top{ margin-top: 35px; } /* Title */ h1 { color: white; font-family: 'Roboto'; text-transform: uppercase; font-weight: 900; font-size: 25px !important; text-align: center; font-family: 'Caveat', cursive; } /* Sign Up */ .container { max-width: 400px; max-height: 100px; margin-top: 10px; } .alert-danger{ text-align: center; } .signup-screen { padding: 20px; padding-bottom: 40px; border-radius: 5px; background-color: #2c3940; box-shadow: 0 1px 6px rgba(0,0,0,.3); color: white; } .btn{ border-radius: 2px; } .cancel{ background-color: #df405a; } .done{ background-color: #5CAB7D; } .done:hover{ background-color: #6dc793; } .done:focus{ background-color: #6dc793; } .cancel:hover{ background-color: #f0435f; } .cancel:focus{ background-color: #f0435f; } .input-group { width:100%; } .input-group .ng-invalid { border: 2px solid #e74c3c; border-radius: 3px; } /* Error Box */ .alert{ padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 2px; border-color: #e85a71; background-color: #e85a71; color: white; } .help-block { font-size: 12px; color: white } .signup-screen { margin-bottom: 10%; margin-top: 10%; }
var myApp = angular.module("myApp", []); myApp.controller("RegisterCtrl", function ($scope) { });

Related: See More

Argon Design System
Bootstrap 4.11 sign in form
Sign up form [Validations NOT ACHIEVED]
sign up 2

Questions / Comments: