HTML-<button> Tag

Definition und Verwendung

<button> definiert einen klickbaren Button.

in <button> Innerhalb eines Elements können Sie Text (sowie Tags wie <i>, <b>, <strong>, <br>, <img> und andere) platzieren. Dies ist <input> Das, was ein Button nicht erreichen kann!

Hinweis:Legen Sie immer fest <button> Element definiert type-Attribut, um dem Browser mitzuteilen, welchen Typ der Button ist.

Hinweis:Sie können mit CSS einfach Stile für Buttons hinzufügen! Sehen Sie sich die folgenden Beispiele an oder besuchen Sie unsere CSS-Button-Tutorial.

Detaillierte Erklärung

<button> Steuerung mit <input type="button"> bietet leistungsstärkere Funktionen und reichhaltigere Inhalte.<button> im Gegensatz zu </button> Alle Inhalte zwischen den Tags sind der Inhalt des Buttons, einschließlich jeglicher akzeptierten Textinhalte, wie Text oder Multimediainhalte. Zum Beispiel können wir ein Bild und das zugehörige Textmaterial in den Button einfügen, um eine ansprechende Markierungsbild im Button zu erstellen.

Der einzige verbotene Element ist das Bildmappelement, da die auf Maus und Tastatur sensible Aktionen das Verhalten des Formularbuttons stören können.

Legen Sie immer das für den Button fest type-Attribut. Der Standardwert für Internet Explorer ist das Attribut "button"während andere Browser (einschließlich des W3C-Standard) den Standardwert "submit".

Weitere Informationen siehe:

HTML DOM-Referenzhandbuch:Button-Objekt

CSS-Tutorial:Stellen Sie den Stil des Buttons ein

Beispiel

Klicken Sie auf einen solchen klickbaren Button:

<button type="button">Klicken Sie mich!</button>

Versuchen Sie es selbst

Hinweis:Mehr Beispiele finden Sie am Ende der Seite.

Attribut

Attribut Wert Beschreibung
autofocus autofocus Bestimmt, dass der Button beim Laden der Seite automatisch in den Fokus gelangen soll.
disabled disabled Bestimmt, dass der Button deaktiviert werden soll.
form form_id Bestimmt, zu welchem Formular der Button gehört.
formaction URL

Bestimmt, wo die Formulardaten bei der Übermittlung gesendet werden sollen.

Gilt nur für type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Bestimmt, wie die Formulardaten vor der Übermittlung kodiert werden sollen.

Gilt nur für type="submit".
formmethod
  • get
  • post

Bestimmt, wie die Formulardaten gesendet werden sollen (welches HTTP-Verfahren verwendet wird).

Gilt nur für type="submit".
formnovalidate formnovalidate

Bestimmt, dass das Formular nicht bei der Übermittlung validiert werden soll.

Gilt nur für type="submit".
formtarget
  • _blank
  • _self
  • _parent
  • _top
    • Fenstername

Bestimmt, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll.

Gilt nur für type="submit".
name Name Bestimmt den Namen des Buttons.
popovertarget element_id Bestimmt das Element des Pop-up-Fensters, das aufgerufen werden soll.
popovertargetaction
  • hide
  • show
  • toggle
 Legt die Aktion fest, die beim Klicken des Buttons auf das Popup-Element ausgeführt wird.
type
  • button
  • reset
  • submit
 Legt den Typ des Buttons fest.
value Text Legt den initialen Wert des Buttons fest.

Globale Attribute

<button> Der Tag unterstützt auch Globale Attribute im HTML.

Ereignisattribute

<button> Der Tag unterstützt auch HTML-Ereignisattribute.

Standard-CSS-Einstellungen

Nichts.

Mehr Beispiele

Beispiel 2

Stellen Sie die Button-Styles mit CSS ein:

<!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;} /* Grün */
.button2 {background-color: #008CBA;} /* Blau */
</style>
</head>
<body>
<button class="button button1">Grün</button>
<button class="button button2">Blau</button>
</body>
</html>

Versuchen Sie es selbst

Beispiel 2

Stellen Sie die Button-Styles mit CSS ein (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">Grün</button>
<button class="button button2">Blau</button>
</body>
</html>

Versuchen Sie es selbst

Browser-Unterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support