Scribd
Upload
39 views

US001-Customer Registration UI

Customer registration page in UI.

Uploaded by

amrutha Kumar0030
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

US001-Customer Registration UI

Customer registration page in UI.

Uploaded by

amrutha Kumar0030
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

US001-Customer Registration UI

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<h2>Enter below details for registering</h2>
<form id="registerationForm">
<label for="ssn">SSN ID:</label>
<input type="text" id="ssn" name="ssn" required>

<label for="fname">First Name:</label>


<input type="text" id="fname" name="fname" required>

<label for="lname">Last Name:</label>


<input type="text" id="lname" name="lname" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="text" id="password" name="password" required>

<label for="confirmPassword">Confirm Password:</label>


<input type="text" id="confirmPassword" name="confirmPassword"
required>

<label for="address">Address:</label>
<input type="text" id="address" name="address" required>

<label for="contact">Contact Number:</label>


<input type="text" id="contact" name="contact" required>

<button type="submit" id="Submit">Submit!</button>

</form>

<script>
// alert("hello");

document.getElementById("registerationForm").addEventListener("submit",
function(event){
event.preventDefault();
console.log("sfsfsdf")
var ssn = document.getElementById("ssn").value;
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var confirmPassword =
document.getElementById("confirmPassword").value;
var address = document.getElementById("address").value;
var contact = document.getElementById("contact").value;
var phoneno =/^\d{10}$/;

if(password!=confirmPassword)
{
//alert("hi")
alert("Password do not match!");
return;
}
if(!contact.match(phoneno))
{
alert("Please enter correct Contact Number");
return;
}
else{
alert("You've successfully registered!");
}
});
</script>

<style>
body{
margin:0;
padding: 0;
font-family: Arial, Sans-Serif;
background-image: linear-gradient(#BED7DC, #F1EEDC);
}
h2{
text-align: center;
margin-top:50px
}
form{
max-width: 400px;
margin: 50px auto;
padding: 20px;
background: #fff;
border: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"], input[type="email"], input[type="password"],


textarea{
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 1px;
}
button[type="submit"]{
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button[type="submit"]:hover{
background-color: #45a049;
}
</style>
</body>
</html>

Output:

Email :
Contact Number:

Password do not match


Successfully registered:

You might also like