Heim Web-Frontend CSS-Tutorial Ausführliche Erläuterung der Eingabe, Schaltfläche „Senden', und Eingabe der wichtigsten Übermittlungsdaten

Ausführliche Erläuterung der Eingabe, Schaltfläche „Senden', und Eingabe der wichtigsten Übermittlungsdaten

Dec 20, 2016 pm 02:33 PM

<form>
  <input name="name">
  <input type="submit" value="提交">
</form>
Nach dem Login kopieren

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 dem Festlegen von 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 nach der Übermittlung die GET-Methode verwendet, um zur Seite zu springen.
Der Standardwert von input[type] ist Text, sodass die erste Eingabe als Textfeld angezeigt wird.

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:

<input name='btn' value='Submit' type='submit'>

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:

&lt;form&gt;
 &lt;input name=&#39;key&#39;&gt;
 &lt;button&gt;确定&lt;/button&gt;
&lt;/form&gt;
Nach dem Login kopieren

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:

&lt;form action=&quot;form_action.asp&quot; method=&quot;get&quot;&gt;
 First name: &lt;input type=&quot;text&quot; name=&quot;fname&quot; /&gt;
 Last name: &lt;input type=&quot;text&quot; name=&quot;lname&quot; /&gt;
 &lt;button type=&quot;submit&quot; value=&quot;Submit&quot;&gt;Submit&lt;/button&gt;
 &lt;button type=&quot;reset&quot; value=&quot;Reset&quot;&gt;Reset&lt;/button&gt;
&lt;/form&gt;
Nach dem Login kopieren

Ich werde nicht viel über Schaltflächen 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 haben Sie jedoch bemerkt, 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.

„Einzeilig“ 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 zu senden. 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:

&lt;form onsubmit=&quot;return false;&quot;&gt;
 &lt;input name=&#39;key&#39;&gt;
 &lt;input value=&#39;ok&#39; type=&#39;submit&#39;&gt;
&lt;/form&gt;
Nach dem Login kopieren
Nach dem Login kopieren

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:

&lt;form onsubmit=&quot;return false;&quot;&gt;
 &lt;input name=&#39;key&#39;&gt;
 &lt;input value=&#39;ok&#39; type=&#39;submit&#39;&gt;
&lt;/form&gt;
Nach dem Login kopieren
Nach dem Login kopieren

Das ist alles, vielen Dank für die Unterstützung der chinesischen PHP-Website

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Mar 09, 2025 pm 12:53 PM

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Mar 07, 2025 am 11:33 AM

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Mar 02, 2025 am 09:03 AM

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Arbeiten mit GraphQL Caching Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Arbeiten mit GraphQL Caching

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Mar 08, 2025 am 09:45 AM

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Mar 04, 2025 am 10:22 AM

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken Datei hochladen mit Multer in node.js und ausdrücken Mar 02, 2025 am 09:15 AM

Datei hochladen mit Multer in node.js und ausdrücken

See all articles