 |
| Enrolment form output |
Students' Simple Online Form Design using HTML and INLINE CSS only
In this code, you will learn how to design simple HTML forms. Here, I created a simple student enrolment form having elements like form, textbox, address text area, select box, radio buttons, checkbox, etc. I use a table for proper alignment and use inline CSS only for simple styling. Go through the code line by line and know the workings by displaying the output as shown in the post image. You can choose any image as the background image and replace the line. The code is shown below:-
<html>
<head>
<title> Enrollment Form </title>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Anirban Ghosh">
<meta name="Keywords" content="">
<meta name="Description" content="form/enrollment">
</head>
<body style="background-image:url('Image/back4.jpg');border-style:double;border-width:thick;background-size:cover">
<h1 style="color:red;text-align:center">Students Online Form</h1>
<hr style="color:blue;width:500px">
<p style="margin-left: 175px;margin-right:175px;text-align: center;background-color:yellow">All fields are mandatory to fillup & put right choices!</p>
<form name="form1" method="post" action="mailto:kolkata@gmail.com">
<table width="80%" align="center" cellpadding="0" cellspacing="10" border="0"style="border-style:dotted;border-color:red">
<tr>
<td width="40%"><div align="right">Name</div></td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td width="40%"><div align="right">Father's name</div></td>
<td><input type="text" name="fathnam" ></td>
</tr>
<tr>
<td width="40%"><div align="right">Address</div></td>
<td><textarea type="text" name="addr" rows="3" ></textarea></td>
</tr>
<tr>
<td width="40%"><div align="right">Contact No.</div></td>
<td><input type="number" name="phone"></td>
</tr>
<tr>
<td width="40%"><div align="right">Desired Course</div></td>
<td><select name="course">
<option value="BCA"selected>BCA
<option value="MCA">MCA
<option value="CITA">CITA
<option value="MBA">MBA
<option value="BBA">BBA
<option value="BSC">BSC
<option value="MSC">MSC
</select></td>
</tr>
<tr>
<td width="40%"><div align="right">Gender</div></td>
<td><input type="radio" name="gender" value="male">Male<br><input type="radio" name="gender" value="Female">Female</td>
</tr>
<tr>
<td width="40%"><div align="right">Higher Secondary Stream</div></td>
<td><select name="stream">
<option value="Science"selected>Pure Science
<option value="bio">Bio Science
<option value="com">Commarce
<option value="art">Arts
<option value="para">Para Science</select></td>
</tr>
<tr>
<td width="40%"><div align="right">Percentage of marks<br> in Higher Secondary</div></td>
<td><select name="marks">
<option value="90"selected>Above 90%
<option value="80">Above 80%
<option value="70">Above 70%
<option value="60">Above 60%
<option value="50">Above 50%</select></td>
</tr>
<tr>
<td align="right"><font size="5">Extra</font></td><td><font size="5"> Qualifications</font> </td>
</tr>
<tr>
<td width="40%"><div align="right">Graphic designing</td><td><input type="checkbox" name="qual1" value="grphx"></td></tr>
<tr>
<td width="40%"><div align="right">Web designing</td><td><input type="checkbox" name="qual2" value="webx"></td>
</tr>
<tr>
<td width="40%"><div align="right">Financial Accounting</td><td><input type="checkbox" name="qual3" value="finac"></td>
</tr>
<tr>
<td width="40%"><div align="right">Animation</td><td><input type="checkbox" name="qual4" value="anim"></td>
</tr>
<tr>
<td><div align="right"><input type="submit" value="submit"></div></td>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</body>
</html>
Try the output:-
0 Comments