Tag Archives: HTML

Student Registration Form in HTML with CSS

Here comes a very pretty Student Registration Form in HTML. In this form I tried to cover as many HTML Form Elements as possible like text boxes, drop down boxes, radio buttons, check boxes. I also used a CSS for styling the Form.

<html>
<head>
<title>Student Registration Form</title>
<style type="text/css">
h3{font-family: Calibri; font-size: 22pt; font-style: normal; font-weight: bold; color:SlateBlue;
text-align: center; text-decoration: underline }
table{font-family: Calibri; color:white; font-size: 11pt; font-style: normal;
text-align:; background-color: SlateBlue; border-collapse: collapse; border: 2px solid navy}
table.inner{border: 0px}
</style>
</head>

<body>
<h3>STUDENT REGISTRATION FORM</h3>
<form action="form.php" method="POST">

<table align="center" cellpadding = "10">

<!----- First Name ---------------------------------------------------------->
<tr>
<td>FIRST NAME</td>
<td><input type="text" name="First_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Last Name ---------------------------------------------------------->
<tr>
<td>LAST NAME</td>
<td><input type="text" name="Last_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Date Of Birth -------------------------------------------------------->
<tr>
<td>DATE OF BIRTH</td>

<td>
<select name="Birthday_day" 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 id="Birthday_Month" name="Birthday_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 name="Birthday_Year" id="Birthday_Year">

<option value="-1">Year:</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>

<!----- Email Id ---------------------------------------------------------->
<tr>
<td>EMAIL ID</td>
<td><input type="text" name="Email_Id" maxlength="100" /></td>
</tr>

<!----- Mobile Number ---------------------------------------------------------->
<tr>
<td>MOBILE NUMBER</td>
<td>
<input type="text" name="Mobile_Number" maxlength="10" />
(10 digit number)
</td>
</tr>

<!----- Gender ----------------------------------------------------------->
<tr>
<td>GENDER</td>
<td>
Male <input type="radio" name="Gender" value="Male" />
Female <input type="radio" name="Gender" value="Female" />
</td>
</tr>

<!----- Address ---------------------------------------------------------->
<tr>
<td>ADDRESS 


</td>
<td><textarea name="Address" rows="4" cols="30"></textarea></td>
</tr>

<!----- City ---------------------------------------------------------->
<tr>
<td>CITY</td>
<td><input type="text" name="City" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Pin Code ---------------------------------------------------------->
<tr>
<td>PIN CODE</td>
<td><input type="text" name="Pin_Code" maxlength="6" />
(6 digit number)
</td>
</tr>

<!----- State ---------------------------------------------------------->
<tr>
<td>STATE</td>
<td><input type="text" name="State" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Country ---------------------------------------------------------->
<tr>
<td>COUNTRY</td>
<td><input type="text" name="Country" value="India" readonly="readonly" /></td>
</tr>

<!----- Hobbies ---------------------------------------------------------->

<tr>
<td>HOBBIES 


</td>

<td>
Drawing
<input type="checkbox" name="Hobby_Drawing" value="Drawing" />
Singing
<input type="checkbox" name="Hobby_Singing" value="Singing" />
Dancing
<input type="checkbox" name="Hobby_Dancing" value="Dancing" />
Sketching
<input type="checkbox" name="Hobby_Cooking" value="Cooking" />


Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>

<!----- Qualification---------------------------------------------------------->
<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>Class X</td>
<td><input type="text" name="ClassX_Board" maxlength="30" /></td>
<td><input type="text" name="ClassX_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassX_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td>2</td>
<td>Class XII</td>
<td><input type="text" name="ClassXII_Board" maxlength="30" /></td>
<td><input type="text" name="ClassXII_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassXII_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td>3</td>
<td>Graduation</td>
<td><input type="text" name="Graduation_Board" maxlength="30" /></td>
<td><input type="text" name="Graduation_Percentage" maxlength="30" /></td>
<td><input type="text" name="Graduation_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td>4</td>
<td>Masters</td>
<td><input type="text" name="Masters_Board" maxlength="30" /></td>
<td><input type="text" name="Masters_Percentage" maxlength="30" /></td>
<td><input type="text" name="Masters_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td></td>
<td></td>
<td align="center">(10 char max)</td>
<td align="center">(upto 2 decimal)</td>
</tr>
</table>

</td>
</tr>

<!----- Course ---------------------------------------------------------->
<tr>
<td>COURSES
APPLIED FOR</td>
<td>
BCA
<input type="radio" name="Course_BCA" value="BCA">
B.Com
<input type="radio" name="Course_BCom" value="B.Com">
B.Sc
<input type="radio" name="Course_BSc" value="B.Sc">
B.A
<input type="radio" name="Course_BA" value="B.A">
</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>

Here comes a Snapshot..Enjoy. HTML has got its own charm which no other language can give you. StudentRegistrationForm

Related articles

Calling Web Services from HTML Pages using JavaScript in Visual Studio 2010

Steps

  • Go to New Project
  • Select Language Visual C#
  • Select Web
  • Select ASP .NET Empty Web Application
  • Give a proper Name to your Web App like WSFromHTMLusingJS

Now Add a HTML File to the Project.

For this, Right-click on the Project, choose Add a New Item, and choose the HTML template.

Name this like  AddNumbersForm.html

This is a simple HTML Form taking three Numbers as input parameters

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Add Three Nos</title>

    <script type="text/javascript">

        function Init() {
            service.useService("WebService1.asmx?wsdl", "MyMath");      
        }

        var num1, num2, num3;

        function AddNos() {
            num1 = document.additionForm.num1.value;
            num2 = document.additionForm.num2.value;
            num3 = document.additionForm.num3.value;
            iCallID = service.MyMath.callService("AddThreeNos", num1, num2, num3);
        }

        function ShowResult() {
            alert(event.result.value);
        }
    </script>
</head>



 <body onload="Init()" id="service" style="behavior:url(webservice.htc)" onresult="ShowResult()">


<form name='additionForm'>

<table  cellpadding='10' align='center'>

<tr>
<td colspan="2" align="center">Add Three Numbers</td>
</tr>

<tr>
<td>Number 1: </td>

<td><input type="text" name ="num1" size="10" maxlength ="5" /> </td>

</tr>

<tr>
<td>Number 2: </td>

<td><input type="text" name ="num2" size="10" maxlength ="5" /></td>

</tr>

<tr>
<td>Number 3: </td>

<td><input type="text" name ="num3" size="10" maxlength ="5" /></td>

</tr>


<tr> <td colspan="2" align="center"><br/><br/>

<button onclick="AddNos()">Add</button>

<input type="reset" value ="Reset" />

</td></tr>

</table><br/><br/>


</form>

</body>
</html>

Now Add a Web Service to the Project

For this, Right-click on the Project, choose Add a New Item, and choose the Web Service template.

Name this WebServiceTest.asmx

When you create the web service by default you get a web method called Hello World.

Put this code below that and run your web service

[WebMethod]
        public int AddThreeNos(int num1, int num2, int num3)
        {
            return num1 + num2 + num3;
        }

Here to keep things simple we have created a very simple Web Service that returns the sum of three integer variables.

For calling webservices in HTML using JavaScript you need another file called webservice.htc
You can download this file from here.

webservice.htc

Web Service Behavior can be used to call remote methods from Web Services. The WebService behavior is implemented with an HTML Component (HTC) file as an attached behavior, so it can be used in Microsoft Internet Explorer 5 and later versions.

Download this file and put it in your Project Directory.

Run the project. You are done now. Congrats for Calling a WebService from an HTML Page using JavaScript.

Snapshot of the o/p

Addition No Form

Result from WebService

P.S-Try this only in Internet Explorer. You may not get the desired results in other browsers.