SELFHTML/Quickbar  HTML  Formulare

Klick-Buttons
Diese Seite ist ein Dokument mit Informationstext

 Klick-Buttons definieren (herkömmlich)
 Klick-Buttons definieren (HTML 4.0)
 Weitere Möglichkeiten
 

HTML4.0 Klick-Buttons definieren (herkömmlich)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können anklickbare Buttons definieren, die keine spezielle Bedeutung haben. Sinnvoll sind solche frei definierbaren Buttons nur in Verbindung mit Scriptsprachen wie  JavaScript. In der Regel werden sie dazu verwendet, Verweise oder andere JavaScript-gesteuerte Befehle auszuführen.

Die hier beschriebene Möglichkeit hat den Vorteil, daß sie auch von älteren Browsern (Netscape seit Version 2.x, MS Internet Explorer seit Version 3.x) interpretiert wird.

Beispiel:

<p>Wenn bei Ihnen JavaScript funktioniert, hat der folgende Button die gleiche 
Bedeutung wie der Back-Button im WWW-Browser:</p>
<input type=button value="Zur&uuml;ck" onClick="history.back()">

Erläuterung:

Mit <input type=button ...> definieren Sie einen Button (input = Eingabe). Die Beschriftung des Buttons bestimmen sie mit der Zusatzangabe value= (value = Wert). Die Angabe muß in Anführungszeichen stehen. Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie beispielsweise den JavaScript  Event-Handler onClick= verwenden. Hinter dem Istgleichzeichen geben Sie einen JavaScript-Befehl ein, z.B. den Aufruf einer selbstgeschriebenen JavaScript-Funktion, oder - wie im Beispiel - einen einfachen JavaScript-Befehl.

 

HTML4.0 Klick-Buttons definieren (HTML 4.0)

Beispiel Anzeigebeispiel: So sieht's aus

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 MS Internet Explorer interpretiert diesen neuen HTML-Befehl ab Version 4.x, Netscape kennt den Befehl in Version 4.x noch nicht.

Beispiel:

<p>Wenn bei Ihnen JavaScript funktioniert, hat der folgende Button die gleiche 
Bedeutung wie der Back-Button im WWW-Browser:</p>
<button name="Klickmich" type="button"
  value="go back" onClick="history.back()">
 <img src="klick.gif" alt="Klickbild">
 <p>!GO BACK!</p>
</button>

Erläuterung:

Die Definition eines solchen Buttons leiten Sie mit <button> ein. Dieses Tag hat ein Abschluß-Tag </button>, mit dem Sie die Definition des Buttons am Ende 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  Grafikreferenzen sein, so wie im obigen Beispiel. Diese Inhalte werden innerhalb der Button-Fläche zentriert ausgerichtet.

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

Mit dem Attribut name= können Sie einen Namen für den Button vergeben. Unter diesem Namen ist der Buttons beispielsweise in JavaScript ansprechbar. 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, daß der MS Internet Explorer 4.0 diese Angabe ignoriert und bei leerem Inhalt einen leeren Button anzeigt.

Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie beispielsweise den JavaScript  Event-Handler onClick= verwenden. Hinter dem Istgleichzeiten geben Sie einen JavaScript-Befehl ein, z.B. den Aufruf einer selbstgeschriebenen JavaScript-Funktion, oder - wie im Beispiel - einen einfachen JavaScript-Befehl.

Beachten Sie:

Grafiken, die als Button-Inhalt angezeigt werden, dürfen kein Attribut usemap= für verweis-sensitive Flächen enthalten.

 

HTML4.0 Weitere Möglichkeiten

Das <input>-Tag kann  Universalattribute enthalten.

Es ist durchaus auch erlaubt,  CSS Style-Sheets auf Formularelemente anzuwenden. Leider interpretiert Netscape solche Möglichkeiten in der Produktverion 4.x noch nicht. Der MS Internet Explorer 4.x interpretiert CSS Style-Sheets im Zusammenhang mit Formularelementen. Dazu müssen Sie zunächst wissen, wie man  Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Auf das <input>-Tag können Sie beispielsweise folgende Style-Sheet-Angaben anwenden:
 Schriftformatierung
 Hintergrundfarben und -bilder
 Elemente positionieren


 
weiter: Datei-Buttons
zurück: Radiobuttons und Checkboxen
 

SELFHTML/Quickbar  HTML  Formulare

© 1998  Stefan Münz, muenz@csi.com

1