search

Home >Web Front-end >HTML Tutorial >How to build a form using tables in HTML?

How to build a form using tables in HTML?

王林
王林forward
2023-09-15 21:05:081639browse

How to build a form using tables in HTML?

These tables can be used to create and structure HTML-formatted forms. But, before that, let's see how to create a form in HTML.

Create a form using HTML

Example

Let's see how to create a form using the

tag. We set up three input type radios with separate 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 table

Now, let’s convert the above form into one created using HTML tables.

Set within tags - 
<table>
   <form id="myform">
      <!- -
      -->
   </form>
</table>

Then comes the line where we set the input type -

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

Example

The above applies to every input type, i.e. there is a

for each input. Now let's 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>

The above is the detailed content of How to build a form using tables in HTML?. For more information, please follow other related articles on the PHP Chinese website!

html
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to check if a value is a safe integer in JavaScript?Next article：How to check if a value is a safe integer in JavaScript?

Related articles

See more