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

<table border="1" cellpadding="10px" cellspacing="5px">
    <tr>
      <td>row1 , cell1 </td>
      <td>row1 , cell2 </td>
    </tr>
    <tr>
      <td>row2 , cell1 </td>
      <td>row2 , cell2 </td>
    </tr>
</table>

TextBox

<form>
   Name: <input type="text" name="Name" /><br />
   Father's Name: <input type="text" name="FatherName" />
</form>

Textarea

<textarea rows="20" cols="40">
    Write description here.
</textarea>

ListBox

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

CheckBox

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

DropDownList

<form action="">
   <select name="City">
      <option value="Delhi">Delhi</option>
      <option value="Jaipur">Jaipur</option>
      <option value="Udaipur" selected="selected">Udaipur</option>
   </select>
</form>

Button

<form action="">
   <input type="button" value="Click me!">
</form>

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

<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <h2 align="center"> Job Details:</h2>
        <table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">
            <tr>
                <td  align="right" class="style1">Job Title:</td>
                <td class="style1"><input type="text" name="Job Title" /></td>
            </tr>
            <tr>
                <td align="right">Description:</td>
                <td><textarea rows="3" cols="15" name="Description">    
        <p>Brief Description should have atmost 500 characters</p></textarea></td>
            </tr>
            <tr>
                <td align="right">Company Name:</td>
                <td><input type="text" name="Company Name"></td>
                <td align="right">Contact number:</td>
                <td><input type="text" name="Contact number"></td>
                <td align="right">Contact person:</td>
                <td><input type="text" name="Contact person"></td>
                <td align="right">Email:</td>
                <td><input type="text" name="Email"></td>
            </tr>
            <tr>
                <td align="right">Work Status</td>
                <td><input type="checkbox" name="vehicle" value="Bike">Full Time</td>
                <td><input type="checkbox" name="vehicle" value="Bike">Part Time</td>
                <td><input type="checkbox" name="vehicle" value="Bike">Per Dim</td>
                <td><input type="checkbox" name="vehicle" value="Bike">Others</td>
                <td align="right">Salary</td>
                <td><input type="text" name="Salary"></td>
                <td><select name="cars">
                    <option value="Rupees">Rupees</option>
                    <option value="Euro">Euro</option>
                    <option value="US Dollar" selected="selected">US Dollar</option>
                </select></td>
                <td><select name="time">
                    <option value="Yearly" selected="selected">Yearly</option>
                    <option value="Half Yearly">Half Yearly</option>
                </select></td>
                <td align="right">Experience(Years)</td>
                <td><input type="text" name="Experience"></td>
                <td align="right">Locations</td>
                <td><input type="text" name="locations"></td>
                <td align="right">Qualifications:</td>
                <td><select name="drop1" size="4" id="Qualifiation" multiple="multiple">
                        <option value="1">Any</option>
                        <option value="2">High School</option>
                        <option value="3">Associate</option>
                        <option value="4">Pre Bachelors</option>
                        <option value="5">Bachelors</option>
                    </select></td>
                <td><input type="button" value="ADD>>"><input type="button" value="<<Remove"></td>
                <td><select name="drop2" id="SelectedQualifiation" size="4" multiple="multiple">
                        <option value="1">Any</option>
                    </select></td>
                <td><input type="button" value="Submit" align="right"></td>
                <td><input type="button" value="Reset"></td>
            </tr>
        </table>
    </form>
</body>

Finally, our output looks like this.

Job details

4 Comments

Join the conversation! Your thoughts help the community grow.

Jeremy Lewis6y ago
This is a half completed solution. For some reason you all do not complete the code. The last portion of the code is incomplete without a way to retrieve the original files. Not sure what significance this serves. If I am to use critical thinking to finish the remainder of the code why did you upload at all? COMPLETE YOUR WORK
SaMol P8y ago
This is pure old html file. do u have a html5 fields, controls to create a elegant form and submit the data?,
Hadshana Kamalanathan8y ago
Good one...
kalu singh rao10y ago
Nice...