27/01/2023

Student Registration Form in HTML with CSS | Completely Free

Design Student Registration Form in HTML with CSS using Table in HTML. A simple HTML Code for Student Registration Form that contains all necessary fields in the student registration form. Take an example, First-Name, Last-Name, EmailID, Mobile Number, Address, Hobbies, Course, Gender, Date-of-Birth, etc.

Create a beautiful Student Registration Form in HTML with CSS, also validate student registration form in HTML(Hypertext markup language) and CSS(Cascading style sheets). The student registration form also contains the SUBMIT and RESET buttons if any student enters the wrong data while filling the registration form so he/she can reset the form in HTML.

Create Student Registration Form in HTML

 
So In this problem, we have a Student Registration Form in HTML with CSS, as we all know that registration form contains some fields that are the First Name, Last Name, Email ID, Mobile Number, Address, Hobbies, Course, Gender, Date of Birth, City, District, State / Province, and Pincode. So basically, we have to create all these fields where the user can store the information. See the Explanation section for table tags in detail.

Student Registration Form in HTML and CSS

HTML Table Tags to Create Student Registration Form

 
Here are some basic tags that are used on the table to create a Student Registration Form in HTML with CSS, with the help of these Tags you can create a full Student Registration Form. After the explanation section tries to modify the code with your code, this will help you to find the error and modification value that you change. If you are looking for any Certification, Everything you need to prepare, learn & pass your certification exam here easily.


<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption

Tips: Always create a folder for a separate web page file for avoiding unnecessary mixing and irritation.

Below the internal code is written in CSS. You can free download this HTML and CSS code for personal use. The HTML code for Student Registration Form download link is at the end of this article.

Student Registration Form in HTML with CSS


Here is the full source code of the Student Registration Form in HTML with CSS. You can download this HTML Code for Student Registration Form and use it for creating a beautiful webpage.


<html>
<head>
<title>Student Registration Form Using Table in HTML</title>
<style>
   
h2{
 font-family: Sans-serif; 
 font-size: 24px;     
 font-style: normal; 
 font-weight: bold; 
 color: blue;
 text-align: center; 
 text-decoration: underline
}
table{
 font-family: verdana; 
 color:white; 
 font-size: 16px; 
 font-style: normal;
 font-weight: bold;
 background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);  
 border-collapse: collapse; 
 border: 4px solid #000000;
 border-style: dashed;
  
}
table.inner{
 border: 10px
}
input[type=text], input[type=email], input[type=number]{
 width: 50%;
 padding: 6px 12px;
 margin: 5px 0;
 box-sizing: border-box;
}
input[type=submit], input[type=reset]{
 width: 15%;
 padding: 8px 12px;
 margin: 5px 0;
 box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Student Registration Form Using Table in HTML</h3>
<table align="center" cellpadding = "10">
<!--------------------- First Name ------------------------------------------>
<tr>
<td>First Name</td>
<td><input type="text" name="FirstName" maxlength="50" placeholder="Ghanendra" />
(Max 50 Characters Allowed)
</td>
</tr>
<!------------------------ Last Name --------------------------------------->
<tr>
<td>Last Name</td>
<td><input type="text" name="LastName" maxlength="50" placeholder="Yadav"/>
(Max 50 Characters Allowed)
</td>
</tr>
<!-------------------------- Email ID ------------------------------------->
<tr>
<td>Email ID</td>
<td><input type="email" name="EmailID" maxlength="100" placeholder="yghanendra@gmail.com"/></td>
</tr>
<!-------------------------- Mobile Number ------------------------------------->
<tr>
<td>Mobile Number</td>
<td>
<input type="text" name="MobileNumber" maxlength="10" placeholder="7842xxxxxx"/>
(10 Digits Allowed)
</td>
</tr>
<!---------------------- Gender ------------------------------------->
<tr>
<td>Gender</td>
<td>
<input type="radio" name="Gender" value="Male" />
Male
<input type="radio" name="Gender" value="Female" />
Female
</td>
</tr>
<!--------------------------Date Of Birth----------------------------------->
<tr>
<td>Date of Birth(DOB)</td>
<td>
<select name="BirthDay" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="BirthdayMonth" id="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan(1)</option>
<option value="February">Feb(2)</option>
<option value="March">Mar(3)</option>
<option value="April">Apr(4)</option>
<option value="May">May(5)</option>
<option value="June">Jun(6)</option>
<option value="July">Jul(7)</option>
<option value="August">Aug(8)</option>
<option value="September">Sep(9)</option>
<option value="October">Oct(10)</option>
<option value="November">Nov(11)</option>
<option value="December">Dec(12)</option>
</select>
<select name="BirthdayYear" id="Birthday_Year">
<option value="-1">Year:</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
</td>
</tr>
<!------------------------- Address ---------------------------------->
<tr>
<td>Address<br /><br /><br /></td>
<td><textarea name="Address" rows="10" cols="50"></textarea></td>
</tr>
<!-------------------------- City ------------------------------------->
<tr>
<td>City</td>
<td><input type="text" name="City" maxlength="50" placeholder="Bangalore"/>
(Max 50 Characters Allowed)
</td>
</tr>
<!----- -------------------- Pin Code-------------------------------------->
<tr>
<td>Pin Code</td>
<td><input type="Number" name="PinCode" maxlength="6" placeholder="560068"/>
(Max 6 Numbers Allowed)
</td>
</tr>
<!---------------------------- State ----------------------------------->
<tr>
<td>State</td>
<td><input type="text" name="State" maxlength="50" placeholder="Karnataka"/>
(Max 50 Characters Allowed)
</td>
</tr>
<!------------------------------ Country --------------------------------->
<tr>
<td>Country</td>
<td><input type="text" name="Country" placeholder="India" /></td>
</tr>
<!------------------------- Hobbies -------------------------------------->
<tr>
<td>Hobbies <br /><br /><br /></td>
<td>
<input type="checkbox" name="HobbyDrawing" value="Drawing" />
Drawing
<input type="checkbox" name="HobbySinging" value="Singing" />
Singing
<input type="checkbox" name="HobbyDancing" value="Dancing" />
Dancing
<input type="checkbox" name="HobbyCooking" value="Cooking" />
Sketching
<br />
<input type="checkbox" name="HobbyOther" value="Other">
Others
<input type="text" name="Other_Hobby" maxlength="50" placeholder="Ex- Teaching" />
(Max 50 Characters Allowed)
</td>
</tr>
<!-----------------------Qualification---------------------------------------->
<tr>
<td>Qualification <br /><br /><br /></td>
<td>
<br/>
<input type="checkbox" name="HighSchool" value="High School" />
High School(10th)<br>
<input type="checkbox" name="HigherSchool" value="Higher School" />
Higher School(12th)<br/>
<input type="checkbox" name="Graduation" value="Graduation" />
Graduation(Bachelors)<br/>
<input type="checkbox" name="PostGraduation" value="Post Graduation" />
Post Graduation(Masters)<br/>
<input type="checkbox" name="Phd" value="Phd">
Phd
</td>
</tr>
<!---------------------------- Courses ----------------------------------->
<tr>
<td>Courses<br />Applied For</td>
<td>
<input type="radio" name="CourseBCA" value="BCA">
BCA(Bachelor of Computer Applications)<br>
<input type="radio" name="CourseBCom" value="B.Com">
B.Com(Bachelor of Commerce)<br>
<input type="radio" name="CourseBSc" value="B.Sc">
B.Sc(Bachelor of Science)<br>
<input type="radio" name="CourseBA" value="B.A">
BA(Bachelor of Arts)<br>
<input type="radio" name="CourseMCA" value="BCA">
MCA(Master of Computer Applications)<br>
<input type="radio" name="CourseMCom" value="B.Com">
M.Com(Master of Commerce)<br>
<input type="radio" name="CourseMSc" value="B.Sc">
M.Sc(Master of Science)<br>
<input type="radio" name="CourseMA" value="B.A">
MA(Master of Arts)<br>
</td>
</tr>
<!----------------------- Submit and Reset ------------------------------->
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

Output Student Registration Form in HTML


Student Registration Form in HTML

Click to Free Download Student Registration Form HTML Code with PDF

Download Button for Student Registration Form Code in HTML


Read Also- Check These articles for designing a beautiful design(Just like HTML Code for Student Registration Form) in HTML and CSS.

Sponsor: Need to catch up with your incomplete software project work? Get instant remote access to your essential programming tools such as emulators, and IDEs on high-performance Citrix XenDesktop from CloudDesktopOnline at an unbelievable XenDesktop pricing. If you require a dedicated server, try dedicated GPU hosting from Apps4Rent with affordable plans & pricing.
Previous Post
Next Post

post written by:

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

10 comments:

  1. Thanks sir for providing a complete solution.

    ReplyDelete
    Replies
    1. Thanks Shishir You like our work. Please keep visit.

      Delete
    2. very good thnaks ////es type ke or bhi form bnaye. ( tr.td.etc ) good explane

      Delete
  2. It solved my many problems

    ReplyDelete
    Replies
    1. Thank You, Finding a Solution of Programming problems is our blog Motto.

      Delete
    2. Hello sr please complete web site details in PDF is are available.

      Delete
  3. sir will you give me the javascript code for the validation of this code

    ReplyDelete
  4. Thanks sir;
    me i need a help in java

    ReplyDelete
  5. sir muje Admission form ke coding chaye will you provide me that

    ReplyDelete
  6. the RESET buttons dosnot working ? why please help me

    ReplyDelete