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:
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
Artikel empfehlen
Warum wird nicht empfohlen, in Vue eine leere Zeichenfolge als Klassennamen zu verwenden?
Inhaltsverzeichnis Vergleichen Sie die leere Zeic...
Javascript implementiert die Webversion des Flipperspiels
Das mit JavaScript-Objekten und -Methoden impleme...
Einfache Implementierungsmethode zur Linux-Prozessüberwachung und zum automatischen Neustart
Zweck: Unter Linux kann das Serverprogramm aus ve...
Linux-Unlink-Funktion und wie man Dateien löscht
1. Unlink-Funktion Bei Hardlinks wird mit „unlink...
Eine Fallstudie zum gründlichen Verständnis der korrekten Verwendung des MySQL-InnDB-Joint-Index
Es gibt ein Unternehmen, das die 5 zuletzt überpr...
Implementierung der MySQL-Tabellenlöschoperation (Unterschiede zwischen Löschen, Abschneiden und Löschen)
In diesem Artikel werden hauptsächlich die Unters...
Docker nginx implementiert einen Host zum Bereitstellen mehrerer Sites
Die virtuelle Maschine, die ich von einer bestimm...
Eine kurze Analyse des Funktionsaufrufprozesses unter der ARM-Architektur
Inhaltsverzeichnis 1. Hintergrundwissen 1. Einfüh...
So kapseln Sie die Tabellenkomponente von Vue Element
Beim Kapseln von Vue-Komponenten werde ich weiter...
Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL
Einzeilige Funktionen vom Datumstyp in MySQL: CUR...
In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)
CSS-Schrifteigenschaften definieren die Schriftfa...
10 SQL-Anweisungsoptimierungstechniken zur Verbesserung der MySQL-Abfrageeffizienz
Die Ausführungseffizienz der MySQL-Datenbank hat ...
js realisiert das dynamische Laden von Daten durch Wasserfallfluss
In diesem Artikel erfahren Sie den spezifischen C...
CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft
Die korrekte Verwendung der CSS-Float-Eigenschaft...
So implementieren Sie ein Glücksradspiel im WeChat-Applet
Ich stelle hauptsächlich vor, wie man im WeChat-A...