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

Implementierungsschritte für die Docker-Bereitstellung von Springboot- und Vue-Projekten

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

Implementierungsschritte für die Docker-Bereitstellung von Springboot- und Vue-Projekten

Detaillierte Erläuterung der Verwendung des DockerHub-Image-Repository

Umfassendes Verständnis der HTML-Grundstruktur

Unterschied und Prinzipanalyse des Nginx-Forward- und Reverse-Proxy

Die neueste Installations- und Konfigurationsmethode für MySQL-5.7.21

Zwei Möglichkeiten zum Deklarieren privater Variablen in JavaScript

Die JD Vue3-Komponentenbibliothek unterstützt den detaillierten Prozess der Miniprogrammentwicklung

Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)

Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner

Installieren Sie JDK1.8 in einer Linux-Umgebung

Artikel empfehlen

So führen Sie in 1 Minute ein reibungsloses Upgrade und Rollback der Nginx-Version durch

Lösen Sie das Problem, dass der Container nach dem Docker-Lauf „Beendet (0)“ anzeigt.

Realisieren Sie Kartenaggregations- und Streueffekte basierend auf Vue + OpenLayer

MySQL Serie 3 Grundlagen

UCenter-Homepage fügt Statistikcode hinzu

Codeanalyse synchroner und asynchroner SetState-Probleme in React

Eine kurze Analyse von MySQL - MVCC

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7

Detaillierte Anwendungsfälle von MySql Escape

So fragen Sie die neueste Transaktions-ID in MySQL ab

MySQL-Update-Fall Update-Feldwert ist keine feste Operation

Vue3-Zeitstempelkonvertierung (ohne Verwendung von Filtern)

Detaillierte Erklärung zur Verwendung der Element-el-button-Button-Komponente

Tutorial zur Installation des AutoFs-Mount-Dienstes unter Linux

MySQL-Datenbank-Indexreihenfolge durch Sortierung – detaillierte Erklärung