Build a web application based on JSP and In it build a login form meeting the fo

ID: 3874044 • Letter: B

Question

Build a web application based on JSP and In it build a login form meeting the following requirement. – Verify all the inputs from the login page. If the input value is not allowed you will give a message to the user. – E.g.“username” : the sequence of a-z, A-Z , ‘_’, ‘-’ “password” : the sequence of digits“login” button • Build a register form meeting the requirements as follows: – Verify all the inputs from the login page. If the input value is not allowed you will give a message to the user. – E.g.(1)“Username” : the sequence of a-z, A-Z , ‘_’, ‘-’ (format verification required) (2)“Password”: the sequence of digits (format verification required) (3)“Confirm Password”: the sequence of digits . Only if the user input the same sequence of digits as password1. (format verification required) (4)“Birthday”: the format is as “yyyy-mm-dd” (format verification required) type in the date or use a date picker plugin (5)“Gender”: the form provides with two radio elements in one group. (6)“grade”: the form provides with a select element which has four options: freshman, sophomore, junior, senior (7)“major”: a select element (8)“class”: a select element (9) “email”: (format verification required) (10)“hobbies”: the form provides with some checkbox elements in one group Two buttons: one is “Register”, the other is “Cancel” And in it also build a table that hold the following columns: id, name, password, birthday, gender

Explanation / Answer

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: "Open Sans", Arial, Helvetica, Geneva, sans-serif;
font-size: 16px;
font-weight: 400;
height: auto !important;
height: 100%;
line-height: 1.6em;
min-height: 100%;
}

h2 {
color: rgb(34,34,34);
font-size: 2.2em;
font-weight: 200;
margin: 0 0 24px 0;
}

/*Start: Button styling*/
[class*='btn-'] {
border: none;
border-bottom: 2px solid rgba(0,0,0,.15);
border-top: 1px solid rgba(255,255,255,.15);
border-radius: 3px;
color: #fff;
display: inline-block;
font: -webkit-small-control;
font-size: .7em;
letter-spacing: 1px;
line-height: 140%;
padding: 10px 20px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}

.btn-minimal {
background-color: rgb(255,255,255);
border-radius: 0;
border: 1px solid rgb( 186, 186, 186 );
color: rgb( 186, 186, 186 );
text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}

.btn-minimal:hover {
background-color: #4195fc;
border: 1px solid rgba(0,0,0,.1);
color: rgb(255,255,255);
cursor: pointer;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.btn-minimal:active {
box-shadow: 0 1px 1px rgba(0,0,0,0.15) inset;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
/*End: Button styling*/

/*Start: Section styling*/
section#loginBox {
background-color: rgb(255,255,255);
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 4px rgba(0,0,0,0.2);
margin: 40px auto; /*aligns center*/
padding: 24px;
width: 500px;
}
/*End: Section styling*/

/*Start: Form styling*/
form.minimal label {
display: block;
margin: 6px 0;
}

form.minimal input[type="text"],
form.minimal input[type="email"],
form.minimal input[type="number"],
form.minimal input[type="search"],
form.minimal input[type="password"],
form.minimal textarea {
background-color: rgb(255,255,255);
border: 1px solid rgb( 186, 186, 186 );
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
display: block;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 14px;
margin: 6px 0 12px 0;
padding: 8px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
width: 90%;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}

form.minimal input[type="text"]:focus,
form.minimal input[type="email"]:focus,
form.minimal input[type="number"]:focus,
form.minimal input[type="search"]:focus,
form.minimal input[type="password"]:focus,
form.minimal textarea:focus,
form.minimal select:focus {
border-color: #4195fc;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;
color: rgb(0,0,0);
}

form.minimal input[type="text"]:invalid:focus,
form.minimal input[type="email"]:invalid:focus,
form.minimal input[type="number"]:invalid:focus,
form.minimal input[type="search"]:invalid:focus,
form.minimal input[type="password"]:invalid:focus,
form.minimal textarea:invalid:focus,
form.minimal select:invalid:focus {
border-color: rgb(248,66,66);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
}
/*End: Section styling*/
p {
color: rgba(0,0,0,.8);
font-size: .8em;
margin: 0 0 24px 0;
}
</style>
</head>
<body>
<section id="loginBox">
<h2>Login</h2>
<form method="post" class="minimal">
<label for="username">
Username:
<input type="text" name="username" id="username" placeholder="Username must contain only characters" pattern="[a-zA-Z-_]+" required="required" />
</label>
<label for="password">
Password:
<input type="password" name="password" id="password" placeholder="Password must contain only numbers (minimum 8 digits)" pattern="(?=^.{8,}$)[0-9]+" required="required" />
</label>
<button type="button" class="btn-minimal">Register</button>
<button type="submit" class="btn-minimal">Sign in</button>
</form>
</section>
</body>
</html>

<!DOCTYPE html>

h2 {
color: rgb(34,34,34);
font-size: 2.2em;
font-weight: 200;
margin: 0 0 24px 0;
}

.btn-minimal {
background-color: rgb(255,255,255);
border-radius: 0;
border: 1px solid rgb( 186, 186, 186 );
color: rgb( 186, 186, 186 );
text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}

.btn-minimal:hover {
background-color: #4195fc;
border: 1px solid rgba(0,0,0,.1);
color: rgb(255,255,255);
cursor: pointer;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.btn-minimal:active {
box-shadow: 0 1px 1px rgba(0,0,0,0.15) inset;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
/*End: Button styling*/

/*Start: Form styling*/
form.minimal label {
display: block;
margin: 6px 0;
}

#genderRadio > label {
float: left;
margin-right: 10px;
}

#genderRadio {
display: inline-block;
line-height: 1;
}
</style>
</head>
<body>
<section id="loginBox">
<h2>Register</h2>
<form method="post" class="minimal">
<label for="username">
Username:
<input type="text" name="username" id="username" placeholder="Username must contain only characters" pattern="[a-zA-Z-_]+" required="required" />
</label>
<label for="password">
Password:
<input type="password" name="password" id="password" placeholder="Password must contain only numbers (minimum 8 digits)" pattern="(?=^.{8,}$)[0-9]+" required="required" />
</label>
<label for="confirmPassword">
Confirm Password:
<input type="password" name="confirmPassword" id="confirmPassword" placeholder="Password must contain only numbers (minimum 8 digits)" pattern="(?=^.{8,}$)[0-9]+" required="required" />
</label>
<label for="birthday">
Birthday:
<input type="text" name="birthday" id="birthday" placeholder="yyyy-mm-dd" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" required="required" />
</label>
<div id="genderRadio">
<label for="genderM">
Male:
<input type="radio" name="gender" id="genderM" value="Male" />
</label>
<label for="genderF">
Female
<input type="radio" name="gender" id="genderF" value="Female" />
</label>
</div>
<label for="grade">
Grade:
<select id="grade">
<option>Freshman</option>
<option>Sophomore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</label>
<label for="major">
Major:
<select id="major">
<option>--/--</option>
</select>
</label>
<label for="class">
Class:
<select id="class">
<option>--/--</option>
</select>
</label>
<label for="email">
E-mail:
<input type="email" name="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" placeholder="abc@xyz.com">
</label>
<button type="button" class="btn-minimal">Cancel</button>
<button type="submit" class="btn-minimal">Register</button>
</form>
</section>
<script>
// Code to validate password matching for confirm password field
var password = document.getElementById("password")
, confirm_password = document.getElementById("confirmPassword");

function validatePassword() {
if (password.value != confirm_password.value) {
confirm_password.setCustomValidity("Passwords Don't Match");
} else {
confirm_password.setCustomValidity('');
}
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
</script>
</body>
</html>

Navigate

Build a visual basic program based on the following program requirements: Applic

Build a world where all the sentences are true using tarski\'s world: Translate

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Build a web application based on JSP and In it build a login form meeting the fo

Question

Explanation / Answer

Related Questions

Navigate