How to build a form using tables in HTML?-HTML Tutorial-php.cn

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>

Copy after login

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>

Copy after login

Then comes the line where we set the input type -

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

Copy after login

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>

Copy after login

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!

Related labels：

table building form

source：tutorialspoint.com

Previous article：How to check if a value is a safe integer in JavaScript? Next article：How to create an image fold effect using HTML and CSS?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn