Contribute
Ask Question

Create A Form Using HTML Tables

In this article we will see how to create a form using HTML Tables. First we learn how to create controls like TextBox and DropDownList, then we use them together in our table to create a form where user information is saved.

Introduction

In this article we will see how to create a form using HTML Tables. First we learn how to create controls like TextBox and DropDownList, then we use them together in our table to create a form where user information is saved.

Table format

  1. <table border="1" cellpadding="10px" cellspacing="5px">  
  2.    <tr>  
  3.       <td>row1 , cell1 </td>  
  4.       <td>row1 , cell2 </td>  
  5.    </tr>  
  6.    <tr>  
  7.       <td>row2 , cell1 </td>  
  8.       <td>row2 , cell2 </td>  
  9.    </tr>  
  10. </table>  

 

TextBox

  1. <form>  
  2.    Name: <input type="text" name="Name" /><br />  
  3.    Father's Name: <input type="text" name="FatherName" />  
  4. </form>  

 

Textarea

  1. <textarea rows="20" cols="40">  
  2.    Write discription here.  
  3. </textarea>  

 

ListBox

  1. <select name="list1" id="Select" size="2" multiple="multiple">  
  2.    <option value="1">item1</option>  
  3.    <option value="2">item2</option>  
  4.    <option value="0">All</option>  
  5. </select>  

 

CheckBox

  1. <form action="">  
  2.    <input type="checkbox" name="Car" value="Honda" /> I have Honda car. <br />  
  3.    <input type="checkbox" name="Car" value="Maruti" /> I have a Maruti car.   
  4. </form>  

 

DropDownList

  1. <form action="">  
  2.    <select name="City">  
  3.       <option value="Delhi">Delhi</option>  
  4.       <option value="Jaipur">Jaipur</option>  
  5.       <option value="Udaipur" selected="selected">Udaipur</option>  
  6.    </select>  
  7. </form>  

 

Button

  1. <form action="">  
  2.    <input type="button" value="Click me!">  
  3. </form>  

 

Now we use them all together to create a form like this

  1. <body>   
  2.     <form id="form1" runat="server">  
  3.     <div>                
  4.     </div>   
  5.     <h2 align="center"> Job Details:</h2>  
  6.     <table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">  
  7.        <tr>  
  8.               <td  align="right" class="style1">Job Title:</td>  
  9.               <td class="style1"><input type="text" name="Job Title" /></td>  
  10.        </tr>  
  11.        <tr>  
  12.               <td align="right">Description:</td>  
  13.               <td><textarea rows="3" cols="15" name="Description"></textarea>  
  14.         <p>Brief Description should have atmost 500 characters</p>  
  15.         </td>  
  16.        </tr>  
  17.        <tr>  
  18.               <td align="right">Company Name:</td>  
  19.               <td><input type="text" name="Company Name" /></td>  
  20.        </tr>  
  21.        <tr>  
  22.               <td align="right">Contact number:</td>  
  23.               <td><input type="text" name="Contact number" /></td>  
  24.        </tr>  
  25.        <tr>  
  26.               <td align="right">Contact person:</td>  
  27.               <td><input type="text" name="Contact person" /></td>  
  28.        </tr>  
  29.        <tr>  
  30.               <td valign="top" align="right">Email:</td>  
  31.               <td><input type="text" name="Email" /></td>  
  32.        </tr>  
  33.        <tr>  
  34.               <td align="right">Work Status</td>  
  35.               <td><input type="checkbox" name="vehicle" value="Bike" />Full Time  
  36.         <input type="checkbox" name="vehicle" value="Bike" /> Part Time  
  37.         <input type="checkbox" name="vehicle" value="Bike" />Per Dim  
  38.         <input type="checkbox" name="vehicle" value="Bike" />Others  
  39.         </td>  
  40.        </tr>  
  41.        <tr>  
  42.               <td align="right">Salary</td>  
  43.               <td><input type="text" name="Email" />  
  44.         <select name="cars">  
  45.             <option value="Rupees">Rupees</option>  
  46.             <option value="Euro">Euro</option>  
  47.             <option value="US Dollar" selected="selected">US Dollar</option>  
  48.             </select>  
  49.             <select name="time">  
  50.             <option value="Yearly" selected="selected">Yearly</option>  
  51.             <option value="Half Yearly">Half Yearly</option>  
  52.             </select>                  
  53.         </td>  
  54.        </tr>  
  55.        <tr>  
  56.               <td align="right">Experience(Years)</td>  
  57.               <td><input type="text" name="Experience" /></td>  
  58.        </tr>  
  59.        <tr>  
  60.               <td align="right">Locations</td>  
  61.               <td><input type="text" name="locations" /></td>  
  62.        </tr>  
  63.        <tr>  
  64.               <td align="right">Qualifications:</td>  
  65.               <td>  
  66.         <select name="drop1" size="4" id="Qualifiation" size="4" multiple="multiple" >  
  67.         <option value="1" >Any</option>  
  68.         <option value="2">High School</option>  
  69.         <option value="3">Associate</option>  
  70.         <option value="4">Pre Bachelors</option>  
  71.         <option value="5">Bachelors</option>  
  72.         </select>  
  73.         <input type="button" value="ADD>>" /><input type="button" value="<<Remove"/>  
  74.         <select name="drop2" id="SelectedQualifiation" size="4" multiple="multiple">  
  75.         <option value="1">Any</option>  
  76.         </select></br>  
  77.            
  78.         </td>  
  79.         </tr>         
  80.         <tr>  
  81.         <td> <input type="button" value="Submit" align="right"/>  
  82.         <td> <input type="button" value="Reset" />         
  83.         </td>  
  84.         </tr>  
  85. </table>   
  86.     </form>  
  87. </body>  

Finally, our output looks like this

Clipboard02.jpg

TRENDING UP

View All