Button-Tag in HTML
In diesem Artikel zeige ich Ihnen, wie Sie das Schaltflächen-Tag in HTML verwenden. Dies ist ein sehr wichtiges Tag in der HTML-Formularstruktur.
Das Button-Tag erstellt eine Schaltfläche, es erstellt keine Formular-Senden-Aktion wie das Input-Tag. Daher verwenden wir es oft in Kombination mit Javascript, um die erforderlichen Aktionen des Problems zu erstellen.
Im Tag-Paar <button></button> kann der Benutzer den Inhalt als Text oder Bild festlegen. Dies ist der Unterschied zwischen Button-Tag und Input-Tag mit type = button .
1. Verwendung des Button-Tags in HTML
Erstellen Sie beispielsweise eine Schaltfläche, die beim Klicken Grüße anzeigt.
<!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <button type="button" onclick="alert('Hello web888.vn!')" > Click để in ra lời chào web888 </button> </body> </html>Im obigen Beispiel habe ich ein onclick-Ereignis für das Schaltflächen-Tag erstellt, sodass beim Klicken auf die Schaltfläche der Text „ Hello world! '.
2. Attribut des Button-Tags in HTML
Hier sind einige der am häufigsten verwendeten Attribute.
- Autofokus – Fokussiert automatisch auf das Tag, wenn die Seite geladen wird.
- type – gibt den Stil der Schaltfläche an, einschließlich: Absenden, Zurücksetzen, Schaltfläche.
- name – der Name der Schaltfläche.
- deaktiviert – ob die Schaltfläche deaktiviert ist oder nicht.
Verwenden Sie beispielsweise das type-Attribut, um eine Schaltfläche zu erstellen, die die eingegebenen Daten zurücksetzt.
<form> <input type="text" name="username"> <input type="text" name="email"> <button type="reset">Reset</button> </form>3. Legen Sie CSS für das .-Tag der Schaltfläche fest
Um der Schaltfläche CSS hinzuzufügen, haben Sie zwei Möglichkeiten:
- Die erste Möglichkeit besteht darin, ein Stilattribut hinzuzufügen und das CSS direkt darin zu schreiben.
- Die zweite Möglichkeit besteht darin, dem Eingabe-Tag eine Klasse oder ID zuzuweisen und sich dann auf diese Informationen zu verlassen, um CSS zu generieren.
<button class="color-red" id="btn" type="reset">Reset</button> <style> button{ color:red } .color-red{ color:red } #btn{ color:red } </style>Von den drei oben genannten Methoden können Sie jede verwenden.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
