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 discription here.
-
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>
-
- Company Name:
- <input type="text" name="Company Name">
- Contact number:
- <input type="text" name="Contact number">
- Contact person:
- <input type="text" name="Contact person">
- Email:
- <input type="text" name="Email">
- Work Status
- <input type="checkbox" name="vehicle" value="Bike">Full Time
- <input type="checkbox" name="vehicle" value="Bike"> Part Time
- <input type="checkbox" name="vehicle" value="Bike">Per Dim
- <input type="checkbox" name="vehicle" value="Bike">Others
-
- Salary
- <input type="text" name="Email">
- <select name="cars">
- <option value="Rupees">Rupees</option>
- <option value="Euro">Euro</option>
- <option value="US Dollar" selected="selected">US Dollar</option>
- </select>
- <select name="time">
- <option value="Yearly" selected="selected">Yearly</option>
- <option value="Half Yearly">Half Yearly</option>
- </select>
-
- Experience(Years)
- <input type="text" name="Experience">
- Locations
- <input type="text" name="locations">
- Qualifications:
-
- <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>
- <input type="button" value="ADD>>"><input type="button" value="<<Remove">
- <select name="drop2" id="SelectedQualifiation" size="4" multiple="multiple">
- <option value="1">Any</option>
- </select><br>
- <input type="button" value="Submit" align="right">
- <input type="button" value="Reset">
Finally, our output looks like this