HTML Code For Student Registration Form
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Amruta
In this tutorial we will show you the solution of HTML code for student registration form, today we will show you how we are able to create a student’s registration form in html and we will also use some CSS codes here to style html code.
In students form, there are some mandatory options like student’s name, father’s name, mother’s name, age, class, previous class grade, email id, phone number and password etc.
So, we will create a form with these credentials. Rest if you want some changes, then you can do. Let us understand codes.
Step By Step Guide On HTML Code For Student Registration Form :-
Now, here we are going to create a form in html and the rows are already specified which we are going to use in these. The CSS used here is External CSS. Now, let us understand the codes.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>home page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="inner"> <div class="welcome"> Student's Registration Form </div> <div class="registration_options"> <form action="" method="post"> <div class="rleft_body"> <label for=""> Enter name of Student </label> <br> <label for=""> Enter Student's Father name </label> <br> <label for=""> Enter Student's Mother name </label> <br> <label for=""> Enter Student's Age here </label> <br> <label for=""> Enter Student's class here </label> <br> <label for=""> Enter Student's grades of previous class </label> <br> <label for=""> Enter your email here </label> <br> <label for=""> Enter Student's phone number </label> <br> <label for=""> Enter your password here </label> </div> <div class="rright_body"> <input type="text" name="sname" id=""> <br><br> <input type="text" name="fname" id=""> <br><br> <input type="text" name="mname" id=""> <br><br> <input type="number" name="sage" id=""> <br><br> <input type="text" name="sclass" id=""> <br><br> <input type="text" name="sgrade" id=""> <br><br> <input type="email" name="email" id=""> <br><br> <input type="tel" name="snmbr" id=""> <br><br> <input type="password" name="password" id=""> <br><br> </div> <div class="registration_submit"> <input type="submit" value="Save" id="save" name="button"> </div> </form> </div> </div> </div> </body> </html>
CSS file: style.css
.main{
height: auto;
width: 100%;
}
.inner{
width: 80%;
height: 780px;
border: 1px solid white;
box-shadow: 0 0 10px black;
margin: 30px auto 30px auto;
}
.welcome{
text-align: center;
padding: 20px;
font-size: 40px;
font-family: cursive;
border-bottom: 1px solid black;
background-color: black;
color: white;
}
.rleft_body
{
width: 60%;
float: left;
margin-top: 90px;
}
.rleft_body label
{
font-size: 20px;
font-style: oblique;
padding: 100px;
line-height: 2.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.rright_body{
width: 40%;
float: left;
margin-top: 85px;
}
.rright_body input{
font-size: 20px;
font-style: oblique;
margin-top: 3px;
width: 80%;
border: none;
border-bottom: 1px solid black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.registration_submit{
clear: both;
height: auto;
text-align: center;
}
#save{
font-size: 25px;
background-color: black;
color: white;
padding: 5px 35px 5px 35px ;
border: none;
margin-top: 40px;
}
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page.
- In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, we create a registration form with the help of form tag and method used is post. Here, under form we create two div’s.
- One form left portion and other for right. In left side we create label tags, whereas in order side we create input tags only.
- After end of these divisions, we create a button to submit form.
- Rest job is done with the help of CSS which is written in external file and provide along html code here. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article we are able to create a student registration form or a registration form for student. I hope this tutorial on HTML code for student registration form helps you.
About Amruta
