How to 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>

Advertisements