Design The Student Registration Form Using HTML

on
Hello Friends.!
Welcome to my Blog…!!!
In this post, we will learn about how to design the Student Registration Form using HTML.
We will use following important Tags & Attributes for designing our Student Registration Form.
Tags:
<div></div> = This tag is used to include the section in our HTML Document.
<form></form> = This tag is used to create an HTML form that is used to collect User input.
<fieldset></fieldset> = This tag is used for grouping related form elements. It draws a box around the related elements.
<legend></legend> = This tag represents a Caption for the <fieldset> element.
<input> = This tag is used to declare input controls that allow users to input data. The input field can vary in many ways, depending on the type of attribute.
<select></select> = This tag represents a control that provides a Menu of Options. It’s used to create a Drop-Down list.
<marquee></marquee> = This tag is used to insert a Scrolling Area of Text.
Attributes:

style = This attribute specifies an inline style for an element.

Code:


<html>
<head>
<title>Student Registration Form</title>
</head>

<body>
<h1 align="center" style="color:#FF9009"><u>Student Registration Form</u></h1>
<br/>
<div style="background-color:#6DBDD6; color:black; padding:45px;">
<font size="5"><strong><form>
<fieldset>
<legend>Personal Information</legend>
<b><u>Student Name:</u></b>
<br/>
<pre>
<label for="F_Name">First Name: </label> <input type="text" name="F_Name" value="Prem"/>          <label for="F_Name">Middle Name: </label> <input type="text" name="M_Name" value="Jethanand"/>          <label for="L_Name">Last Name: </label> <input type="text" name="L_Name" value="Khialani"/>
</pre>
<b><u>Gender:</u></b>
<pre>
<input type="radio" name="gender" value="Male" checked="checked"/>Male               <input type="radio" name="gender" value="Female"/>Female
</pre>
<b><u>Birth Date:</u></b> &nbsp;&nbsp;<input type="date" name="B_Day">
<br/><br/>
<b><u>Address:</u></b>
<pre>
<b>Street Address:</b>        <input type="text" size="100" value=""/>
<b>Street Address Line 2:</b> <input type="text" size="100" value=""/>
<b>City:</b>                  <input type="text" size="100" value=""/>
<b>Pin Code:</b>              <input type="text" size="100" value=""/>
<b>State:</b>                 <select><option value="1">Andhra Pradesh</option>
<option value="2">Arunachal Pradesh</option>
<option value="3">Assam</option>
<option value="4">Bihar</option>
<option value="5">Chhattisgarh</option>
<option value="6">Goa</option>
<option value="7" selected>Gujarat</option>
<option value="8">Haryana</option>
<option value="9">Himachal Pradesh</option>
<option value="10">Jammu Kashmir</option>
<option value="11">Jharkhand</option>
<option value="12">Karnataka</option>
<option value="13">Kerela</option>
<option value="14">Madhya Pradesh</option>
<option value="15">Maharashtra</option>
<option value="16">Manipur</option>
<option value="17">Meghalaya</option>
<option value="18">Mizoram</option>
<option value="19">Nagaland</option>
<option value="20">Orrisa</option>
<option value="21">Punjab</option>
<option value="22">Rajasthan</option>
<option value="23">Sikkim</option>
<option value="24">Tamil Nadu</option>
<option value="25">Telangana</option>
<option value="26">Tripura</option>
<option value="27">Uttrakhand</option>
<option value="28">Uttar Pradesh</option>
<option value="29">West Bengal</option>
</select>
<b>Country:</b>               <select><option value="30">India</option></select>
</pre>
<b><u>E-Mail ID:</u></b>
<br/><br/>
<input type="email" name="email" value="abc@xyz.com" size="80"/>
<br/><br/>
<b><u>Mobile Number:</u></b>
<br/>
<pre>
<select>
<option value="C_Code" selected>+91</option></select> <input type="number" name="M_No" value="1234567890"/>
</pre>
<b><u>Phone Number:</u></b>
<br/>
<pre>
<select>
<option value="A_Code" selected>079</option></select> <input type="number" name="M_No" value="12345678"/>
</pre>
<b><u>Hobbies:</u></b>
<br/>
<textarea rows="5" cols="70">Type Your Hobbies Over Here</textarea>
</fieldset>
<br/>
<FIELDSET>
<legend>Educational Qualification</legend>
<b><u>Examination:</u></b>
<pre>
<b>Class X</b>     <input type="text" name="Board" value="GSEB" size="50"/>   <input type="text" name="Percentage" value="85%" size="30"/>   <input type="number" name="Year_Of_Passing" value="2013" size="50"/>
<b>Class XII</b>   <input type="text" name="Board" value="GSHSEB" size="50"/>   <input type="text" name="Percentage" value="85%" size="30"/>   <input type="number" name="Year_Of_Passing" value="2015" size="50"/>
</pre>
<b><u>Certificates:</b></u>
<br/>
<textarea rows="5" cols="70">Enter The Compition's Name In Which You Got Certificates</textarea>
<br/><br/>
<b><u>Courses Applied For:</u></b>
<pre>
<input type="radio" name="Course" value="B.Com"/>B.Com          <input type="radio" name="Course" value="BCA"/>BCA          <input type="radio" name="Course" value="BSE"/>BSE          <input type="radio" name="Course" value="B.E" checked="checked"/>B.E/B.Tech          <input type="radio" name="Course" value="B.A"/>B.A          <input type="radio" name="Course" value="BBA"/>BBA
</pre>
</fieldset>
</form></strong></font>
<br/>
<div align="center">
<input type="Submit" name="Submit" value="Submit Application"/>
<br/><br/>
<input type="Reset" name="Reset" value="Clear All Fields"/>
</div>
<br/>
<b><marquee behavior="scroll" width="100%" direction="center">ThankYou. Made By Prem Khialani &copy;</marquee></b>
</div>
</body>
</html>


Output:











Thank-You.
Jai-Hind.

Comments

Post a Comment