Analysieren Sie die Unterschiede zwischen der Eingabe „Senden', der Schaltfläche und der Eingabetaste zum Senden von Daten

In den letzten Projekten wurden viele Formularübermittlungen verwendet, und ich habe festgestellt, dass Eingabe, Schaltfläche, Senden und sogar die Eingabetaste die Formularübermittlung auslösen können. Im Folgenden werde ich Ihnen die Unterschiede in ihrer Verwendung erläutern.

<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 dessen 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 festlegen:

<input name=&#39;btn&#39; value=&#39;提交&#39; type=&#39;submit&#39;>

Die übermittelte 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 eine Schaltfläche sein. In diesem Fall handelt es sich nur um eine Schaltfläche, die keine Formularübermittlung auslöst.

2. Die Semantik der button[tpe=submit]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 die IE-Browserkompatibilität nutzen, bitte Denken Sie daran: Der Standardwert von button[type] im IE 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 Senden 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 Absenden 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. Verhindern der Formularübermittlung

Die Verhinderung 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 ein Commit blockiert 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>

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