Use Tables to Structurize Forms in HTML

The tables can be used to create and structurize forms in HTML. But, before that let us see how to create a form in HTML.

Create a Form in HTML

Example

Let us see how to create a form using the <form> tags. We have set three input type radio with individual labels ?


<!DOCTYPE html>
<html>
<head>
   <title>HTML Form</title>
</head>
<body>
   <h1>Details</h1>
   <form id="myform">
      <p>Select the subject you want to choose:</p>
      <div>
         <input type="radio" id="prog" name="subject" value="prog">
         <label for="prog">Programming</label>
         <input type="radio" id="dev" name="subject" value="dev">
         <label for="dev">Web Development</label>
         <input type="radio" id="db" name="subject" value="db">
         <label for="db">Database</label>
         </div><br/>
         <div>
         <button id="submit" type="submit">Submit</button>
      </div>
   </form>
</body>
</html>

Create a Form using HTML Tables

Now, let us convert the above form to a form created using HTML tables. The <form> is set inside the <table> tag ?


<table>
   <form id="myform">
      <!- -
      -->
   </form>
</table>

Then come the rows, wherein we have set the from input type ?


<tr>
   <td>
      <input type="radio" id="prog" name="subject" value="prog">
   </td>
</tr>

Example

The above goes on for every input type i.e. a <tr> for every input. Let us now see the complete example ?


<!DOCTYPE html>
<html>
<head>
   <title>HTML Form</title>
</head>
<body>
   <h1>Details</h1>
   <p>Select the subject you want to choose:</p>
   <table>
      <form id="myform">
         <tr>
            <td>
            <input type="radio" id="prog" name="subject" value="prog">
            </td>
            <td>
            <label for="prog">Programming</label>
            </td>
         </tr>
         <tr>
            <td> <input type="radio" id="dev" name="subject" value="dev"></td>
            <td> <label for="dev">Web Development</label>
            </td>
         </tr>
         <tr>
            <td><input type="radio" id="db" name="subject" value="db"></td>
            <td> <label for="db">Database</label>
            </td>
         </tr>
         <tr>
            <td><button id="submit" type="submit">Submit</button></td>
         </tr>
      </form>
   </table>
</body>
</html>
Updated on: 2022-10-18T08:12:52+05:30

354 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements