'POST未選取的HTML複選框'
- 王林轉載
- 2023-09-01 19:29:06737瀏覽
在本教學中，我們將學習 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中文網其他相關文章！