HTML/Formulare/button
Mit dem button-Element erzeugen Sie anklickbare Schaltflächen, die Aktionen auslösen können.
Es gibt drei verschiedene Arten von Buttons, gekennzeichnet durch das type-Attribut:
-
type = "button", Auslösen clientseitiger Aktionen -
type = "submit", Absenden eines Formulars, default-Wert -
type = "reset", Zurücksetzen eines Formulars
type-Attribut ist submit, das heißt bei einem fehlenden type-Attribut oder einem unbekannten Wert wird type = "submit" gesetzt.
Clientseitige Aktionen auslösen
Ein Button des Typs button löst eine clientseitige Aktion aus, beispielsweise eine Berechnung mit JavaScript, ohne dass dazu Daten versendet oder empfangen werden.
document.querySelector('#berechnen').addEventListener('click', berechne_BMI);
function berechne_BMI () {
var groesse = parseInt(document.getElementById("groesse").value),
masse = parseInt(document.getElementById("masse").value),
bmi = Math.round(100000 * masse / (groesse * groesse)) / 10;
document.querySelector("output").textContent = bmi;
}
berechne_BMI aus, die aus den eingegebenen Werten den Body-Mass-Index errechnet und das Ergebnis in das output-Element einträgt.Formulare absenden
Ein Button des Typs submit sendet nach Betätigen ein Formular ab.
name-Attributes) eine null (für IP-Adresse) oder eine eins (für Uhrzeit) angezeigt. Die serverseitige Programmlogik müsste so gestaltet werden, dass sie die gewünschten Daten entsprechend ausgibt, was unser universell gehaltenes Script aber nicht leistet.Außerdem wird durch
autocomplete="off" unterbunden, dass die eingegebenen Werte gespeichert werden und so browserweit als Vorschläge für künftige Eingaben in Elemente gleichen Namens zur Verfügung stehen.submit ist der Standardwert für type, Sie können es also auch weglassen.Durch Klick auf einen submit-Button wird ein Formular abgesendet, das heißt, die Daten des Formulars werden übertragen. Dabei werden lediglich name-value-Paare übertragen. Die Attribute action, method und enctype des (zugeordneten) form-Elements legen fest, an welche Adresse, mit welcher Übertragungsform (get oder post) und in welcher Kodierung die Übertragung erfolgt.
Ausführlicher wird die Übertragung von Formulardaten in einem eigenen Artikel behandelt.
Formulare zurücksetzen
Ein Button des Typs reset setzt ein Formular zurück.
form-Attribut, das die ID des entsprechenden Formulars enthält und so die Zuordnung Button-Formular sicherstellt.Durch Klick auf einen Reset-Button wird ein Formular auf die ursprünglichen Werte zurückgesetzt.
Attribute
Neben den Universalattributen und dem type-Attribut gibt es Attribute, die vor allem Einfluss auf das Absenden eines Formulars haben.
Eine Übersicht über alle Attribute, die button-Elemente haben dürfen, finden Sie in der HTML-Referenz.
form
Formularelemente brauchen mit HTML5 nicht mehr innerhalb „ihres“ Formulars zu stehen. Die Zuordnung eines Formularelements erfolgt über das form-Attribut, welches die ID des entsprechenden Formulars enthält. Im Artikel HTML/Formulare/Gestaltung wird darauf genauer eingegangen. Ein Beispiel finden Sie auch weiter oben auf dieser Seite unter Formulare zurücksetzen.
Details: caniuse.com
formaction, formmethod, formenctype
Für jedes Formular muss festgelegt sein, wohin, mit welcher HTTP-Anfragemethode und in welcher Codierung die Daten übertragen werden sollen.
Dies geschieht durch die Attribute
-
action, Empfänger-URL, default: die Seite selbst -
method, HTTP-Methode, default:get -
enctype, Codierung, default:application/x-www-form-urlencoded
im Start-Tag des (zugeordneten) Formulars.
Mit HTML5 wurden die Formulare weit vielseitiger und flexibler. Sie können mithilfe der Attribute formaction, formmethod und formenctype in einem Absendebutton die entsprechenden Attributwerte des form-Elements überschreiben. Interessant ist das allerdings nur dann, wenn es mehrere solcher Absendebuttons gibt:
<form action="formular.php">
<label for="test">Test-Text eingeben</label>
<input name="test" id="test">
<button>
Per GET absenden
</button>
<button formmethod="post">
Per POST Absenden
</button>
<button formaction="https://example.org/form.php">
Per GET an „example.org“ senden
</button>
<!-- Auch Kombinationen sind möglich: -->
<button formmethod="post" formaction="https://example.org/form.php">
Per POST an „example.org“ senden
</button>
</form>
formnovalidate
Formulare können seit HTML5 vor dem Absenden auf Gültigkeit überprüft werden. Dieser Mechanismus lässt sich mit dem Attribut novalidate des Formulars oder eben mit einem formnovalidate aushebeln. Sinnvoll ist dies etwa, wenn Sie einen Zwischenstand eines umfangreichen Formulars speichern wollen, bei dem (noch) nicht alle Pflichtfelder ausgefüllt sein müssen.
required-Attribut versehenen Eingabefelder ausgefüllt sind. Der zweite Button trägt jedoch ein formnovalidate. Dadurch wird die Überprüfung unterbunden.Auf die Problematik der Formularvalidierung wird auf der Seite HTML/Formulare/Validierung von Formularen genauer eingegangen.
Buttons mit CSS gestalten
Buttons können entweder angeklickt oder mit der Tastatur angesteuert werden. Standardmäßig machen die Browser jede mögliche Interaktion visuell deutlich (Beispiel: blauer Hintergrund beim Darüberbewegen der Maus, blaue Umrandung bei einer Fokussierung). Bei einigen Browser erhalten auch angeklickte Buttons den Fokus.[1]
Diese visuelle Verdeutlichung ist notwendig, damit der entsprechende Button für alle Benutzer ohne Einschränkungen zugänglich (→ accessibility) ist. Sie sollten bei selbstgestalteten Buttons darauf achten, auch eine entsprechende visuelle Markierung für jede mögliche Interaktion anzubieten, damit die selbstgestalteten Buttons mindestens so zugänglich sind wie ihre Standarddarstellung.
/* Normale Gestaltung */
button {
...
}
/* Gestaltung, wenn Button mit Maus oder Tastatur ausgewählt ist */
button:hover,
button:focus {
...
}
/* Gestaltung, wenn Button gedrückt ist */
button:active {
...
}
Anwendungsbeispiel
<h1>Button-Gestaltung mit CSS</h1>
<h2>mit img-Element</h2>
<button id="bt1">
<img src="/images/2/29/Tick.png" alt=""> Speichern
</button>
<h2>mit Hintergrund-Grafik</h2>
<button id="bt2">
Speichern
</button>
<h2>mit zusätzlichem Element</h2>
<button id="bt3">
<span>Speichern</span>
</button>
button {
margin: 0 2em;
padding: .2em .5em;
}
#bt1 img {
margin-right: .2em;
}
#bt2 {
background-image: url(/images/2/29/Tick.png);
background-position: .5em center;
background-repeat: no-repeat;
padding-left: 2em;
}
#bt3 {
padding: .3em;
}
#bt3 span {
background-image: url(/images/2/29/Tick.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 1.75em;
}
Siehe auch
- HTML-Referenz: button
Weblinks
- W3C: The button element (in der HTML5-Rec)
- t3n: Das sind Ghost-Buttons – und so schön können sie sein
- sitepoint: Trends 2014: The Rise of the Ghost Button
Quellen
- ↑ MDN: Clicking and focus
input-Elemente lassen sich Masse und Körpergröße eingeben. Ein Klick auf den Button löst die JavaScript-Funktionberechne_BMIaus, die aus den eingegebenen Werten den Body-Mass-Index errechnet und das Ergebnis in dasoutput-Element einträgt.