html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML CSS Register Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="signup-form" action="/register" method="post">
<!-- form header -->
<div class="form-header">
<h1>Registration for internships.</h1>
</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>
<!-- 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>
<label>
Qualification :
</label>
<select>
<option value="Course">Qualification</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<!-- 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>
</div>
</div>
Domain :
</label>
<select>
<option value="Domain">Domain</option>
<option value="Frontend">Frontend</option>
<option value="Backend">Backend</option>
<option value="Fullstack">Fullstack</option>
<option value="IOS">IOS</option>
<option value="Android">Android</option>
<option value="Tech support">Tech support</option>
<option value="Mangement">Management</option>
<option value="Content">Content</option>
</select>
<!-- Source of Income and Income -->
<div class="horizontal-group">
<div class="form-group left" >
<label class="label-title"> Earlier applied for an internship</label>
<select class="form-input" id="level" >
<option value="B">Yes</option>
<option value="I">NO</option>
<option value="A"></option>
</select>
</div>
<div class="form-group right">
<div class="form-group">
<label for="choose-file" class="label-title">Write your reason to grab this internship.</label>
<textarea class="form-input" rows="4" cols="50" style="height:auto"></textarea>
</div>
</div>
<label for="experience" class="label-title">Expected Stipend</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>
</div>
<!-- form-footer -->
<div class="form-footer">
<span>* required</span>
<button type="submit" class="btn">Register</button>
</div>
</form>
<!-- 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>
</body>
</html>
Css:
/---------------------------------------/
/* Font /
/---------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
/---------------------------------------/
/* Register Form /
/---------------------------------------*/
body {
font-family:Arial;
background: -webkit-linear-gradient(to right, #155799, #159957);
background: linear-gradient(to right, #155799, #159957);
color:whitesmoke;
}
}
.signup-form {
font-family: "Roboto", sans-serif;
width:650px;
margin:30px auto;
background:linear-gradient(to right, #ffffff 0%, #fafafa 50%, #ffffff 99%);
border-radius: 10px;
}
/---------------------------------------/
/* Form Header /
/---------------------------------------*/
.form-header {
background-color: #EFF0F1;
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:#666;
}
.form-group{
margin-bottom:20px;
}
.form-body .label-title {
color:#1BBA93;
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: #333333;
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: 17px;
position: relative;
top:-8px;
}
::-webkit-input-placeholder {
color:#d9d9d9;
}
/---------------------------------------/
/* Form Footer /
/---------------------------------------*/
.signup-form .form-footer {
background-color: #EFF0F1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:10px 40px;
text-align: right;
border-top: 1px solid #cccccc;
clear:both;
}
.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: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
.btn:hover {
background-color: #169c7b;
color:lightgreen;
}
rcoemnd/pen/vYayoBZ %}
Top comments (0)