Basic Registration Form in HTML and CSS
<html>
<head>
<title>Registration</title>
<style>
.header{
font-family:
Segoe Ui;
font-size:
30px;
padding:
5px;
font-weight:
700;
color:
gainsboro;
}
.footer{
font-family: cursive;
font-size:
large;
font-weight:
bold;
text-shadow:
0px 0px 5px mediumvioletred;
}
.form{
font-family:
Segoe Ui;
font-size:
14px;
font-weight:
500;
}
.form-label{
padding:
2% 0 2% 10%;
vertical-align:
top;
width:
30%;
}
.form-control{
padding:10px
20px;
vertical-align:top;
}
.input-control{
width:98%;
font-family:
Segoe Ui;
font-size:
14px;
padding:5px;
border:1px
solid black;
background-color:
transparent;
}
.input-control:hover{
border: 1px solid black;
box-shadow:
0px 2px 18px white;
}
.form-button{
width:47%;
font-family:
Segoe Ui;
font-size:
16px;
font-weight:
500;
padding:5px;
background-color:#4CAF50;
border:1px
solid black;
color:
#ffffff;
border-radius:
50px 50px;
}
.form-CheckBox:hover{
box-shadow: 0px 2px 18px white;
}
.form-button:hover{
box-shadow:
0px 2px 18px white;
}
</style>
<script>
function
onReset(){
//Reset
textbox
document.getElementById("txtFirstName").value
= "";
document.getElementById("txtLastName").value
= "";
document.getElementById("txtContactNumber").value
= "";
document.getElementById("txtEmailId").value
= "";
//Reset
radio buttons
var
genders = document.getElementsByName("gender");
for(var
i=0; i<genders.length; i++)
genders[i].checked
= false;
//Reset
Select Option List
document.getElementById('selectEducation').selectedIndex
= 0;
//Reset
CheckBox
var
CheckBoxHobbies = document.getElementsByName("checkHobbies");
for(var
i=0; i<CheckBoxHobbies.length; i++)
CheckBoxHobbies[i].checked
= false;
}
function
onRegister(){
var
FirstName = document.getElementById("txtFirstName").value;
var
LastName = document.getElementById("txtLastName").value;
var
ContactNumber = document.getElementById("txtContactNumber").value;
var
EmailID = document.getElementById("txtEmailId").value;
var
SelectedEducation = document.getElementById('selectEducation').selectedIndex;
var
GenderSelected = false;
var
genders = document.getElementsByName("gender");
for(var
i=0; i<genders.length; i++){
if(genders[i].checked
== true)
GenderSelected
= true;
}
if(FirstName
!= '' && LastName != '' && ContactNumber != '' &&
EmailID != '' && SelectedEducation != "0" &&
GenderSelected)
alert('Registration
Successfully!!');
}
</script>
</head>
<body
style="background:linear-gradient(141deg, #2C3E50 0%, #1fc8db 51%, #4CA1AF 75%);">
<center>
<span
class="header">Registration Form</span>
<hr/><br/>
<table
width="50%">
<tr>
<td
class="form form-label">First Name</td>
<td
class="form form-control">
<input
id="txtFirstName" type="text"
class="input-control" placeholder="Enter First Name"
Title="Enter First Name" required/>
</td>
</tr>
<tr>
<td
class="form form-label">Last Name</td>
<td
class="form form-control">
<input
id="txtLastName" type="text"
class="input-control" placeholder="Enter Last Name"
Title="Enter Last Name" required/>
</tr>
<tr>
<td
class="form form-label">Contact Number</td>
<td
class="form form-control">
<input
id="txtContactNumber" type="Number"
class="input-control" placeholder="Enter Contact Number"
Title="Enter Contact Number" required/>
</td>
</tr>
<tr>
<td
class="form form-label">Email ID</td>
<td
class="form form-control">
<input
id="txtEmailId" type="email"
class="input-control" placeholder="Enter Email ID"
Title="Enter Email ID" required/>
</td>
</tr>
<tr>
<td
class="form form-label">Gender</td>
<td
class="form form-control">
<input
type="radio" class="form-CheckBox" name="gender"
Title="Select Gender">Male</input>
<input
type="radio" class="form-CheckBox" name="gender"
Title="Select Gender">Female</input>
</td>
</tr>
<tr>
<td
class="form form-label">Education</td>
<td
class="form form-control">
<select
id="selectEducation" class="input-control"
Title="Select Education">
<option
value="0">Select Education</option>
<option
value="SSC">SSC</option>
<option
value="HSC">HSC</option>
<option
value="Graduate">Graduate</option>
<option
value="Post Graduate">Post Graduate</option>
</select>
</td>
</tr>
<tr>
<td
class="form form-label">Hobbies</td>
<td
class="form form-control">
<input
type="checkbox" class="form-CheckBox"
name="checkHobbies" value="Reading" Title="Select
Hobbies">Reading</input>
<input
type="checkbox" class="form-CheckBox"
name="checkHobbies" value="Cooking" Title="Select
Hobbies">Cooking</input>
<br/><br/>
<input
type="checkbox" class="form-CheckBox"
name="checkHobbies" value="Dancing" Title="Select
Hobbies">Dancing</input>
<input
type="checkbox" class="form-CheckBox"
name="checkHobbies" value="Swimming" Title="Select
Hobbies">Swimming</input>
</td>
</tr>
<tr>
<td
class="form form-label"></td>
<td
class="form form-control">
<br/><br/>
<input
type="button" class="form-button" value="Reset"
onclick="onReset()" Title="Reset All Fields"/>
<input
type="button" class="form-button"
value="Register" onclick="onRegister()" Title="Register Now"/>
</td>
</tr>
</table>
<center>
<br/><br/><br/><br/>
<span
class="footer">
<marquee>This is a sample registration form,
all contents and styles used for education purpose
only</marquee>
</span>
</body>
</html>
