Program Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Registeration Form</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
@import url('https://www.nirsoftcaresolution.com/css?family=Roboto');
body {
background:linear-gradient(180deg, red, white);
}
.signup-form {
font-family: "Roboto", sans-serif;
width:650px;
margin:30px auto;
background-color: red;
border-radius: 10px;
}
.form-header {
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.form-header h1 {
font-size: 30px;
text-align:center;
color:#666;
padding:20px 0;
border-bottom:1px solid #cccccc;
}
/*---------------------------------------*/
/* Form Body */
/*---------------------------------------*/
.form-body {
padding:10px 40px;
color:blue;
}
.form-group{
margin-bottom:20px;
}
.form-body .label-title {
color:black;
font-size: 17px;
font-weight: bold;
}
.form-body .form-input {
font-size: 17px;
box-sizing: border-box;
width: 100%;
height: 34px;
padding-left: 10px;
padding-right: 10px;
color: Blue;
text-align: left;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.horizontal-group .left{
float:left;
width:49%;
}
.horizontal-group .right{
float:right;
width:49%;
}
input[type="file"] {
outline: none;
cursor:pointer;
font-size: 17px;
}
#range-label {
width:15%;
padding:5px;
background-color: #1BBA93;
color:white;
border-radius: 5px;
font-size: 20px;
position: relative;
top:-10px;
}
::-webkit-input-placeholder {
color:#d9d9d9;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.form-footer {
clear:both;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.signup-form .form-footer {
background-color: red;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:10px 40px;
text-align: right;
border-top: 1px solid #cccccc;
}
.form-footer span {
float:left;
margin-top: 10px;
color:#999; font-style: italic;
font-weight: thin;
}
.btn {
display:inline-block;
padding:10px 20px;
background-color: black;
font-size:20px;
border:none;
border-radius:5px;
color:white;
cursor:pointer;
align:center;
}
.btn:hover {
background-color: lime;
color:magenta;
align:center;
}
</style>
<script type="text/javascript">
<!-- Script for range input label -->
<script>
var rangeLabel = document.getElementById("range-label");
var experience = document.getElementById("experience");
function change() {
rangeLabel.innerText = experience.value + "K";
}
</script>
</head>
<body>
<form class="signup-form" action="/register" method="post">
</form>
<form class="signup-form" action="/register" method="post">
<!-- form header -->
<div class="form-header">
</div>
<!-- form body -->
<div class="form-body">
</div> <!-- form footer -->
<div class="form-footer">
</div>
</form>
<!-- form header -->
<div class="form-header">
<font color="blue">
<h1>New User Registration Form</h1>
</blue>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="firstname" class="label-title">First name *</label>
<input type="text" id="firstname" class="form-input" placeholder="Enter your first name" required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Last name</label>
<input type="text" id="lastname" class="form-input" placeholder="Enter your last name" />
</div>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="Enter your email" required="required">
</div>
<!-- Passwrod and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
</div>
</div>
<!-- Gender and Hobbies -->
<div class="horizontal-group">
<div class="form-group left">
<label class="label-title">Gender:</label>
<div class="input-group">
<label for="male">
<input type="radio" name="gender" value="male" id="male"> Male</label>
<label for="female">
<input type="radio" name="gender" value="female" id="female"> Female</label>
<label for="transender">
<input type="radio" name="gender" value="Transender" id="transender"> Transender</label>
</div>
</div>
<div class="form-group right">
<label class="label-title">Hobbies</label>
<div>
<label>
<input type="checkbox" value="Web">Music</label>
<label>
<input type="checkbox" value="iOS">Sports</label>
<label>
<input type="checkbox" value="Andriod">Travel</label>
<label>
<input type="checkbox" value="Game">Movies</label>
</div>
</div> </div>
<!-- Source of Income and Income Amount -->
<div class="horizontal-group">
<div class="form-group left" >
<label class="label-title">Source of Income</label>
<select class="form-input" id="level" >
<option value="B">Employed</option>
<option value="I">Self-employed</option>
<option value="A">Unemployed</option>
</select>
</div> <div class="form-group right">
<label for="experience" class="label-title">Income</label>
<input type="range" min="20" max="100" step="5" value="0" id="experience" class="form-input" onChange="change();" style="height:28px;width:78%;padding:0;">
<span id="range-label">20K</span>
</div>
</div>
<!-- Profile picture and Age -->
<div class="horizontal-group">
<div class="form-group left" >
<label for="choose-file" class="label-title">Upload Profile Picture</label>
<input type="file" id="choose-file" size="80">
</div> <div class="form-group right">
<label for="experience" class="label-title">Age</label>
<input type="number" min="18" max="80" value="18" class="form-input">
</div>
</div>
<!-- Bio -->
<div class="form-group">
<label for="choose-file" class="label-title">Bio</label>
<textarea class="form-input" rows="4" cols="50" style="height:auto"></textarea>
</div>
<br><br>
<!-- form footer -->
<div class="form-footer">
<center>
<span>* required</span>
<button type="submit" class="btn">Create</button>
<center>
</div>
</body>
</html>