Das Schaltflächen-Beispiel im Browser
Schaltflächen (Buttons) dienen zum Anklicken, wobei dann eine Aktion ausgelöst wird. Folgende typische Aktionen sind möglich:
Dabei gibt es unterschiedliche Möglichkeiten, um Schaltflächen (Buttons) in HTML zu definieren.
Das nachfolgende, etwas längere Beispiel demonstriert die verschiedenen Arten von Schaltflächen und die unterschiedlichen Möglichkeiten, solche Schaltflächen in HTML zu notieren. Um die Funktionalität von Scripting-Buttons zu demonstrieren, ist etwas JavaScript-Code erforderlich. Diesen Code müssen Sie an dieser Stelle nicht verstehen, und die Erläuterungen zum Beispiel gehen darauf nicht weiter ein. JavaScript ist auch nicht Gegenstand dieses Handbuchs. Im Buchabschnitt Scripting: Backgrounds finden Sie eine Einführung in die wichtigsten Sprachbestandteile von JavaScript.
<form method="post" action="/voting.php"> <p> <input type="button" value="<" onclick="pkt_minus()"> <input type="text" id="pkt" name="punkte" size="1" style="text-align: center;" value="5"> <input type="button" value=">" onclick="pkt_plus()"> </p><p> <button type="button" onclick="next_nation()" id="nation_button" value="Barbados" style="width: 120px; padding: 3px; text-align: center;"> <img id="nation_img" src="Barbados.gif"><br> <span id="nation_name">Barbados</span> </button> </p> <input type="submit" value="OK" style="width: 80px;"> <input type="reset" value="Abbrechen" style="width: 80px;"> </form> <script> function pkt_plus() { pkt = parseInt(document.getElementById('pkt').value); if(pkt < 9) pkt += 1; document.getElementById('pkt').value = String(pkt); } function pkt_minus() { pkt = parseInt(document.getElementById('pkt').value); if(pkt > 1) pkt -= 1; document.getElementById('pkt').value = String(pkt); } function next_nation() { var nation = document.getElementById('nation_button').value; var next_nation = ""; switch (nation) { case "Barbados": next_nation = "Bahamas"; break; case "Bahamas": next_nation = "Jamaika"; break; case "Jamaika": next_nation = "Barbados"; break; } document.getElementById('nation_button').value = next_nation; document.getElementById('nation_img').src = next_nation + ".gif"; document.getElementById('nation_name').innerHTML = next_nation; } </script>
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 zweiter 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.
Mit <input type="button"> definieren Sie eine einfach 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 <button type="button">…</button> 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 kann aus 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 <input type="submit"> definieren Sie einen Absendebutton. Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action angegeben ist.
Mit <input type="reset"> 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.
Für Submit-Buttons sieht HTML noch eine spezielle Variante vor, nämlich Grafiken als Submit-Buttons. Dazu notieren Sie <input type="image">. Zwar können Sie auch innerhalb von <button>…</button> eine Grafik notieren, doch dabei wird die Grafik nur als „Beschriftung“ des Buttons angezeigt. Bei <input type="image"> 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:
<input type="text" name="suche"> <input type="image" src="go.gif" alt="Los!">
<input type="image"> hat die gleiche Wirkung wie <input type="submit">. Die bei <form action> angegebene URL-Adresse wird aufgerufen, und die Formulardaten werden dorthin übertragen. Die Grafik referenzieren Sie durch ein src-Attribut, genauso wie bei Pixelgrafik-Referenzen beim img-Element. Bei der Wertzuweisung an das src-Attribut gelten alle Möglichkeiten, die im Abschnitt über Referenzierung beschrieben sind. Ebenso wie beim img-Element ist ein alt-Attribut erlaubt. Nutzen Sie dieses Attribut bei grafischen Submit-Buttons, damit der Anwender die Bedeutung der Schaltfläche erkennt, falls die Grafik nicht angezeigt werden kann.
Bei <input type="image"> wird nicht nur der Wert des value-Attributs (sofern vorhanden) übertragen, sondern zusätzlich auch die Koordinaten des Klicks auf das Bild. Es werden also zwei zusätzlich Werte übertragen, und zwar in der Form name.x und name.y (in PHP wird daraus name_x/name_y). Der MS Internet Explorer sendet nur die Koordinaten.
Für die Schaltflächentypen submit und reset können Sie, was im obigen Beispiel nicht gezeigt ist, ebenfalls das button-Element anstelle des input-Elements verwenden. Notieren Sie <button type="submit"…>…</button>, um einen Submit-Button auszuzeichnen, und <button type="reset"…>…</button> für einen Reset-Button.
Es ist erlaubt, mehrere Submit- und Reset-Buttons pro Formular zu notieren. Besonders bei Submit-Buttons kann es bei der serverseitigen Auswertung durchaus interessant sein zu wissen, welcher der Submit-Buttons angeklickt wurde. Notieren Sie dazu unterschiedliche name-Attribute bei den betroffenen input- oder button-Elementen. Da die name-Attributwerte beim Absenden des Formulars mit übertragen werden, lässt sich serverseitig durch Abfragen der name-Werte ermitteln, welcher Button den Formular-Submit ausgelöst hat. Beispiel:
<p><img src="foto-1.jpg" alt=""><br> <input type="submit" value="gefällt mir!" name="like-foto-1"></p> <p><img src="foto-2.jpg" alt=""><br> <input type="submit" value="gefällt mir!" name="like-foto-2"></p>
Schaltflächen werden, solange nichts anderes angegeben ist, so breit und hoch dargestellt, wie es der Inhalt erfordert. Bei benachbarten Schaltflächen mit unterschiedlich langen Beschriftungen wie OK und Abbrechen, so wie im obigen Beispiel, sieht das nicht unbedingt attraktiv aus. Mit Hilfe von CSS bzw. der CSS-Eigenschaft width können Sie die Anzeigebreite beeinflussen. Im obigen Beispiel werden der Submit- und der Reset-Button mittels style="width: 80px;" auf die einheitliche Breite von 80 Pixeln gebracht.
Da mit <button>…</button> markierte Buttons bereits anklickbar ist, sind als Elementinhalt HTML-Elemente ungeeignet, die selbst Verweis-Funktionalität haben. Hyperlinks und Image-Maps sind deshalb keine erlaubten Inhalte.
Beachten Sie in Verbindung mit dem button-Element das problematische Verhalten des MS Internet Explorers bis einschließlich Version 6. Er sendet den Elementinhalt als Wert, nicht den Inhalt des value-Attributes. Existieren mehrere button-Elemente mit type="submit" im gleichen Formular, sendet der IE6 die Beschriftungen aller Buttons, nicht nur die des geklickten.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.