Post
Ask Question

Create A Form Using HTML Tables

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.   
      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">    
          14.         <p>Brief Description should have atmost 500 characters</p>    
          15.        
          16.               Company Name:    
          17.               <input type="text" name="Company Name">          
          18.               Contact number:    
          19.               <input type="text" name="Contact number">             
          20.               Contact person:    
          21.               <input type="text" name="Contact person">             
          22.               Email:    
          23.               <input type="text" name="Email">             
          24.               Work Status    
          25.               <input type="checkbox" name="vehicle" value="Bike">Full Time    
          26.         <input type="checkbox" name="vehicle" value="Bike"> Part Time    
          27.         <input type="checkbox" name="vehicle" value="Bike">Per Dim    
          28.         <input type="checkbox" name="vehicle" value="Bike">Others    
          29.      
          30.               Salary    
          31.               <input type="text" name="Email">    
          32.         <select name="cars">    
          33.             <option value="Rupees">Rupees</option>    
          34.             <option value="Euro">Euro</option>    
          35.             <option value="US Dollar" selected="selected">US Dollar</option>    
          36.             </select>    
          37.             <select name="time">    
          38.             <option value="Yearly" selected="selected">Yearly</option>    
          39.             <option value="Half Yearly">Half Yearly</option>    
          40.             </select>                    
          41.         
          42.               Experience(Years)    
          43.               <input type="text" name="Experience">             
          44.               Locations    
          45.               <input type="text" name="locations">        
          46.               Qualifications:    
          47.                   
          48.         <select name="drop1" size="4" id="Qualifiation" multiple="multiple">    
          49.         <option value="1">Any</option>    
          50.         <option value="2">High School</option>    
          51.         <option value="3">Associate</option>    
          52.         <option value="4">Pre Bachelors</option>    
          53.         <option value="5">Bachelors</option>    
          54.         </select>    
          55.         <input type="button" value="ADD>>"><input type="button" value="<<Remove">    
          56.         <select name="drop2" id="SelectedQualifiation" size="4" multiple="multiple">    
          57.         <option value="1">Any</option>    
          58.         </select><br>               
          59.          <input type="button" value="Submit" align="right">    
          60.          <input type="button" value="Reset">             
          Finally, our output looks like this
           
          Clipboard02.jpg


          TRENDING UP

          View All