SELFHTML: HTML/XHTML / Formulare / Klick-Buttons

SELFHTML/Navigationshilfen HTML/XHTML Formulare
	Klick-Buttons
	Klick-Buttons definieren (herkömmlich) Klick-Buttons definieren (modern) Weitere Informationen

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 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:

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 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 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.

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:

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 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 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 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 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 Verweise beim Inhalt erlaubt, und Grafiken, die als Button-Inhalt angezeigt werden, dürfen kein Attribut usemap für verweis-sensitive Flächen enthalten.

Weitere Informationen

In der 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:
Element-Referenz für Input-Formularelemente (<input>)
Attribut-Referenz für Input-Formularelemente (<input>)
Element-Referenz für Buttons (<button>...</button>)
Attribut-Referenz für Buttons (<button>...</button>)


	Felder für Datei-Upload
	Auswahllisten, Radio-Buttons und Checkboxen

SELFHTML/Navigationshilfen HTML/XHTML Formulare