SELFHTML

Klick-Buttons

Informationsseite

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

 nach unten 

HTML 4.0XHTML 1.0MS IE 3.0Netscape 2.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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 Kapitel 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 Kapitel Verweise (Links) oder durch die weiter unten beschriebenen Seite 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:

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

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

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.0 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:

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>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 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", sie ist aber notwendig, um diesen Typ von Buttons zu unterscheiden von den 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.

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 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 Buttons zum Absenden oder Abbrechen
zurück Seite Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
 

© 2007 Seite Impressum