Der Unterschied zwischen Schaltfläche und Eingabetyp = Schaltfläche und Vorsichtsmaßnahmen

<button>-Tag <br />Definition und Verwendung
Das Tag <button> definiert eine Schaltfläche.
Innerhalb des Schaltflächenelements können Sie Inhalte wie Text oder ein Bild platzieren. Dies ist der Unterschied zwischen diesem Element und einer mit dem Eingabeelement erstellten Schaltfläche.
Im Vergleich zu <inputtype="button"> bietet das <button>-Steuerelement leistungsfähigere Funktionen und umfangreichere Inhalte. Alles zwischen den Tags <button> und </button> ist der Inhalt der Schaltfläche, einschließlich aller zulässigen Textinhalte wie Text- oder Multimediainhalte. Beispielsweise können wir in die Schaltfläche ein Bild und den dazugehörigen Text einfügen und diese verwenden, um ein ansprechendes Beschriftungsbild in der Schaltfläche zu erstellen.
Das einzige verbotene Element ist eine Imagemap, da ihre maus- und tastatursensitiven Aktionen das Verhalten der Formularschaltflächen beeinträchtigen würden.
Geben Sie für Schaltflächen immer ein Typattribut an. Der Standardtyp für Internet Explorer ist „Schaltfläche“, während der Standardtyp in anderen Browsern (einschließlich der W3C-Spezifikation) „Senden“ ist.
Browser-Unterstützung <br />Das <button>-Tag wird von allen gängigen Browsern unterstützt.
Wichtig : Wenn Sie das Schaltflächenelement in einem HTML-Formular verwenden, übermitteln verschiedene Browser unterschiedliche Werte. Internet Explorer übermittelt den Text zwischen <button> und <button/>, während andere Browser den Inhalt des Wertattributs übermitteln. Um eine Schaltfläche zu erstellen, verwenden Sie das Eingabeelement in einem HTML-Formular.
Hinweise <br />Bei der Verwendung des <button>-Tags wird leicht davon ausgegangen, dass dieser als <inputtype="button"> verwendet wird, was leicht zu folgender falscher Verwendung führen kann:
1. Holen Sie sich den Wert von <buttonid="customBtn"value="test">button</button>value über $('#customBtn').val(). Im IE (IE-Kernel) ist der erhaltene Wert „button“ statt „test“, und im Nicht-IE ist der erhaltene Wert „test“. Siehe den ersten Satz, der oben rot hervorgehoben ist.
Dies sollte von <inputtype="button"> unterschieden werden.
Durch diese beiden Methoden $('#customBtn').val(), $('#customBtn').attr('value') wird der Wert in verschiedenen Browsern wie folgt abgerufen:

Browser/Wert	$('#customBtn').val()	$('#customBtn').attr('Wert')
Firefox 13.0	prüfen	prüfen
Chrom 15.0	prüfen	prüfen
Oper11.61	prüfen	prüfen
Safari 5.1.4	prüfen	prüfen
IE9.0	Taste	Taste

Dies kann durch Testen des folgenden Codes überprüft werden

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<metahttp-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
<scripttype="text/javascript"src="jquery-1.4.4.min.js"></script>
<scripttype="text/javascript">
$(Funktion(){
$('#test1').klick(Funktion(){
Alarm ($('#customBtn').attr('Wert'));
});
$('#test2').klick(Funktion(){
Alarm($('#customBtn').val());
});
});
</Skript>
</Kopf>
<Text>
<buttonid="customBtn"value="test">按钮</button>
<inputtype="button"id="test1"value="getattr"/>
<inputtype="button"id="test2"value="getval"/>
</body>
</html>

2. Wenn Sie das Tag <button> versehentlich in das Tag <form> einfügen, werden Sie feststellen, dass durch Klicken auf diese Schaltfläche eine Übermittlung erfolgt, was <inputtype="submit"/> entspricht.
Bitte lesen Sie den zweiten Satz, der oben rot hervorgehoben ist, um zu verstehen, was er bedeutet.
Behandeln Sie das <button>-Tag nicht als Eingabeelement in einem <form>.
Dies kann durch Testen des folgenden Codes überprüft werden

Code kopieren

Der Code lautet wie folgt:

<html>
<Text>
<formaction="">
<button>Schaltfläche</button>
<inputtype="einreichen"value="inputeinreichen"/>
<inputtype="Schaltfläche"value="Eingabeschaltfläche"/>
</form>
</body>
</html>

<<: Erstellen der Benutzererfahrung

>>: Eine kurze Diskussion über das Prinzip der bidirektionalen Datenbindung von React

Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen

Der Unterschied zwischen Schaltfläche und Eingabetyp = Schaltfläche und Vorsichtsmaßnahmen

Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen

Responsive Webdesign lernen (2) — Können Videos responsiv gemacht werden?

So löschen Sie den gesamten Inhalt eines Verzeichnisses mit Ansible

JavaScript implementiert eine einzelne verknüpfte Listenprozessanalyse

Vues einfacher Implementierungsprozess zur Nachahmung der NetEase Cloud Music Player-Schnittstelle

Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen

Detaillierte Erläuterung der MySQL SQL99-Syntax für Inner Join und Non-Equivalent Join

Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL

JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien

Analyse von Beispielen für MySQL-Benutzerverwaltungsvorgänge

Artikel empfehlen

Flexibles Boxmodell von CSS und CSS3 zur Anpassung der Elementbreite (-höhe)

Vue implementiert Countdown-Funktion

Nginx-Konfiguration: Trennung von PC-Site und mobiler Site zur Realisierung der Umleitung

10 Dinge, die exzellente Webentwickler wissen müssen, um ihre Entwicklungsfähigkeiten zu verbessern

MySQL 8.0.18 Hash Join unterstützt keine Links-/Rechts-Joins. Probleme mit Links- und Rechts-Joins

Detaillierte Erläuterung der MySQL-Installation und der neuen Kennwortauthentifizierungsmethode in MySQL 8.0

N Möglichkeiten, adaptive Teiler geschickt mit CSS zu implementieren

Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker

Ausführliche Erklärung zum Currying von JS-Funktionen

Verwendung der Linux Dynamic Link Library

XHTML-Tutorial, eine kurze Einführung in die Grundlagen von XHTML

HTML-Hintergrundbild und Hintergrundfarbe_PowerNode Java Academy

So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular

mysql + mybatis implementiert gespeicherte Prozedur + Transaktion + gleichzeitigen Mehrfachabruf von Seriennummern

Implementieren eines Webplayers mit JavaScript