SELFHTML

Klick-Buttons

Informationsseite

nach unten Klick-Buttons definieren (herkömmlich)
nach unten Klick-Buttons definieren (modern)
nach unten Weitere Informationen

 nach unten 

HTML 4.0XHTML 1.0MS IE 3.0Netscape 2.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.2 Klick-Buttons definieren (herkömmlich)

Sie können Schaltflächen definieren, die keine spezielle Bedeutung haben. Sinnvoll sind solche frei Klick-Buttons in Verbindung mit Script-Sprachen wie Kapitel JavaScript. In der Regel werden sie dazu verwendet, Verweise oder andere JavaScript-gesteuerte Anweisungen auszuführen.

Die hier beschriebene, herkömmliche Methode hat den Vorteil, dass sie auch von älteren Browsern (Netscape seit Version 2.x, Internet Explorer seit Version 3.x) interpretiert wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>Verweise einmal anders</h1>

<form action="input_button.htm">
<p>
<input type="button" name="Verweis" value="SELFHTML Portalseite"
onClick="self.location.href='http://aktuell.de.selfhtml.org/'">
</p>
</form>

</body>
</html>

Erläuterung:

Mit <input type="button"> definieren Sie einen Button (input = Eingabe). Die Beschriftung des Buttons bestimmen sie mit dem Attribut value (value = Wert). Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie beispielsweise den Seite Event-Handler onClick verwenden. Als Wertzuweisung an das Event-Handler-Attribut können Sie dann JavaScript-Code notieren. Im obigen Beispiel wird mit mit Hilfe der JavaScript-Objekteigenschaft Seite location.href ein Sprungverweis zu dem angegebenen URI ausgeführt. Eine andere beliebte, einfache JavaScript-Anweisung, mit der sich so ein Button belegen lässt, ist onClick="history.back()". Damit erhält der Button die Zurück-Funktion im Browser.

Mit dem Attribut name können Sie einen Namen für den Button vergeben. Unter diesem Namen ist der Button beispielsweise in JavaScript ansprechbar. Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (_) enthalten. Groß- und Kleinschreibung werden bei den meisten Programmiersprachen ebenfalls unterschieden.

 nach obennach unten 

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.2 Klick-Buttons definieren (modern)

Ab HTML 4.0 dürfen anklickbare Buttons endlich so heißen wie sie heißen: nämlich Button. Solche Buttons sind flexibler als herkömmliche Buttons, denn sie dürfen auch einen definierten Inhalt haben, etwa eine Grafik.

Der Nachteil ist, dass diese Sorte Buttons nur von neueren Browsern unterstützt wird - vor allem von Netscape 4.x noch nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>Verweise einmal anders</h1>

<form action="button.htm">
<div>
<button name="Klickmich" type="button"
  value="SELFHTML" onClick="self.location.href='http://aktuell.de.selfhtml.org/'">
 <p><img src="selfhtml.gif" width="106" height="109" border="0" alt="SELFHTML Logo"><br>
 <b>SELFHTML Portalseite</b></p>
</button>
</div>
</form>

</body>
</html>

Erläuterung:

Die Definition eines solchen Buttons leiten Sie mit <button> ein. Dieses Element hat ein End-Tag </button>, mit dem Sie die Definition des Buttons abschließen.

Zwischen dem einleitenden Tag und dem End-Tag können Inhalte stehen. Alles, was Sie innerhalb von <button>...</button> notieren, wird als "Beschriftung" des Buttons angezeigt. Das dürfen durchaus auch eingebundene Kapitel Grafiken sein, so wie im obigen Beispiel.

Im einleitenden <button>-Tag notieren Sie verschiedene Angaben zum Button. Etwas seltsam erscheint die Angabe type="button", wo doch das Element schon so heißt. Notieren Sie diese Angabe jedoch bei allen Buttons, die Sie für Script-Sprachen verwenden. Denn mit Hilfe des button-Elements können Sie auch zwei andere Button-Typen definieren, nämlich Seite Buttons zum Absenden und Abbrechen.

Mit dem Attribut name können Sie einen Namen für den Button vergeben. Für den Namen gelten die gleichen Bemerkungen wie bei nach oben Klick-Buttons (herkömmlich).

Mit dem Attribut value können Sie eine Beschriftung für den Button bestimmen, falls Sie keinen Inhalt innerhalb von <button>...</button> notieren. Beachten Sie jedoch, dass die Browser dies ignorieren und bei leerem Inhalt einen mickrigen leeren Button anzeigen.

Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie beispielsweise den Seite Event-Handler onClick verwenden. Als Wertzuweisung an das Event-Handler-Attribut können Sie dann JavaScript-Code notieren.

Beachten Sie:

Da der Button bereits anklickbar ist, sind alle HTML-Elemente darin verboten, die Verweis-Funktion erzeugen. Es sind also keine Kapitel Verweise beim Inhalt erlaubt, und Grafiken, die als Button-Inhalt angezeigt werden, dürfen kein Attribut usemap für verweis-sensitive Flächen enthalten.

 nach obennach unten 

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)
Seite Element-Referenz für Buttons (<button>...</button>)
Seite Attribut-Referenz für Buttons (<button>...</button>)

 nach oben
weiter Seite Felder für Datei-Upload
zurück Seite Auswahllisten, Radio-Buttons und Checkboxen
 

© 2005 Seite Impressum