"Onsen-UI-Mobile-SignUp"
Bootstrap 3.3.0 Snippet by vara24

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 ----------> <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="../onsen-css-components-blue-basic-theme.css"> <link rel="stylesheet" href="signup.css"> <script src="lib/onsen/js/onsenui.js"></script> </head> <body> <ons-page> <ons-toolbar> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center">Sign up</div> <ons-button class="right" modifier="quiet">Login</ons-button> </ons-toolbar> <div class="formarea" > <div class="form-row"> <input type="text" class="text-input--underbar width-half" placeholder="First" value=""> <input type="text" class="text-input--underbar width-half" placeholder="Last" value="" style="border-width-left: 1px"> </div> <div class="form-row"> <input type="text" class="text-input--underbar width-full" placeholder="Email" value=""> </div> <div class="form-row"> <input type="text" class="text-input--underbar width-full" placeholder="Phone" value=""> </div> <div class="form-row"> <input type="password" class="text-input--underbar width-full" placeholder="Password" value=""> </div> <div class="lucent" > <p class="note">Password - 6 characters or more</p> </div> <div class="vspc form-row"> <ons-button modifier="large--cta">Sign up</ons-button> </div> </div> </ons-page> </body> </html>
.form-row { margin: 4px; } .width-full { width: 100%; } .width-half { width: 48%; } .lucent { opacity: 0.4; } .note { margin: 12px 8px; font-size: 13px; } .vspc { margin-top: 20px; } .formarea { width: 90%; margin: 50px auto 0px auto; } input[type=text], input[type=password] { height: 40px; padding-top: 10px; padding-bottom: 10px; }

Related: See More

Vue Argon Design System
Signup form
BS4 Login, Register FORM + Mobile
Simple Login / Signup form with validation

Questions / Comments: