Beispielanalyse des Unterschieds zwischen Eingabe, Senden, Schaltfläche und Eingabetaste zum Senden von Daten

In diesem Artikel werden Beispiele verwendet, um die Unterschiede zwischen Eingabe, Senden, Schaltfläche und Eingabetaste zum Senden von Daten zu analysieren. In letzter Zeit wurden in Projekten viele Formularübermittlungen verwendet, und es wurde festgestellt, dass Eingabe, Schaltfläche, Senden und Sogar die Eingabetaste kann das Senden eines Formulars auslösen. Im Folgenden werden die Unterschiede zwischen ihnen erläutert. Ich hoffe, es kann allen helfen.

<form>
  <input name="name">
  <input type="submit" value="提交">
</form>

Auf diese Weise übermittelt: Wenn der Eingabewert 22222222 ist, wird die später übermittelte URL zu localhost:3980/input.html?name=222222
Es gibt einige bemerkenswerte Details:

Nach der Einstellung „type=submit“ wird das Eingabesteuerelement zu einer Schaltfläche und der angezeigte Text ist sein Wert. Der Standardwert ist „Submit“.
Der Standardwert von form[method] ist GET, daher wird die GET-Methode verwendet, um nach der Übermittlung zur Seite zu springen.
Der Standardwert von input[type] ist Text, daher wird die erste Eingabe als Textfeld angezeigt.

Eingabe ist eigentlich eine Schaltfläche, die von einem Eingabesteuerelement abgeändert wurde, das aus dem groben Design der frühen Tage des Webs stammt. Wir können dies überprüfen, indem wir einen Namen dafür festlegen:

Submit Die endgültige URL wird zu localhost:3980/input.html?name=222222&btn=submit

Beachten Sie, dass die URL /?key=foo&btn=ok lautet. Das Eingabesteuerelement als Schaltfläche wird auch als Formulareingabe an den Server übermittelt. Handelt es sich um ein interaktives Steuerelement oder ein Datensteuerelement? Die Positionierung ist etwas unklar. Darüber hinaus lässt sich sein Stil nur schwer anpassen und kann nicht als Container für andere Tags verwendet werden. Daher wird empfohlen, die Eingabe nicht als Schaltfläche zum Senden eines Formulars zu verwenden.

Hinweis: Das Typattribut der Eingabe kann auch „Schaltfläche“ sein. In diesem Fall handelt es sich lediglich um eine Schaltfläche, die keine Formularübermittlung auslöst.

2. Schaltfläche[tpe=submit] Die Semantik der Schaltfläche ist sehr klar, das heißt, eine Schaltfläche enthält keine Daten und ihre Funktion ist die Benutzerinteraktion. Es verfügt aber auch über Typ- und Wertattribute. Der Standardwert des Typs ist „Senden“. Wenn Sie also auf eine Schaltfläche klicken, wird das Formular gesendet:

<form>
 <input name=&#39;key&#39;>
 <button>确定</button>
</form>

Wenn Sie IE-Browserkompatibilität nutzen, denken Sie bitte an den Standardwert von „Button[Typ]“. im IE Der Wert ist button, was bedeutet, dass es sich nur um eine Schaltfläche handelt und keine Formularübermittlung auslöst.

Darüber hinaus legen wir den Text des Buttons fest, indem wir den Elementinhalt festlegen. Dies bedeutet, dass es sich bei der Schaltfläche um ein Container-Steuerelement handelt, das beliebige HTML-Tags enthalten kann, und der Stil einfacher anzupassen ist. Dies ist einer der Gründe, warum Schaltflächen in der Bootstrap-Dokumentation häufig als Beispiele verwendet werden.

Allerdings werden die Tasten unordentlich sein. Mit der Schaltfläche können Name und Wert festgelegt werden. Beim Absenden des Formulars wird der Wert als Formulardaten an den Server übermittelt. Im IE wird der Inhalt zwischen den Start- und End-Tags der Schaltfläche sogar als dem Namen entsprechender Wert an den Server übermittelt. Die Ähnlichkeiten zwischen Schaltfläche und Eingabe enden hier jedoch nicht. Durch Klicken auf die Schaltfläche wird das Formular zurückgesetzt (dies ist sehr nützlich). w3school gibt das folgende Beispiel:

<form action="form_action.asp" method="get">
 First name: <input type="text" name="fname" />
 Last name: <input type="text" name="lname" />
 <button type="submit" value="Submit">Submit</button>
 <button type="reset" value="Reset">Reset</button>
</form>

Über Schaltflächen gibt es nicht viel zu sagen. Es wird empfohlen, Schaltflächen als interaktive Schaltflächen zum Absenden von Formularen zu verwenden. Bitte achten Sie auch auf die Einstellung type=submit, um die Kompatibilität mit dem IE zu gewährleisten.

Eingabetaste zum Absenden des Formulars

Eingabetaste zum Absenden des Formulars! Möglicherweise ist Ihnen jedoch aufgefallen, dass nicht alle Formulare mit der Eingabetaste übermittelt werden können. Schauen wir uns den HTML2.0-Standard an:

Wenn ein Formular nur ein einzeiliges Texteingabefeld enthält, sollte der Benutzeragent die Eingabe in dieses Feld als Aufforderung zum Senden des Formulars akzeptieren.

Wenn das Formular nur ein einzeiliges Texteingabesteuerelement enthält, sollte der Benutzeragent die Eingabetaste akzeptieren, um das Formular abzusenden.

„Einzelzeilig“ bezieht sich auf den Typ „Text“ und nicht auf „Textbereich“. Offensichtlich ist es nicht akzeptabel, die Eingabetaste zu drücken, um das Formular im Textbereich abzusenden. Tatsächlich können in der Praxis auch mehrere einzeilige Eingaben mit der Eingabetaste übermittelt werden, beispielsweise auf der Anmeldeseite.

4. Formularübermittlung verhindern

Das Verhindern der Formularübermittlung ist ebenfalls ein häufiges Thema und wird normalerweise für die clientseitige Formularvalidierung verwendet. Die allgemeine Methode besteht darin, onsubmit festzulegen:

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

Sie müssen nur am Ende einer Reihe von onsubmit-Anweisungen false zurückgeben, um zu verhindern, dass sie übermittelt wird. Wenn Sie eine Methode aufrufen möchten, um zu entscheiden, ob die Übermittlung verhindert werden soll, denken Sie daran, den Rückgabewert der Methode hier zurückzugeben:

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

Verwandte Empfehlungen:

Formular-Übermittlungsdaten Probleme

Fragen zur Übermittlung von Daten

Beispiel für die Steuerung des Eingabeeingabeformats in HTML

Das obige ist der detaillierte Inhalt vonBeispielanalyse des Unterschieds zwischen Eingabe, Senden, Schaltfläche und Eingabetaste zum Senden von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!