SELFHTML: HTML / Formulare / Klick-Buttons

SELFHTML/Quickbar HTML Formulare

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

Klick-Buttons definieren (herkömmlich)

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.

Klick-Buttons definieren (HTML 4.0)

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.

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