Buttons

(Formulare)

Man hat in HTML die Möglichkeit Buttons zu machen. Zwei spezielle Buttons braucht man für ein Formular auf jeden Fall. Das ist ein Button zum Abschicken des Formulars, bzw. der Email und ein Button um das Formular zu leeren, falls der User es so nicht abschicken will. Man kann auch andere Buttons machen. Leider bietet HTML keine Möglichkeit den anderen Buttons auch eine Funktion zu geben. Ich erkläre sie trotzdem, und gebe auch gleich eine Möglichkeit zur Benutzung, die allerdings auf JavaScript beruht. Ich werde also nicht erklären, wie und warum sie funktioniert. Buttons kann man auch ohne Formular in seine Seite einbauen.

Buttons zum Abschicken des Formulars

Beim Betätigen des Buttons wird das ausgeführt, was bei der Definition des Formulars unter action festgelegt wurde. Wenn dort action="mailto:Emailadresse" stand, werden die Daten per Email verschickt. Der Button hat die Aufschrift, die unter value angegeben ist. Die Angabe muß in Anführungszeichen stehen.

Reset

Beim Betätigen dieses Buttons wird für alle Formularfelder wieder der ursprüngliche Zustand hergestellt und die Daten werden nicht verschickt. Biete dem Benutzer nach Möglichkeit beide Buttons an. Nicht nur den zum Abschicken.

Bildbutton zum Abschicken

Wenn das Attribut type den Wert image bekommt, kann man einen Bildbutton machen. Das Bild wird wie im Kapitel Bilder einbinden schon erklärt wurde eingebunden. Beim Betätigen des Buttons wird der Formularinhalt abgeschickt bzw. an das Emailprogramm übergeben.

Eigene Submit- und/oder Reset-Buttons

So sieht's im Browser aus: Abschicken Zurücksetzen

Das ist der Quelltext dazu: <button type="submit"><img src="email1.gif" width="47" height="34"><br>Abschicken</button> <button type="reset"><img src="muelleimer.gif" width="47" height="34"><br>Zurücksetzen</button>

Diese Buttons funktionieren Im NN 4 noch nicht, in den aktuellen Browsern funktionieren sie aber. Die Darstellung ist in manchen Browsern etwas abweichend, so stellt z.B. Opera 5 die Oberfläche des Buttons in der Farbe des Seitenhintergrunds dar.

Seit HTML4 gibt es das <button>Tag. Die Definition von so einem Button beginnt mit <button ...> und endet mit </button>. Man kann dem Button im <button>Tag mit name="Name" einen Namen geben. Mit value="Übertragungswert" kann man auch den Übertragungswert bestimmen. Beides macht bei der Funktion als Submit- bzw. Reset-Button nicht viel Sinn. Mit type="submit" bzw. type="reset" legt man fest ob es sich dabei um einen Submit- oder um einen Reset-Button handelt. Zwischen <button ...> und </button> kommt alles, was auf dem Button dargestellt werden soll. Die "Buttonbeschriftung" wird zentriert ausgerichtet. Zumindest nach HTML-Standard. Tatsächlich macht das nur der IE richtig. Wenn man versucht, die Buttonbeschriftung zusätzlich mit dem <center>Tag aus zu richten, funktioniert der Button nicht mehr in allen Browsern.

Allgemeine Buttons

Wie oben angekündigt, kann man auch andere Buttons machen. Buttons, die mit <input type="button" ...> gemacht werden, haben den Vorteil, dass sie bei allen wichtigen Browsern funktionieren. Im NN ist es allerdings notwendig extra ein Formular für den Button zu definieren. Sonst wird der Button nicht interpretiert. Mit HTML ist es nicht möglich dem Button auch eine Funktion zu geben. Deshalb beschreibe ich hier eine Möglichkeit, die auf JavaScript beruht.

Eigene allgemeine Buttons

So sieht's im Browser aus: Hier bin ich falsch. Zurück!

Das ist der Quelltext dazu: <button type="button" onClick="history.back()"> <img src="neinaffe.gif" width="120" height="82"> <br> Hier bin ich falsch. Zurück!</button> (Im Beispiel ist die JavaScript-Funktion nicht enthalten.

Auch diese Buttons funktionieren im NN 4 nicht. Und auch bei der Inhaltsausrichtung treten die gleichen Probleme auf wie bei den eigenen Submit- und Reset-Butons:

Weiter geht's mit dem Kapitel Formulardesign.

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: