HTML-Tag <button>

❮ Vorige Nächste ❯

Das Tag <button> wird für die Erstellung von interaktiven Buttons auf der Webseite verwendet. Im Unterschied zum ordinären Tag <input>, mit dem man Buttons erstellen kann, kann der Inhalt des Tages <button> nicht nur ein Text, sondern auch ein Foto sein.

Wenn Sie ein Button im HTML-Format erstellen möchten, verwenden Sie das Element <input>, da die Browser den Inhalt des Tages <button> unterschiedlich anzeigen.

Syntax

Der Inhalt des Tages wird zwischen den Start- <button> und Endtags </button> geschrieben.

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Der Titel des Dokuments</title>
   </head>
   <body>
	<h1>Hier wird unser Button sein</h1>
	<button type="button">Klicken</button>
   </body>
</html>

Versuch es selber!

Ergebnis

Gebrauch von CSS-Stilen

Sie können CSS-Stile auf das Tag <button> anwenden, um das Aussehen der Schaltfläche, ihre Größe, Farbe, Textschriftart usw. zu ändern.

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Der Titel des Dokuments</title>
   </head>
  <body>
    Normale Taste
    <button type="button">Zum Papierkorb hinzufügen</button>
    <hr />
   Taste mit rotem Text
    <button type="button" style="color: red;"><b>HTML-Buch</b></button>
    <hr />
    Taste mit vergrößerter Schriftgröße
    <button type="button" style="font: bold 14px Arial;">Buch herunterladen </button><br />
  </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Das Tag <button> hat keine obligatorischen Attribute, aber wir empfehlen Ihnen, immer das Attribut type=”button” zu verwenden, wenn das Tag als einfacher Button benutzt wird.

Attribut	Wert	Beschreibung
autofocus	autofocus	Es bezeichnet dem Browser, dass der Button nach dem Hochladen der Seite einen Fokus bekommen soll.
disabled	disabled	Es deaktiviert den Button. (Es wird in dem Fall benutzt, wenn die Taste nach der Erfüllung irgendeiner Handlung aktiviert werden muss.)
form	form_id	Es gibt ein oder mehrere Formulare an, zu denen der Button gehört. Wenn der Button mehrere Formulare hat, müssen deren Bezeichner (form_id) durch Leerzeichen getrennt werden.
formaction	URL	Es bestimmt die Adresse, an die die Formangaben beim Drücken der Taste abgesendet werden. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet).
formenctype	application/x-www-form- urlencoded multipart/form-data text/plain	Es bestimmt die Methode der Codierung vor dem Absenden an Server. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet). Alle Symbolen werden vor dem Absenden codiert (automatisch). Die Symbole werden nicht codiert, werden die Leertasten mit "+" ersetzt, aber die Symbole werden codiert.
formmethod		Es bestimmt die HTTP-Anfragemethoden, die beim Absenden der Formdaten verwendet wird. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet.)
	get	Es übergibt die Formangaben in der Adressenzeile («Name=Wert»), die zur URL der Seite nach dem Fragezeichen hinzugefügt und untereinander durch das Et-Zeichen (&) geteilt werden. (http://example.ru/doc/?name=Ivan&password=vanya)
	post	Der Browser verbindet sich mit dem Server und sendet die Daten zur Bearbeitung ab.
formnovalidate	formnovalidate	Es annuliert die Überprüfung der Formangaben auf Fehler. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet).
formtarget		Es bestimmt, wo die Antwort nach dem Absenden der Form angezeigt soll. (Es wird nur für die Tasten mit dem Attribut type="submit" verwendet).
	blank	Es eröffnet die Antwort im neuen Fenster.
	self	Es eröffnet die Antwort im aktuellen Fenster.
	parent	Es eröffnet die Antwort im Parentframe.
	top	Es eröffnet die Antwort mit der ganzen Breite des Fensters.
name	name	Es bestimmt den Namen der Taste.
type		Es bestimt den Tastentyp.
	button	Einfache Taste
	reset	Eine Taste, die die ausgefüllten Daten in der Form löscht.
	submit	Eine Taste für die Absendung der Formdaten.
value	text	Es bestimmt den Wert der Taste.