The registration form serves as a crucial webpage on the site, enabling users to provide their personal information for content access. It stands out as one of the key forms on any website, gathering data like name, email, password, and various other details.
Developing a registration form is a fundamental aspect of web development as it enables users to register on a website and establish accounts. This comprehensive tutorial will demonstrate how to create a meticulously organized, user-friendly, and visually appealing registration form utilizing HTML and CSS.
Step 1: Preparing the HTML Document
Begin by establishing a fresh HTML file that features a basic structure inclusive of input fields designated for gathering personal information such as full name, email address, password, contact number, and gender.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Register Here</h2>
<form action="submit_registration.php" method="post">
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="firstname" placeholder="Enter First Name" required>
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lastname" placeholder="Enter Last Name" required>
<label for="email"><b>Email</b></label>
<input type="email" id="email" name="email" placeholder="Enter Email" required>
<label for="psw"><b>Password</b></label>
<input type="password" id="psw" name="password" placeholder="Enter Password" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" id="psw-repeat" name="psw-repeat" placeholder="Repeat Password" required>
<label for="mobile"><b>Contact</b></label>
<input type="text" id="mobile" name="mobile" maxlength="10" placeholder="Enter Contact Number" required>
<label for="gender"><b>Gender</b></label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
Step 2: CSS Style Addition
Enhance the visual appeal of your registration form by applying CSS to customize the form components for proper alignment. Start by defining the fundamental styles for the webpage, such as the background color and font type, to ensure the content is centered both vertically and horizontally within the viewport.
Styling of the container class will follow to enhance the appearance of the form, achieving a sleek and contemporary design featuring a white background, rounded edges, and a subtle shadow effect to add depth. Furthermore, customization will extend to the formatting of headings and labels inside the form, applying distinct colors and bold typography to enhance readability and elevate the overall user experience.
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}
.container h2 {
color: #4caf50;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}
button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
}
Step 3: Enhancing the Form with Extra Functionality
Enhancing the user experience of the form can involve introducing additional functionalities. One approach is to integrate password validation procedures that assess a password against defined security criteria. This could involve requesting a mix of alphabetic characters, numbers, and special symbols, along with establishing a minimum password length.
Integrating a checkbox that users need to select before moving forward can assist in safeguarding your website legally and informing users about its rules and policies. Additionally, including a confirmation message that displays after a form is successfully submitted is crucial for providing users with instant feedback confirming the successful completion of their registration process.
Below is a demonstration showcasing the potential implementation of these functionalities:
<form action="submit_registration.php" method="post">
<div class="container">
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="firstname" placeholder="Enter First Name" required>
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lastname" placeholder="Enter Last Name" required>
<label for="email"><b>Email</b></label>
<input type="email" id="email" name="email" placeholder="Enter Email" required>
<label for="psw"><b>Password</b></label>
<input type="password" id="psw" name="password" placeholder="Enter Password" pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$" title="Password must contain at least one number, one alphabet, one symbol, and be at least 8 characters long" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" id="psw-repeat" name="psw-repeat" placeholder="Repeat Password" required>
<label for="mobile"><b>Contact</b></label>
<input type="text" id="mobile" name="mobile" maxlength="10" placeholder="Enter Contact Number" required>
<label for="gender"><b>Gender</b></label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label>
<input type="checkbox" name="terms" required> I agree to the <a href="#">Terms and Conditions</a>
</label>
<button type="submit">Register</button>
</div>
</form>
By adhering to these guidelines, you will be able to develop a registration form that is operational, safe, and aesthetically pleasing. This form gathers necessary user details, verifies input, and guarantees a seamless user interaction. Whether you are establishing a compact personal enterprise or an extensive web application, mastering the art of crafting a registration form is a crucial expertise in web development.
Following are some different types of Forms
Snippet 1: Below is the code snippet illustrating the process of setting up a basic registration page.
<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label> Firstname </label> � � �
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label> �
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label> � � �
<input type="text" name="lastname" size="15"/> <br> <br>
<label>
Course :
</label>
<select>
<option value="Course">Course</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>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
Output:
Code 2 illustrates the process of developing a registration form that adjusts to different screen sizes by utilizing CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}
input[type=text], input[type=password], textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Student Registeration Form</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>
Course :
</label>
<select>
<option value="Course">Course</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>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Re-type Password</b></label>
<input type="password" placeholder="Retype Password" name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
</html>
Output: