如何利用表來構建 HTML 中的表單？

表可用於在 HTML 中建立和組織表格。但是，在此之前，讓我們看看如何在 HTML 中建立表單。

在 HTML 中建立表單

示例

讓我們看看如何使用 <form> 標籤建立表單。我們設定了三個使用不同標籤的輸入型別：-

<!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 表格建立的表單。<form> 設定在 <table> 標籤內 -

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

接下來是行，我們設定了鍵盤輸入型別 -

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

示例

以上的內容適用於每種輸入型別，即每個輸入使用 <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>

更新於: 2022-10-18

310 次瀏覽

開啟你的 職業生涯

完成學習獲得認證

開始
廣告