Einführung und Beispiele für versteckte Felder in HTML

Einführung und Beispiele für versteckte Felder in HTML
Grundlegende Syntax:

<Eingabetyp="versteckt" Name="Feldname" Wert="Wert">

Wirkung:

1 Versteckte Felder sind für Benutzer auf der Seite unsichtbar. Der Zweck des Einfügens versteckter Felder in ein Formular besteht darin, Informationen zur Verwendung durch das Programm zu sammeln oder zu senden, das das Formular verarbeitet. Wenn der Betrachter auf die Schaltfläche „Senden“ klickt, um das Formular zu versenden, werden die Informationen in den ausgeblendeten Feldern auch an den Server gesendet.

2 Manchmal müssen wir Benutzern beim Absenden eines Formulars einige Informationen zur Bestätigung ihrer Identität geben, z. B. einen Sitzungsschlüssel usw. Natürlich können diese Dinge auch durch die Verwendung von Cookies erreicht werden, die Verwendung von ausgeblendeten Feldern ist jedoch viel einfacher. Und es wird keine Probleme geben, wenn der Browser Cookies nicht unterstützt oder Benutzer sie deaktivieren.

3 Manchmal gibt es in einem Formular mehrere Schaltflächen zum Senden. Wie kann das Programm erkennen, welche Schaltfläche der Benutzer zum Senden gedrückt hat? Wir können ein verstecktes Feld schreiben und dann zu jeder Schaltfläche onclick="document.form.command.value="xx"" hinzufügen. Nachdem wir die Daten erhalten haben, können wir zuerst den Wert des Befehls überprüfen, um zu wissen, welche Schaltfläche der Benutzer gedrückt hat, um ihn zu übermitteln.

4 Manchmal gibt es auf einer Webseite mehrere Formulare. Wir wissen, dass mehrere Formulare nicht gleichzeitig übermittelt werden können, aber manchmal interagieren diese Formulare miteinander. Wir können dem Formular versteckte Felder hinzufügen, um sie zu verbinden.

5 JavaScript unterstützt keine globalen Variablen, aber manchmal müssen wir globale Variablen verwenden. Wir können den Wert zuerst in einem versteckten Feld speichern und sein Wert geht nicht verloren.

6 Ein weiteres Beispiel ist, dass beim Drücken einer Schaltfläche vier kleine Fenster aufpoppen und beim Klicken auf eines der kleinen Fenster die anderen drei automatisch geschlossen werden. Der Internet Explorer unterstützt jedoch nicht, dass kleine Fenster sich gegenseitig aufrufen. Sie können daher nur ein verstecktes Feld in das übergeordnete Fenster schreiben. Wenn das kleine Fenster erkennt, dass der Wert des versteckten Felds nahe beieinander liegt, schließt es sich selbst.

Beispiel: Verwenden Sie „hidden“, um beim Klicken auf die Schaltfläche „Senden“ der Zahl 1 hinzuzufügen.

Wert automatisch erhöhen.htm

Code kopieren
Der Code lautet wie folgt:

<form action="Werterhöhung.ashx" method="post">
<Eingabetyp="versteckt" Name="_viewstate" Wert="a" />
<Eingabetyp="versteckt" Name="_div" Wert="@n" />
<!-- <input name="txt" type="text" value="@value" />-->
<div>@n</div>
<input type="senden" value="klicken" />
</form>

Verwenden einer allgemeinen Handlerimplementierung

Wert auto-increment.ashx

Code kopieren
Der Code lautet wie folgt:

Int. n = 0;
public void ProcessRequest (HttpContext Kontext) {
Kontext.Response.ContentType = "text/html";

Zeichenfolgenpfad = Kontext.Request.MapPath("Wertinkrement.htm");
Zeichenfolge html = System.IO.File.ReadAllText(Pfad);
//Überprüfen, ob die Seite zum ersten Mal geladen wird
Zeichenfolgenansichtsstatus = Kontext.Anforderung.Formular["_Ansichtsstatus"];
wenn (!string.IsNullOrEmpty(Ansichtszustand))
{
//Klicken Sie auf die Schaltfläche „Senden“.
//Holen Sie sich den Wert des versteckten Felds
Zeichenfolge s = Kontext.Anforderung.Formular["_div"];
wenn (int.TryParse(s, out n))
{
n++;
html = html.Replace("@n",n.ToString());
}
}
anders
{
//Die Seite wird zum ersten Mal geladen. Weisen Sie div und den entsprechenden versteckten Feldern div Werte zu.
html = html.Replace("@n", n.ToString());
}
Kontext.Antwort.Schreiben(html);
}

<<:  Beschreibung der Ausführungsmechanismen von statischen Seiten und dynamischen Seiten

>>:  So starten Sie ein Vue-Projekt mit dem M1 Pro-Chip

Artikel empfehlen

Die Element-UI-Tabelle realisiert die Dropdown-Filterfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Methode zum Erstellen eines Redis-Clusters basierend auf Docker

Laden Sie das Redis-Image herunter Docker-Pull yy...

Eine kurze Diskussion über den Vater-Sohn-Werttransfer in Vue3

Inhaltsverzeichnis Vom Vater zum Sohn: 1. Übergeb...

Zusammenfassung der 10 wichtigsten JavaScript-Interviewfragen (empfohlen)

1.Dies deutet auf 1. Wer ruft wen an? Beispiel: F...

Vue3 setup() - Erweiterte Verwendungsbeispiele - ausführliche Erklärung

Inhaltsverzeichnis 1. Unterschiede zwischen Optio...

MySQL-Einschränkungen - Super detaillierte Erklärung

Inhaltsverzeichnis MySQL-Einschränkungsoperatione...

Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?

Vorwort Als grundlegende Datenstruktur spielen Ar...

So erhalten Sie den Inhalt einer TXT-Datei über FileReader in JS

Inhaltsverzeichnis JS erhält den Inhalt der TXT-D...

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

Im täglichen Geschäftsleben gibt es zwei gängige ...

Zusammenfassung der allgemeinen MySQL-Funktionen

Vorwort: Die MySQL-Datenbank bietet eine breite P...