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.

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