Add Bootstrap styling to the signup form

This commit is contained in:
Preston Doman 2019-01-21 21:18:34 -08:00
parent c3611737e8
commit 77f99eb180

View file

@ -10,30 +10,46 @@
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
<title>Sign up</title> <title>Sign up</title>
</head> </head>
<body style="background-color: lightgreen"> <body>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<a class="navbar-brand" href="index.html">Reimbursinator</a> <a class="navbar-brand" href="index.html">Reimbursinator</a>
</nav> </nav>
<form class="signup"> <div class="container pt-5">
<div class="form-group"> <div class="row">
<h3>Sign up page</h3> <div class="col-sm-6 mx-auto">
<div class="card bg-light text-dark">
<div class="card-header">
<h3>Please Sign Up</h3>
</div>
<div class="card-body">
<form class="form signup" autocomplete="off" action="index.html">
<div class="form-group">
<label for="userName">Username:</label>
<input class="form-control" id="userName" type="text" name="username" minlength="4" size="10" required autofocus>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input class="form-control" type="email" id="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input class="form-control" type="password" id="password" minlength="4" size="10" required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input class="form-control" type="password" id="confirmPassword" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="card-footer">
Already registered? <a href="login.html">Log In</a>
</div>
</div>
</div>
</div> </div>
<div class="form-group"> </div>
User Name: <input type="text" id="userName" minlength="4" size="10" required="required" class="border"><br>
</div>
<div class="form-group">
Email: <input type="email" id="email" required="required" class="border"><br>
</div>
<div class="form-group">
Password: <input type="password" id="password" minlength="4" size="10" required="required" class="border"><br>
</div>
<div class="form-group">
Confirm Password: <input type="password" id="confirmPassword" class="border"><br>
</div>
<input type="submit" value="Submit" formaction="index.html" class="border">
<a class="nav-link" href="index.html">Return to main menu</a>
</form>
</body> </body>
<script src="js/signupPage.js"></script> <script src="js/signupPage.js"></script>
<!--Still need to check if user exist and if email exist test--> <!--Still need to check if user exist and if email exist test-->
</html> </html>