Creating a registration form using HTML/HTML5

Create a simple Registration form using HTML/HTML5

Here is the codes, you can edit according to your requirements

 

–> Main Portion ( Named as 1.html in the code )

 

<!DOCTYPE html>
<head>
<title>A SAMPLE OF FORM</title>
</head>
<body><center>
<caption> <u><b>REGISTRATION FORM</caption></center><br>
<table width=”60%” align=”center” cellpadding = “8” cellspacing=”1″>
<td>First name:</td>
<td><input type=”text” name=”First_Name” maxlength=”30″>
</td>
</tr>
<tr>
<td>Last name:</td>
<td><input type=”text” name=”Last_Name”
maxlength=”30″/>
</td>
</tr>
<tr>
<td>Date of birth:</td>
<td>
<select size=”1″ name=”date”>
<option value=”DATE”>Date</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>
</select>
<select size=”1″ name=”month”>
<option value=”-1″>Month:</option>
<option value=”January”>Jan</option>
<option value=”February”>Feb</option>
<option value=”March”>Mar</option>
<option value=”April”>Apr</option>
<option value=”May”>May</option>
<option value=”June”>Jun</option>
<option value=”July”>Jul</option>
<option value=”August”>Aug</option>
<option value=”September”>Sep</option>
<option value=”October”>Oct</option>
<option value=”November”>Nov</option>
<option value=”December”>Dec</option>
</select>
<select size=”1″ name=”year”>
<option value=”-1″>Year:</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>
</select>
</td>
</tr>
<tr>
<td>Email no:</td>
<td><input type=”text” name=”text”></td>
</tr>
<tr>
<td>Mobile number:</td>
<td><input type=”number” name=”number”></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type=”radio” name=”a” value=”male”>Male
<input type=”radio” name=”a” value=”female”>Female
</td>
<tr>
<td>Address:</td>
<td><textarea name=”Address” rows=”3″ cols=”15″>
</textarea></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select size=”1″>
<option>Select your country</option>
<option>NEPAL</option>
<option>INDIA</option>
<option>CHINA</option>
<option>PAKISTAN</option>
<option>BUTAN</option>
<option>SRI LANKA</option>
<option>AFGANISTAN</option>
<option>OTHERS</option>
</select>
</td>
</tr>
<tr>
<td>Qualification:</td>
<td>
<table>
<tr>
<td align=”center”><b>Sl.No.</b></td>
<td align=”center”><b>Examination</b></td>
<td align=”center”><b>Board</b></td>
<td align=”center”><b>Percentage</b></td>
<td align=”center”><b>Year of Passing</b></td>
</tr>
<tr>
<td>1.</td>
<td>XI & XII”</td>
<td><input type=”text” name=”board” maxlength=”30″></td>
<td><input type=”number” name=”percentage”></td>
<td><input type=”year of passing” maxlength=”30″></td>
</tr>
<tr>
<td>2.</td>
<td>Graduation</td>
<td><input type=”text” name=”Board”
maxlength=”30″ /></td>
<td><input type=”text” name=”Percentage”
maxlength=”30″ /></td>
<td><input type=”text” name=”Year of Passing”
maxlength=”30″ /></td>
</tr>
</table>
<tr>
<td>Cources Applied For</td>
<td><input type=”radio” name=”a” value=”BCA”>B.Ed
<input type=”radio” name=”a” value=”BIT”>BIT
<input type=”radio” value=”B.Sc” name=”a”>B.Sc
<input type=”radio” value=”B.A” name=”a”>B.A
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<a href=”link.html”><input type=”Submit” name=”Submit” value=”Submit”></a>
<a href=”1.html”><input type=”Reset” name=”Reset” value=”Reset”></a>
</td>
</tr>
</table>
<p align=”right”> Risav <br> HTML Basic</p>
</body>
</html>

 

–> Linked portion ( Named as link.html in above code )

 

<!DOCTYPE html>
<head> <title> SUBMIT </title>
</head>
<body>
Congratulation your Form Has Been Submitted !!!!!
</body>
</html>

You can also use looping on date, year……

Leave a Reply

Your email address will not be published. Required fields are marked *