首頁 > 文章 > web前端 > "POST未選取的HTML複選框"

"POST未選取的HTML複選框"

王林轉載: 2023-09-01 19:29:06705瀏覽

POST未選取的HTML複選框

在本教學中，我們將學習 POST 未選取的 HTML 複選框。

要與使用者交互，有必要透過網站取得他們的輸入或資料。 HTML 表單用於取得使用者的輸入。表格對於獲取網站上的用戶資料至關重要。這些表單會取得使用者的輸入並使用 HTTP 請求將資料傳送到伺服器。

HTTP 請求有兩種類型，一種是 GET，另一種是 POST。 POST 請求是最常用的類型，因為它安全且可以發送大量資料。但這兩種方法都會發送其值已更改或編輯的資料。因此，未編輯的值或未選取的複選框不會傳送到伺服器。

那麼，讓我們看看如何從表單中 POST 未選取的 HTML 複選框。

使用隱藏輸入類型

隱藏輸入類型是一種輸入字段，既不會接受使用者的輸入，也不會顯示。此輸入欄位預設僅用於透過 HTTP 請求傳送該欄位的值。這是形成數據和資料庫的一個非常重要的領域。

如果沒有 HTML 表單，我們就無法將資料傳送到伺服器。要在伺服器上傳送不是從使用者取得的附加數據，我們必須使用 HTML 中的隱藏輸入類型。

使用者可以按照以下語法使用隱藏輸入類型來發布未選取的 HTML 複選框 -

文法

<input type = "checkbox" id = "Check" name = "CheckBox" value = "1"/>
<input type = "hidden" id = "Checkhidden" name = "CheckBox" value = "0"/>
<script>
if(document.getElementById(" <Checkbox ID here> ").checked) {
   document.getElementById( <Hidden field id here> ).disabled = true;
}
</script>

依照上述語法使用隱藏輸入欄位。

範例 1

在下面的範例中，我們使用表單中的核取方塊來取得使用者的輸入。我們將看到在使用複選框發布資料後我們會得到什麼。我們在表單中新增了七個複選框。點擊提交按鈕後，我們將從表單中取得post方法發送的資料。

<html>
<body>
   <h2> Using <i> POST method </i> to post the HTML checkboxes </h2>
   <form method="post" id="form" onsubmit="func(); return false">
      Select your Subjects: <br>
      <input type="checkbox" id="group1" name="Subject" value="Math" />
      <label for="group1"> Math </label><br>
      <input type="checkbox" id="group2" name="Subject" value="Science" />
      <label for="group2"> Science </label><br>
      <input type="checkbox" id="group3" name="Subject" value="English" />
      <label for="group3"> English </label> <br>
      <input type="checkbox" id="group4" name="Subject" value="History" />
      <label for="group4"> History </label> <br>
      <input type="checkbox" id="group5" name="Subject" value="Geography" />
      <label for="group5"> Geography </label> <br>
      <input type="checkbox" id="group6" name="Subject" value="Hindi" />
      <label for="group6"> Hindi </label> <br>
      <input type="checkbox" id="group7" name="Subject" value="Information technology" />
      <label for="group7"> Information technology </label> <br>
      <button> Submit </button>
   </form>
   <div id="output"> </div>
   <script>
      function func() {
         const form = document.getElementById('form');
         const formData = new FormData(form);
         const output = document.getElementById('output');
         output.style.color = "red";
         for (const [key, value] of formData) {
            output.innerHTML += `${key}: ${value}` + '<br>';
         }
      }
   </script>
</body>
</html>

在上面的範例中，使用者可以看到我們只會取得選取的複選框的值，並且只有這些值才會傳送到伺服器。

範例 2

在下面的範例中，無論複選框是否選中，我們都使用隱藏輸入類型將資料傳送到伺服器。我們正在定義與表單中其他複選框同名的隱藏輸入類型。在腳本中，我們給出了一個條件，如果選中該複選框，則受尊重的隱藏字段將被禁用。這樣，我們將不會獲得同一個複選框的雙精度值。

<html>
<body>
   <h2> Using <i> hidden type </i> of input to post unchecked HTML checkboxes </h2>
   <form method="post" action="#" onsubmit="func(); return false" id="form">
      <label for="fname"> Enter your name: </label>
      <input type="text" id="fname" name="Fname" value="" /> <br>
      <label for="lname"> Enter your name: </label>
      <input type="text" id="lname" name="Lname" value="" /> <br> Select your gender: <br>
      <input type="hidden" id="maleHidden" name="Gender" value="He is not a male" />
      <input type="checkbox" id="male" name="Gender" value="male" />
      <label for="male"> Male </label> <br>
      <input type="hidden" id="femaleHidden" name="Gender" value="He is not a female" />
      <input type="checkbox" id="female" name="Gender" value="female" />
      <label for="female"> Female </label> <br>
      <input type="hidden" id="transgenderHidden" name="Gender" value="He is not a transgender" />
      <input type="checkbox" id="transgender" name="Gender" value="transgender" />
      <label for="transgender"> Transgender </label> <br>
      <button> Submit </button>
      <div id="output"> </div>
   </form>
   <script>
      function func() {
         if (document.getElementById("male").checked) {
            document.getElementById('maleHidden').disabled = true;
         }
         if (document.getElementById("female").checked) {
            document.getElementById('femaleHidden').disabled = true;
         }
         if (document.getElementById("transgender").checked) {
            document.getElementById('transgenderHidden').disabled = true;
         }
         const form = document.getElementById('form');
         const formData = new FormData(form);
         const output = document.getElementById('output');
         output.style.color = "red";
         for (const [key, value] of formData) {
            output.innerHTML += `${key}: ${value}` + '<br>';
         }
      }
   </script>
</body>
</html>

在上面的範例中，使用者可以看到我們可以使用隱藏作為 HTML 中的輸入類型來發布未選取的 HTML 複選框。

在本教學中，我們學習如何 POST 未選取的 HTML 複選框。

以上是"POST未選取的HTML複選框"的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html 数据库 http

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用HTML和JavaScript建立一個彈跳球？下一篇：如何使用HTML和JavaScript建立一個彈跳球？

看更多