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

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (1)

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

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (1)

JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern

Eine kurze Diskussion über die Rolle leerer HTML-Links

React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)

Detaillierte Erklärung der Definition und Funktion von Trennzeichen in MySQL

ReactRouter-Implementierung

Einige wichtige Punkte des visuellen Website-Designs

Bringen Sie Ihnen bei, wie Sie elegant eine vertikale Zentrierung erreichen (empfohlen)

Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)

Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position

Artikel empfehlen

So migrieren Sie MySQL-Daten richtig nach Oracle

Detaillierte Erläuterung der MySQL-Replikationsprinzipien und praktischen Anwendungen

Mehrere Möglichkeiten zur Verwendung der V-Bind-Bindung mit Klasse und Stil in Vue

jQuery erzielt Vollbild-Scrolling-Effekt

Eine kurze Diskussion über MySQL-Index-Designprinzipien und die Unterschiede zwischen gängigen Indizes

So stellen Sie Spring Boot mit Docker bereit

js-Methode zur Realisierung der Warenkorbberechnung

Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10

Das Linux-System verbietet den Remote-Login-Befehl des Root-Kontos

Eine kurze Analyse der Grundkonzepte von HTML-Webseiten

Detaillierte Erläuterung zweier Möglichkeiten der Linux-Dienstverwaltung: service und systemctl

Vue2.x-Reaktionsfähigkeit – einfache Erklärung und Beispiele

Zusammenfassung des Installationsprozesses von MySql 8.0.11 und der beim Verknüpfen mit Navicat aufgetretenen Probleme

MySQL in Ubuntu 18.04 installieren (grafisches Tutorial)

Neue Blockbereichsfunktion von JavaScript ES