HTML <button> Tag
Beispiel
Eine anklickbare Schaltfläche ist wie folgt gekennzeichnet:
<button type="button">Klicken Sie auf mich!</button>
Try it Yourself »
Weitere "Try it Yourself" („Probieren Sie es selbst“)-Beispiele weiter unten.
Definition und Verwendung
Das Tag <button> definiert eine anklickbare Schaltfläche.
In ein <button>-Element können Sie Text (und Tags wie) einfügen <i>, <b>, <strong>, <br>, <img> usw.) einfügen. Das ist mit einem Button, der mit dem Element <input> erstellt wurde, nicht möglich!
Tipp: Geben Sie immer das Attribut type für ein <button>-Element an, um Browsern mitzuteilen, was Art der Schaltfläche, um die es sich handelt.
Tipp: Sie können Schaltflächen ganz einfach mit CSS formatieren! Schauen Sie sich die Beispiele unten an oder besuchen Sie unser Tutorial zu CSS-Buttons.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <button> | Ja | Ja | Ja | Ja | Ja |
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| autofocus | autofocus | Gibt an, dass eine Schaltfläche beim Laden der Seite automatisch den Fokus erhalten soll |
| disabled | disabled | Gibt an, dass eine Schaltfläche deaktiviert werden soll |
| form | form_id | Gibt an, zu welchem Formular die Schaltfläche gehört |
| formaction | URL | Geben Sie an, wohin die Formulardaten gesendet werden sollen, wenn ein Formular gesendet wird. Nur für type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Geben Sie an, wie Formulardaten codiert werden sollen, bevor sie an einen Server gesendet werden. Nur für type="submit" |
| formmethod | get post |
Gibt an, wie die Formulardaten gesendet werden sollen (welche HTTP-Methode verwendet werden soll). Nur für type="submit" |
| formnovalidate | formnovalidate | Geben Sie an, dass die Formulardaten bei der Übermittlung nicht validiert werden sollen. Nur für type="submit" |
| formtarget | _blank _self _parent _top framename |
Geben Sie an, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll. Nur für type="submit" |
| name | name | Gibt einen Namen für die Schaltfläche an |
| type | button reset submit |
Geben Sie den Typ der Schaltfläche an |
| value | text | Geben Sie einen Anfangswert für die Schaltfläche an |
Globale Attribute
Das Tag <button> unterstützt auch die Globale Attribute in HTML.
Ereignisattribute
Das Tag <button> unterstützt auch die Ereignisattribute in HTML.
Weitere Beispiele
Beispiel
Verwenden Sie CSS, um Schaltflächen zu formatieren:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Try it Yourself »
Beispiel
Verwenden Sie CSS zum Gestalten von Schaltflächen (mit Hover-Effekt):
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Try it Yourself »
Verwandte Seiten
HTML-DOM-Referenz: Button-Objekt.
CSS-Tutorial: Styling-Buttons.
Standard-CSS-Einstellungen
Keine.
