Heim >Web-Frontend >HTML-Tutorial >„POST deaktiviertes HTML-Kontrollkästchen'
„POST deaktiviertes HTML-Kontrollkästchen'
- 王林nach vorne
- 2023-09-01 19:29:06754Durchsuche
In diesem Tutorial lernen wir, ein deaktiviertes HTML-Kontrollkästchen zu posten.
Um mit Benutzern zu interagieren, ist es notwendig, deren Eingaben oder Daten über die Website einzuholen. HTML-Formulare werden verwendet, um Benutzereingaben einzuholen. Formulare sind für die Erfassung von Benutzerdaten auf Ihrer Website unerlässlich. Diese Formulare nehmen Eingaben des Benutzers entgegen und senden die Daten über HTTP-Anfragen an den Server.
Es gibt zwei Arten von HTTP-Anfragen: eine ist GET und die andere ist POST. POST-Anfragen sind der am häufigsten verwendete Typ, da sie sicher sind und große Datenmengen senden können. Beide Methoden senden jedoch Daten, deren Werte geändert oder bearbeitet wurden. Daher werden unbearbeitete Werte oder nicht aktivierte Kontrollkästchen nicht an den Server gesendet.
Sehen wir uns also an, wie man ein nicht markiertes HTML-Kontrollkästchen aus einem Formular POSTET.
Versteckte Eingabetypen verwenden
Ein versteckter Eingabetyp ist ein Eingabefeld, das weder Eingaben des Benutzers akzeptiert noch angezeigt wird. Dieses Eingabefeld wird standardmäßig nur zum Senden des Feldwerts über eine HTTP-Anfrage verwendet. Dies ist ein sehr wichtiger Bereich bei der Bildung von Daten und Datenbanken.
Ohne das HTML-Formular können wir keine Daten an den Server senden. Um zusätzliche Daten an den Server zu senden, die nicht vom Benutzer stammen, müssen wir versteckte Eingabetypen in HTML verwenden.
Benutzer können nicht aktivierte HTML-Kontrollkästchen mithilfe versteckter Eingabetypen posten, indem sie der folgenden Syntax folgen -
Grammatik
<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>
Verwenden Sie ausgeblendete Eingabefelder gemäß der oben genannten Syntax.
Beispiel 1
Im folgenden Beispiel verwenden wir Kontrollkästchen in einem Formular, um Eingaben vom Benutzer zu erhalten. Wir werden sehen, was wir erhalten, nachdem wir Daten mithilfe von Kontrollkästchen veröffentlicht haben. Wir haben dem Formular sieben Kontrollkästchen hinzugefügt. Nachdem wir auf die Schaltfläche „Senden“ geklickt haben, erhalten wir die per Post gesendeten Daten aus dem Formular.
<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>
Im obigen Beispiel kann der Benutzer sehen, dass wir nur die Werte der aktivierten Kontrollkästchen erhalten und nur diese Werte an den Server gesendet werden.
Beispiel 2
Im folgenden Beispiel verwenden wir einen versteckten Eingabetyp, um Daten an den Server zu senden, unabhängig davon, ob das Kontrollkästchen aktiviert ist oder nicht. Wir definieren einen versteckten Eingabetyp mit demselben Namen wie andere Kontrollkästchen im Formular. Im Skript haben wir eine Bedingung angegeben, dass die entsprechenden ausgeblendeten Felder deaktiviert werden, wenn das Kontrollkästchen aktiviert ist. Auf diese Weise erhalten wir keinen doppelten Wert für dasselbe Kontrollkästchen.
<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>
Im obigen Beispiel kann der Benutzer sehen, dass wir ein nicht aktiviertes HTML-Kontrollkästchen mit „hidden“ als Eingabetyp in HTML posten können.
In diesem Tutorial haben wir gelernt, wie man ein nicht aktiviertes HTML-Kontrollkästchen POSTET.
Das obige ist der detaillierte Inhalt von„POST deaktiviertes HTML-Kontrollkästchen'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!