How to Create Registration Form Using HTML || CSS
HTML // CSS Free Source Code :-
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #afb3b3;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #8f4003;
padding: 20px;
border-radius: 8px;
}
h1 {
text-align: center;
color: #eeeaea;
}
.row {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
}
.col {
flex: 1;
padding: 5px;
}
label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="tel"],
input[type="email"] {
width: 100%;
padding: 8px;
border: 1px solid #cccccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
@media (max-width: 768px) {
.col {
flex-basis: 100%;
}
}
@media (max-width: 480px) {
.container {
padding: 10px;
}
input[type="submit"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Registration Form</h1>
<form id="registrationForm">
<div class="row">
<div class="col">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="col">
<label for="middleName">Middle Name:</label>
<input type="text" id="middleName" name="middleName">
</div>
<div class="col">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
</div>
</div>
<div class="row">
<div class="col">
<label for="fatherName">Father's Name:</label>
<input type="text" id="fatherName" name="fatherName" required>
</div>
<div class="col">
<label for="motherName">Mother's Name:</label>
<input type="text" id="motherName" name="motherName" required>
</div>
</div>
<div class="row">
<div class="col">
<label for="country">Country:</label>
<input type="text" id="country" name="country" required>
</div>
<div class="col">
<label for="state">State:</label>
<input type="text" id="state" name="state" required>
</div>
<div class="col">
<label for="block">Block:</label>
<input type="text" id="block" name="block" required>
</div>
</div>
<div class="row">
<div class="col">
<label for="mobileNumber">Mobile Number:</label>
<input type="tel" id="mobileNumber" name="mobileNumber" required>
</div>
<div class="col">
<label for="whatsappNumber">WhatsApp Number:</label>
<input type="tel" id="whatsappNumber" name="whatsappNumber" required>
</div>
</div>
<div class="row">
<div class="col">
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="col">
<label for="category">Category:</label>
<input type="text" id="category" name="category" required>
</div>
</div>
<div class="row">
<div class="col">
<label for="villageName">Village Name:</label>
<input type="text" id="villageName" name="villageName" required>
</div>
<div class="col">
<label for="district">District:</label>
<input type="text" id="district" name="district" required>
</div>
<div class="col">
<label for="pincode">Pincode:</label>
<input type="text" id="pincode" name="pincode" required>
</div>
</div>
<div class="row">
<div class="col">
<label for="qualification">Qualification:</label>
<input type="text" id="qualification" name="qualification" required>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
.png)
Social Plugin