April 21, 2012

Student Registration Form in HTML with CSS

Here comes a very pretty Student Registration Form in HTML.

<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 <br /><br /><br /></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 <br /><br /><br /></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" />
<br />
Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>

<!----- Qualification---------------------------------------------------------->
<tr>
<td>QUALIFICATION <br /><br /><br /><br /><br /><br /><br /></td>

<td>
<table class="inner">

<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<br />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

Posted in HTML
Tagged CSS, HTML, HTML Form Elements, HTML Forms, Markup language, Programming, Student Registration Form, XHTML
Leave a comment

April 14, 2012

Chess Board Using HTML

I was going through some of my old Programs and I got a HTML Markup file creating a very pretty Chess Board.

Here’s the snapshot first for your eyes.

ChessBoardUsingHTML

Complete HTML code below.

<html>
<head>
<title>CHESS</title>
</head>
<body>
<h1 align="center">CHESS BOARD IN HTML</h1>
<br>
<table cellpadding="28" bgcolor="black" align="center">

  <tr>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
   </tr>
  <tr>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
  <tr>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
  <tr>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
  <tr>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
  <tr>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
  <tr>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
  <tr>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>

</table>

</body></html>

Hummm No code is small…somebody must have worked to produce that.

February 27, 2012

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.

Posted in C#
Tagged Calling WebService in HTML using JavaScript, HTML, Internet Explorer, JavaScript, Web service
5 Comments

January 4, 2012

Ludo Board using HTML

Hi Friends

Check out this Ludo Board made in HTML.

First I am posting the Snapshot.

Ludo Using HTML

Thats Pretty isn’t it. And shows the power of HTML.

Source Code is here now.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Ludo Board using HTML</title>
<style type="text/css">
	/*Style for Table*/

	table,th,td
	{
	border: 1px solid black;
	border-collapse:collapse;
	}
</style>
</head>

<body bgcolor = "white">
<h1 align = "center"><font color = "gray"><b><u>LUDO GAME</u></b></font></h1>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="4" cellspacing="0" width="550" height="550" align = "center">

<!--Outer 3 Sides are created using this Row-->
        <tr>
            <td bgcolor="red"rowspan="17">&nbsp;</td>
            <td bgcolor="blue"colspan="15">&nbsp;</td>
            <td bgcolor="yellow"rowspan="17">&nbsp;</td>
        </tr>

<!--First Row of Ludo Table starts from here-->
        <tr>

            <td bgcolor="blue" colspan="2" rowspan="2">&nbsp;</td>
            <td  bgcolor="white"colspan="2" rowspan="2">&nbsp;</td>
            <td bgcolor="blue" colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
            <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
            <td bgcolor="red" colspan="2"rowspan="2">&nbsp;</td>
       </tr>

       <tr>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
       </tr>

<!--1st Row Completes here-->

<!--2nd Row starts here-->
       <tr>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="blue" colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
      </tr>

       <tr>
           <td>&nbsp;</td>
		   <td bgcolor="red">&nbsp;</td>
		   <td>&nbsp;</td>
       </tr>

<!--2nd Row ends here-->

<!--3rd row starts here-->
       <tr>
           <td bgcolor="blue"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="blue"colspan="2"rowspan="2">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td>&nbsp;</td>
           <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
           <td bgcolor="red"colspan="2"rowspan="2">&nbsp;</td>
       </tr>

       <tr>
           <td>&nbsp;</td>
           <td bgcolor="red">&nbsp;</td>
           <td >&nbsp;</td>
       </tr>

<!--3rd Row ends here-->

<!--4th row starts here-->
       <tr>
           <td>&nbsp;</td>
           <td bgcolor="blue">&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td align="center" bgcolor="white" rowspan="3" colspan="3"><b>HOME</b></td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
     </tr>
<!--4th row ends here-->

<!--5th row starts here-->
     <tr>
          <td>&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="blue">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td bgcolor="green">&nbsp;</td>
          <td>&nbsp;</td>
     </tr>

<!--5th row ends here-->

<!--6th row starts here-->
     <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="green">&nbsp;</td>
         <td>&nbsp;</td>
     </tr>
<!--6th row ends here-->

<!--7th row-->
     <tr>
        <td bgcolor="yellow"colspan="2" rowspan="2">&nbsp;</td>
        <td bgcolor="white"colspan="2" rowspan="2">&nbsp;</td>
        <td bgcolor="yellow"colspan="2" rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td bgcolor="yellow">&nbsp;</td>
        <td>&nbsp;</td>
        <td  bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
        <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
        <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
    </tr>

     <tr>
         <td>&nbsp;</td>
		 <td bgcolor="yellow">&nbsp;</td>
		 <td>&nbsp;</td>
     </tr>

<!--7th row ends-->

<!--8th row-->
     <tr>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="yellow"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="yellow">&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
     </tr>

	 <tr>
         <td>&nbsp;</td>
		 <td bgcolor="yellow">&nbsp;</td>
		 <td>&nbsp;</td>
     </tr>

<!--8th row ends-->

<!--9th row-->
     <tr>
         <td bgcolor="yellow"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="yellow"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="yellow">&nbsp;</td>
         <td bgcolor="yellow">&nbsp;</td>
         <td>&nbsp;</td>
         <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="white"colspan="2"rowspan="2">&nbsp;</td>
         <td bgcolor="green"colspan="2"rowspan="2">&nbsp;</td>
     </tr>

      <tr>
          <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
      </tr>
<!--9th row ends-->

<!--Row for the Fourth side at the bottom-->
       <tr>
           <td bgcolor="green"colspan="15">&nbsp;</td>
       </tr>
</table>

<br><br><br>

</body>
</html>

December 9, 2011

Decimal Number Conversion Program in PHP

Hi People

This PHP Application is for generating a Decimal Number Conversion Table to Binary, Hexadecimal and Octal Numbers.

In this we have a HTML form where the user need to enter the Starting and the Ending Decimal Number for which she wants to generate a Number Conversion Table.

This Numbers are send as parameters in a PHP page which produces the Table.

PHP Math Functions

decbin(), dechex(), decoct() have been used for doing the conversion.

NumberConversionForm.html

<html>
<head>
<title> Table Generator-Decimal Number to Binary, Hexadecimal and Octal </title>
</head>

<body>

<h2><u><font color="Blue" face="verdana"> Table Generator- Decimal Number to Binary, Hexadecimal and Octal </font></u></h2>
<form action="NumberConversion.php" method="post">

<table border="0">

<tr>
<td> <b>Enter the Starting Decimal No: <br/>
*Starting No should be smaller than Ending No.</b> </td>
<td> <input type="textbox" name="startNo"> </td>
</tr>

<tr>
<td> <b>Enter the Ending Decimal No: </b> </td>
<td> <input type="textbox" name="endNo"></td>
</tr>

 <tr>
 <td colspan="2" align="center"> <input type="submit" value="Submit"> </td>
 </tr>
</table>

</form>
</body>
</html>

NumberConversion.php- The PHP Program which does all the work

<html>
<head>
	<title> Table-Decimal Number to Binary, Hexadecimal and Octal</title>

	<style type="text/css">
	/*Style for Table*/

	table
	{
	font-family:Arial; font-size:15px;

	color:navy; font-weight: bold;

	border: 1px solid green;

	text-align: center;

	border-collapse:collapse; width:30%;
	}

	th
	{
	font-family:Arial; font-size:16px;

	color:black; font-weight: bold;

	text-align: center;
	}

	td
	{
	height:35px;
	}
	/*Style for The Heading*/

	h2
	{
	font-family:Arial; font-size:20px;

	color: green; font-weight: bold; text-align: center;

	text-decoration:underline
	}

</style>
</head>

<body>
<?php

$startNo = $_POST['startNo'];
$endNo = $_POST['endNo'];

$counter = 0;
if($startNo > $endNo)
{
	echo "Please Enter Correct numbers <br>";

}

else
{
	echo "<table border='1' align='center' bgcolor='#E0FFFF'>";
	echo "<tr>";
	echo " <td align='center' colspan='4' bgcolor='#7FFFD4'><h2>Decimal Number Convertor Table</h2></td>";
	echo "</tr>";

   echo "<tr>";
   echo "<th>Decimal Number</th>";
   echo "<th>Binary Number</th>";
   echo "<th>Hexadecimal Number</th>";
   echo "<th>Octal Number</th>";
   echo "</tr>";

for ($counter = $startNo; $counter <= $endNo; $counter++)
{
  echo "<tr>";
  echo "<td>".$counter."</td>";
  echo "<td>".decbin($counter)."</td>";
  echo "<td>".dechex($counter)."</td>";
  echo "<td>".decoct($counter)."</td>";
  echo "</tr>";
}

echo "</table>";
}
?>
</body>
</html>

Snapshot of the o/p

Thats it. A simple PHP Program showing the power of PHP.

Posted in PHP
Tagged Binary, Hexadecimal, HTML, Math, Octal, PHP
Leave a comment

Programming Palace

Keep Programming

Tag Archives: HTML

Student Registration Form in HTML with CSS

Chess Board Using HTML

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

Ludo Board using HTML

Decimal Number Conversion Program in PHP

Follow “Programming Palace”