HTML5-Handbuch - die neuen Features von HTML5

value="Abbrechen" style="width: 80px;">
    

    
Erläuterung
    Im oberen Teil des Beispiels ist der HTML-Code notiert, im unteren der JavaScript-Code. Der obere Teil zeigt die typischen Möglichkeiten für Schaltflächen in HTML. Das Beispiel bietet die Möglichkeit an, Urlaubsländer mit Punkten zu bewerten. Dabei kann der Anwender die aktuell angezeigte Punktzahl mit Hilfe von zwei Schaltflächen erhöhen oder verringern. Eine Schaltfläche mit einer abgebildeten Flagge und dem zugehörigen Ländernamen ändert bei Anklicken ihren Inhalt, zeigt also nach dem Anklicken eine andere Flagge mit anderem Ländernamen.
    Am Ende sind zwei Standard-Formular-Schaltflächen notiert. Die erste, mit OK beschriftet, sendet das Formular ab (
submit
), und die zweite setzt das Formular auf seine Anfangswerte zurück (
reset
). Das Beispielformular sendet beim Absenden die aktuell ausgewählte Punktzahl und das aktuell ausgewählte Land.
    Bild 8.11: Das Schaltflächen-Beispiel im Browser
    Mit

definieren Sie eine einfache Schaltfläche für Scripting. Die Beschriftung der Schaltfläche bestimmen Sie mit dem Attribut
value
. Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie wie im Beispiel den Event-Handler
onclick
notieren, um auf das Anklicken der Schaltfläche mit JavaScript zu reagieren. Als Wertzuweisung an das Event-Handler-Attribut können Sie JavaScript-Code notieren. Im Beispiel sind das Funktionsaufrufe wie
pkt_plus()
bzw.
pkt_minus()
. Die entsprechenden Funktionen sind im unteren Teil des Beispiels notiert.
    Mit

…

können Sie ebenfalls eine Schaltfläche für Scripting markieren. Im Unterschied zum
input
-Element besteht das
button
-Element jedoch aus Anfangs- und End-Tag, erlaubt also einen Elementinhalt. Der Inhalt kannaus HTML-Code bestehen, inklusive Grafikreferenzen, wie im obigen Beispiel. Das
value
-Attribut dient beim
button
-Element dazu, den Absendewert des Buttons zu definieren. Im obigen Beispiel wird der Name des jeweils ausgewählten Landes übertragen, wenn das Formular abgesendet wird.
    Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie, ebenso wie beim
input
-Element, den Event-Handler
onclick
verwenden. Als Wertzuweisung an das Event-Handler-Attribut können Sie dann JavaScript-Code notieren.
    Mit

definieren Sie einen Absendebutton. Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden

-Tag beim Attribut
action
angegeben ist.
    Mit

definieren Sie einen Reset-Button. Das Formular wird nicht abgesendet. Eingegebene Daten werden verworfen. Alle Elemente des Formulars erhalten den Wert zurück, den sie beim Aufruf der Webseite hatten.
    Mit dem Attribut
value
bestimmen Sie bei Submit- und Reset-Buttons, ebenso wie bei einfachen Scripting-Buttons, die Beschriftung.
Grafische Submit-Buttons
    Für Submit-Buttons sieht HTML noch eine spezielle Variante vor, nämlich Grafiken als Submit-Buttons. Dazu notieren Sie

. Zwar können Sie auch innerhalb von

…

eine Grafik notieren, doch dabei wird die Grafik nur als »Beschriftung« des Buttons angezeigt. Bei

wird die Button-Funktionalität jedoch gänzlich unterdrückt und ausschließlich die Grafik angezeigt. Beim Anklicken der Grafik wird das Formular abgesendet. Beispiel
    
    
    
hat die gleiche Wirkung wie

. Die bei

angegebene URL-Adresse