SELFHTML: HTML/XHTML / Formulare / Klick-Buttons

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

Klick-Buttons definieren (herkömmlich)

Klick-Buttons haben in reinem HTML keine sinnvolle Funktion. Man kann sie anklicken, so oft man will, und wird dennoch keine Reaktion feststellen. Ihren Sinn haben sie nur im Zusammenspiel mit Script-Sprachen wie JavaScript, um eine Schaltfläche zu definieren, die z.B. auf Klick eine JavaScript-Aktion auslöst. Dennoch werden diese Buttons nur äußerst selten eingesetzt, weil ihr Einsatzzweck auch durch optisch besser gestaltbare HTML-Elemente wie Verweise (Links) oder durch die weiter unten beschriebenen Buttons zum Absenden oder Abbrechen verwirklicht werden kann.

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>Klick-Buttons definieren (herkömmlich)</title>
</head>
<body>

<h1>Verweise einmal anders</h1>

<form action="input_button.htm">
  <p>
    <textarea cols="20" rows="4" name="textfeld"></textarea>
    <input type="button" name="Text 1" value="Text 1 anzeigen"
      onclick="this.form.textfeld.value='Text 1 und rückwärts seltsam geschrieben ich bin.'">
    <input type="button" name="Text 2" value="Text 2 anzeigen"
      onclick="this.form.textfeld.value='Ich bin Text 2 - ganz normal'">
  </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, um auf das Anklicken mit JavaScript zu reagieren. Als Wertzuweisung an das Event-Handler-Attribut können Sie dann JavaScript-Code notieren. Im obigen Beispiel wird auf Klick der <textarea> jeweils der definierte Text zugewiesen.

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.

Wie eingangs erwähnt: Solche Funktionen lassen sich problemlos auch mit allen anderen HTML-Elementen verwirklichen. Der Vorteil des Klick-Buttons ist, dass er standardmäßig schon direkt wie ein klickbarer Button aussieht. Unser JavaScript-Anwendungsbeispiel Taschenrechner nutzt diese Buttons beispielsweise, um das Tastenfeld zu realisieren. Der Nachteil des Klick-Buttons ist, dass er standardmäßig schon direkt wie ein klickbarer Button aussieht - oft wird aber eine grafisch ansprechendere optische Darstellung gewünscht.

Klick-Buttons definieren (Bild)

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 durch HTML definierten Inhalt haben, etwa eine Grafik.

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>Klick-Buttons definieren (Bild)</title>
</head>
<body>

<h1>Verweise einmal anders</h1>

<form action="button.htm">
  <div>
    <button name="Klickmich" type="button"
      value="Überraschung" onclick="alert('Überraschung!');">
      <p>
        <img src="selfhtml.gif" width="106" height="109" alt="SELFHTML Logo"><br>
        <b>Was passiert wohl?</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 HTML-formatierte 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", sie ist aber notwendig, um diesen Typ von Buttons zu unterscheiden von den 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.

Im übrigen gilt für diese Buttons das gleiche, was schon für ihre herkömmlichen Kollegen gesagt wurde: Ohne JavaScript sind sie komplett funktionslos, und sie treten deshalb in der Realität äußerst selten auf.

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


	Buttons zum Absenden oder Abbrechen
	Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen

SELFHTML/Navigationshilfen HTML/XHTML Formulare