Create a Form Using HTML Tables

We can easily create a form with tables in HTML. But, before that let us see how to create a form in HTML.

Create a Form in HTML

Example

We will first see how to create a form in HTML using only the <form> tag ?

<!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>

Output

Create a Form using HTML Tables

Example

Now, let us convert the above form to a form created using HTML tables ?

<!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>
</body>
</html>

Output

Updated on: 2022-12-06T10:16:51+05:30

9K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements