如何使用HTML中的表格来构建表单？-html教程-PHP中文网

如何使用HTML中的表格来构建表单？

王林

发布： 2023-09-15 21:05:08

转载

2054人浏览过

如何使用html中的表格来构建表单？

这些表格可用于创建 HTML 格式的表单并使其结构化。但是，在此之前，让我们看看如何在 HTML 中创建表单。

用 HTML 创建表单

示例

让我们看看如何使用

标签创建表单。我们设置了三种带有单独标签的输入类型收音机 -

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

登录后复制

使用 HTML 表格创建表单

现在，让我们将上面的表单转换为使用 HTML 表格创建的表单。

设置在标记内 -

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

然后是行，其中我们设置了输入类型 -

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

登录后复制

示例

上述内容适用于每种输入类型，即每个输入都有一个

。现在让我们看看完整的示例 -

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

登录后复制

以上就是如何使用HTML中的表格来构建表单？的详细内容，更多请关注php中文网其它相关文章！