Meta

<!
DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>User Registration Form</title>
</head>
<body style="
background: linear-gradient(90deg, rgb(36, 0, 0) 0%, rgb(154, 14, 51) 35%, rgb(255, 0, 17) 100%);
font-family: 'Poppins', sans-serif;
margin: 0;
box-sizing: border-box;
">
<div class="container-fluid" style="height: 100%;">
<form class="mx-auto" id="registrationForm" style="
border-radius: 20px;
margin-top: 100px !important;
width: 50% !important;
background-color: white !important;
padding: 50px;
">
<h2 class="text-center" style="

text-align: center;
font-weight: bold;
font-size: 2rem !important;
">Consumer Registration</h2>
<div class="row">
<div class="col-md-6 mb-3" style="
text-align: left;
">
<label for="selectTitle" class="form-label" style="
font-weight: 800 !important;
">Title</label>
<select class="form-select" id="selectTitle" required style="
width: 100%;
border: none;
border-radius: 4px 4px 0 0;
background-color: rgba(255, 255, 255, 0.8);
padding: 8px;
color: rgba(0, 0, 0, .87);
">
<option value="" disabled selected>Select Title</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select>
</div>
text-align: left;
">
<label for="inputCustomerName" class="form-label" style="
">Customer Name</label>
<input type="text" class="form-control" id="inputCustomerName" placeholder="Enter

Customer Name" maxlength="50" required style="
width: 100%;
color: rgba(0, 0, 0, .87);
border-bottom-color: rgba(0, 0, 0, .42);
box-shadow: none !important;
border: none;
border-bottom: 1px solid;
">
</div>
</div>
<div class="row">
text-align: left;
">
<label for="selectCountryCode" class="form-label" style="
">Country Code</label>
<select class="form-select" id="selectCountryCode" style="
width: 100%;
border: none;
background-color: rgba(255, 255, 255, 0.8);
padding: 8px;
color: rgba(0, 0, 0, .87);
"required >
<option value="" disabled selected>Select Country Code</option>
<option value="+1">+1 (United States)</option>
<option value="+44">+44 (United Kingdom)</option>
<option value="+91">+91 (India)</option>
</select>
</div>
text-align: left;
">
<label for="inputMobileNumber" class="form-label" style="
">Mobile Number</label>
<input type="tel" class="form-control" id="inputMobileNumber" placeholder="Enter Mobile

Number" pattern="[0-9]{10}" required style="
width: 100%;
color: rgba(0, 0, 0, .87);
border: none;
">
</div>
</div>
<div class="row">

text-align: left;
">
<label for="inputEmail" class="form-label" style="
">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter Email" required

style="
width: 100%;
color: rgba(0, 0, 0, .87);
border: none;
">
</div>
text-align: left;
">
<label for="inputUserId" class="form-label" style="
">User ID</label>
<input type="text" class="form-control" id="inputUserId" placeholder="Enter User ID"

minlength="5" maxlength="20" required style="
width: 100%;
color: rgba(0, 0, 0, .87);
border: none;
">
</div>
</div>
<div class="row">
text-align: left;
">
<label for="inputPassword" class="form-label" style="
">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Enter

Password" maxlength="30" required style="
width: 100%;
color: rgba(0, 0, 0, .87);
border: none;
">
</div>
text-align: left;
">
<label for="inputConfirmPassword" class="form-label" style="

">Confirm Password</label>
<input type="password" class="form-control" id="inputConfirmPassword"

placeholder="Confirm Password" maxlength="30" required style="
width: 100%;
color: rgba(0, 0, 0, .87);
border: none;
">
</div>
</div>
<div class="row">
text-align: center;
">
<button type="submit" class="btn btn-primary mt-4" style="
width: 100%;
border: none;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(75,14,154,1) 35%,

rgba(0,212,255,1) 100%);
">Register</button>
</div>
text-align: center;
">
<button type="reset" class="btn btn-primary mt-4" style="
width: 100%;
border: none;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(75,14,154,1) 35%,

rgba(0,212,255,1) 100%);
">Reset</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
alert('Consumer Registration successful.');
});
</script>
</body>
</html>

Meta

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Meta

Uploaded by

Copyright:

Available Formats

<!

<html lang="en" style="height: 100%;">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

<title>User Registration Form</title>

font-family: 'Poppins', sans-serif;

<div class="container-fluid" style="height: 100%;">

<form class="mx-auto" id="registrationForm" style="

margin-top: 100px !important;

width: 50% !important;

background-color: white !important;

<h2 class="text-center" style="

font-size: 2rem !important;

<div class="col-md-6 mb-3" style="

<label for="selectTitle" class="form-label" style="

font-weight: 800 !important;

<select class="form-select" id="selectTitle" required style="

border-radius: 4px 4px 0 0;

background-color: rgba(255, 255, 255, 0.8);

color: rgba(0, 0, 0, .87);

<option value="" disabled selected>Select Title</option>

<div class="col-md-6 mb-3" style="

font-weight: 800 !important;

<input type="text" class="form-control" id="inputCustomerName" placeholder="Enter

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

<div class="col-md-6 mb-3" style="

<label for="selectCountryCode" class="form-label" style="

font-weight: 800 !important;

<select class="form-select" id="selectCountryCode" style="

border-radius: 4px 4px 0 0;

background-color: rgba(255, 255, 255, 0.8);

<option value="" disabled selected>Select Country Code</option>

<option value="+1">+1 (United States)</option>

<option value="+44">+44 (United Kingdom)</option>

<option value="+91">+91 (India)</option>

<div class="col-md-6 mb-3" style="

<label for="inputMobileNumber" class="form-label" style="

font-weight: 800 !important;

<input type="tel" class="form-control" id="inputMobileNumber" placeholder="Enter Mobile

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

<div class="col-md-6 mb-3" style="

<label for="inputEmail" class="form-label" style="

font-weight: 800 !important;

<input type="email" class="form-control" id="inputEmail" placeholder="Enter Email" required

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

<div class="col-md-6 mb-3" style="

<label for="inputUserId" class="form-label" style="

font-weight: 800 !important;

<input type="text" class="form-control" id="inputUserId" placeholder="Enter User ID"

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;