Student Registration Form Using HTML & CSS
Today I practiced creating a Student Registration Form using only HTML and CSS. This project helped me understand how forms work in web development and how to design a clean user interface using different input elements and styling techniques.
While building this form, I learned how to use:
- Text input fields
- Radio buttons
- Checkboxes
- Date input
- File upload option
- Textarea
- Dropdown menus
- Submit button
- Form alignment using CSS
The form includes important student details such as:
- First Name and Last Name
- Email Address
- Gender Selection
- Mobile Number
- Date of Birth
- Subjects
- Hobbies
- Picture Upload
- Current Address
- State and City Selection
I also practiced CSS concepts like:
- Spacing and alignment
- Border styling
- Input box design
- Font styling
- Button styling
- Layout arrangement
One of the interesting parts of this project was learning how different HTML form elements work together in a real-world registration form. I understood the importance of user-friendly design and proper form structure.
This small project improved my confidence in HTML and CSS basics. Step by step, I am understanding how websites are designed and how frontend development works.
Even though it is a beginner-level project, creating this form gave me practical experience and helped me learn by doing. I will continue practicing more projects to improve my frontend development skills.
HTML code of form
<body>
<header>Student Registration Form</header>
<main>
<hr>
<form action="">
<div class="name">
<label for="fname">Name</label>
<input id="fname" type="text" placeholder="First Name">
<input id="lname" type="text" placeholder="Last Name">
</div>
<div class="email">
<label for="Email">Email</label>
<input id="Email" type="text" placeholder="name@eg.com">
</div>
<div class="gender">
<label for="gender">Gender</label>
<input id="gender" type="radio" name="gender" value="Male">Male
<input id="gender2" type="radio" name="gender" value="Female">Female
<input id="gender3" type="radio" name="gender" value="Others">Others
</div>
<div class="mobile">
<label for="Mobile">Mobile(10 digits)</label>
<input id="Mobile" type="text" placeholder="Mobile Number">
</div>
<div class="DOB">
<label for="Dob">Date of Birth</label>
<input id="Dob" type="date" value="2026-05-28">
</div>
<div class="sub">
<label for="sub">Subjects</label>
<input id="sub" type="text">
</div>
<div class="Hob">
<label for="Hobbies">Hobbies</label>
<input id="Hobbies" type="checkbox" value="Sports">Sports
<input id="Hobbies2" type="checkbox" value="Reading">Reading
<input id="Hobbies3" type="checkbox" value="Music">Music
</div>
<div class="pics">
<label for="Pics">Picture</label>
<input id="Pics" type="file">
</div>
<div class="add">
<label for="cadd">Current Address</label>
<textarea name="" id="cadd">Current Address</textarea>
</div>
<div class="state">
<label for="">State and City</label>
<select name="state" id="state">
<option value="Select state">Select state</option>
<option value="Tamilnadu">Tamilnadu</option>
<option value="Kerala">Kerala</option>
<option value="Karanataka">Karanataka</option>
<option value="Andra Pradesh">Andra Pradesh</option>
</select>
<select name="City" id="City">
<option value="Select city">Select city</option>
<option value="">Chennai</option>
<option value="">Trichy</option>
<option value="">Madurai</option>
<option value="">Thanjavur</option>
</select>
</div>
<button type="submit">Submit</button>
</form>
</main>
</body>
CSS code of form
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
font-size: 25px;
width: 55vw;
padding: 25px 0;
}
body {
/* border: 1px solid; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: ;
/* height: 80vh; */
/* gap: 20px; */
}
body main form{
width: 55vw;
display: flex;
flex-direction: column;
gap: 15px;
}
/* form {
display: flex;
flex-direction: column;
/* gap: 30px; }
*/
label {
width: 25%;
display: inline-block;
}
input {
font-size: 18px;
padding: 4px;
border-radius: 6px;
border: 1px solid rgb(175,175,175);
}
#fname {
margin-right: 80px;
width: 30%;
}
#lname {
width: 30%;
}
#Email{
width: 70%;
}
#Mobile {
width: 70%;
}
#Dob {
width: 25%;
}
#gender,#gender2,#gender3{
margin-right: 7px;
}
#gender2,#gender3{
margin-left: 10px;
}
#sub {
width: 70%;
}
#Hobbies,#Hobbies2,#Hobbies3{
margin-right: 7px;
}
#Hobbies2,#Hobbies3{
margin-left: 10px;
}
#Pics {
width: 70%;
padding: 0;
}
#cadd {
width: 70%;
height: 120px;
border-radius: 6px;
}
.add {
display: flex;
align-items: center;
}
#state{
width: 30%;
padding: 7px;
margin-right: 20px;
font-size: 18px;
border-radius: 6px;
}
#City{
width: 30%;
padding: 7px;
font-size: 18px;
border-radius: 6px;
}
hr{
width: 95%;
margin-bottom: 20px;
}
#Pics::file-selector-button{
border: none;
border-right: 1px solid;
background-color: rgb(226, 224, 224);
height: 40px;
}
button {
background-color:#007bff;
color: white;
border-radius: 4px;
font-size: 15px;
padding: 11px ;
width: 5vw;
margin-left: 75%;
/* border: none; */
/* cursor: pointer; */
}
button:hover{
background-color:#1f69b8;
}
</style>
Output of the Form
Conclusion
Today’s learning was very useful for me because I created a complete student registration form from scratch using HTML and CSS. Before this, I only knew basic tags, but now I understand how forms are designed in real websites. While doing this project, I faced small challenges in alignment and styling, but solving them helped me learn better. This practice made me more interested in web development, and I feel motivated to create more projects in the future.
Top comments (1)
Nice explanation