Knöpfe in HTML
HTML -Schaltflächen sind wie jede andere Taste auf dem Bildschirm und können verschiedene Funktionen ausführen. Die HTML -Schaltflächen können zum Senden oder Zurücksetzen von Formularen verwendet werden, um ein Erfolgs- oder Gefahrenzeichen anzuzeigen, eine Link -Taste zu erstellen, usw.
In HTML können die Schaltflächen mit den und Elementen erstellt werden. Die mit Element erstellte Schaltfläche befasst sich jedoch nur mit Textdaten, während die mit Element erstellte Schaltfläche das Bild -Hochladen, eine umfangreiche Liste der Attribute Styling und vieles mehr unterstützt. Dieser Artikel enthält eine detaillierte Anleitung zu HTML -Schaltflächen mit den folgenden Lernergebnissen.
- So erstellen Sie HTML -Schaltflächen
- HTML -Tasten mit Bootstrap -Framework
- HTML -Tasten mit W3.CSS -Framework
So erstellen Sie eine HTML -Taste
Wie bereits erwähnt, kann eine HTML -Schaltfläche mit dem Element erstellt werden. Das Schaltflächen -Tag unterstützt zahlreiche Attribute, mit denen verschiedene Funktionen des Schaltflächen -Tags in Anspruch genommen werden können. Zum Beispiel kann es eine Funktion oder ein Skript für das On-Click-Ereignis übergeben. Darüber hinaus gibt das Typ -Attribut die Funktionalität der Schaltfläche an. Schauen wir uns die Attribute an, die vom HTML -Tastelelement unterstützt werden.
In der folgenden Tabelle werden die von dem Schaltflächen -Tag unterstützten Attribute aufgeführt.
| Attribut | Wert | Beschreibung |
|---|---|---|
| Autofokus | wahr falsch | Die Schaltfläche würde sich auf das Laden der Seite konzentrieren |
| Behinderte | wahr falsch | Die spezifische Taste wäre deaktiviert |
| form | Form_id | Dieses Attribut zeigt, dass die Schaltfläche einer von mehr Formen zugeordnet ist |
| Formaktion | URL | Dieses Attribut gibt an, wo die Daten des Formulars gesendet werden. |
| Formmethode | Holen Sie sich, posten | Gibt die HTTP -Methode für diese spezifische Form an |
| Formnovalidat | Formnovalidat | Die Formulardaten werden bei der Einreichung nicht validiert |
| Formtarget | _blank, _self, _parent, _top, Framenname | Gibt den Ort an, an dem die Antwort angezeigt wird |
| Name | Name | Dieses Attribut gibt den Namen der Schaltfläche an |
| Typ | Zurücksetzen, Senden, Schaltfläche | Der Tastentyp ist angegeben |
| Wert | Text | Der Anfangswert der Taste wird eingestellt |
| ONCLICK | Skript | Führt ein Skript aus, um auf die Schaltfläche zu klicken |
Lassen Sie uns diese Attribute mit Hilfe der folgenden Beispiele üben.
Beispiel 1: Tasten einreichen und zurücksetzen
Dieses Beispiel zeigt die Erstellung von HTML -Tasten mit Typ = "Senden" Und Typ = "Zurücksetzen" Attribute des Tags. Die Werte der Typ Attribut zeigen, dass die Daten beim Klicken auf die Schaltfläche übermittelt/ruhen werden.
Der unten angegebene Code erstellt Senden- und Zurücksetzen von Schaltflächen im Formular Tag.
Html
Der obige Code erstellt ein Formular, das zwei Schaltflächen mit enthält type = "” enden ”und type =“ Zurücksetzen ”. Das Onclick -Ereignis beider Schaltflächen wird ausgeübt und eine JavaScript -Funktion wird auf jeder Taste ausgeführt.
JavaScript
Funktion sub ()alarm ("Einreichung erfolgreich");
Funktion res ()
Alert ("Daten zurücksetzen");
Es werden zwei JS -Funktionen erstellt, die beim Klicken auf die Schaltflächen aufgerufen werden sollen.
Ausgang
Aus der Ausgabe wird beobachtet, dass bei den Tasten Senden und Zurücksetzen eine Warnung auf jedem Klick ausgelöst wird. Darüber hinaus werden die Daten eingereicht und auch erfolgreich zurückgesetzt.
Beispiel 2: HTML -Tasten mit Bootstrap
Die HTML -Schaltflächen können den CSS -Eigenschaften zugeordnet werden, um sie für eine bessere Präsentation zu stylen. Bootstrap ist ein weit verbreitetes CSS-Framework mit einer integrierten Klasse für Tasten. Der folgende HTML -Code übt den Erfolg, die Gefahr und die Verbindungsklasse von Bootstrap, um den Schaltflächen einige Effekte hinzuzufügen.
Um Bootstrap -Klassen hinzuzufügen, müssen Sie den folgenden CDN -Link in Ihr HTML -Dokument hinzufügen.
Ausgang
Die Ausgabe zeigt, dass die “BTN-SUCCESS"Klasse hat eine grüne Farbe, während das"Btn-danger”Klasse verwandelte die Farbe des Knopfes in rot. Andererseits die “Btn-LinkDie Klasse hat eine Linkschaltfläche erstellt.
Beispiel 3: HTML -Tasten mit W3.CSS -Framework
Der W3.Das CSS-Framework wurde aufgrund seiner integrierten Klassen häufig eingesetzt. Der folgende Code erstellt Schaltflächen mit W3.CSS -Klassen.
Die obigen Code praktizieren die Klassen W3-Orange, W3-Runden, W3-Bor und W3-Hover-Rot des W3.CSS -Framework. Diese Klassen verändern die Farbe, Form, Rand und verleihen den Schaltflächen schwebende Effekte.
Ausgang
Aus der Ausgabe wird beobachtet, dass der erste Knopf abgerundet und in orange Farbe ist. Während der zweite Knopf einen Schwebeffekt auf ihn hat und der Cursor darauf verschieben würde, würde die Taste rot gefärbt machen.
Abschluss
HTML -Schaltflächen können mit dem Element und dem Element mit dem erstellt werden Typ = "Senden" Attribut. Eine mit dem Element erstellte Schaltfläche bietet jedoch mehr Funktionen und Styling im Vergleich zu der von Tag erstellten Schaltfläche. Dieser Artikel enthält eine beschreibende Anleitung für HTML -Schaltflächen. Darüber hinaus dient dieser Beitrag auch das Styling von HTML -Schaltflächen unter Verwendung von zwei weit verbreiteten CSS -Frameworks, die W3 enthalten.CSS und Bootstrap.