HTML/Formulare/Button

Aus SELFHTML-Wiki
< HTML‎ | Formulare(Weitergeleitet von Novalidate)
Wechseln zu: Navigation, Suche

Mit dem button-Element erzeugen Sie anklickbare Schaltflächen, die Aktionen auslösen können.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 4.0


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
Beachten Sie: Der default-Wert für das 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.

Beispiel ansehen …
<form> <label for="groesse">Größe: <input id="groesse" type="number" min="100" max="220" step="1" value="175"> cm</label> <label for="masse">Masse: <input id="masse" type="number" min="30" max="225" step="0.1" value="75"> kg</label> <label>BMI: <output id="bmi"></output> </label> <button type="button" id="berechnen">BMI berechnen</button> </form>
function berechne_BMI () { var groesse = parseInt(document.getElementById("groesse").value); var masse = parseInt(document.getElementById("masse").value); var bmi = Math.round(100000 * masse / (groesse * groesse)) / 10; window.onload = function () { document.getElementById("bmi").value = bmi; }; } document.getElementById("berechnen").onclick = berechne_BMI;
In die input-Elemente lassen sich Masse und Körpergröße eingeben. Ein Klick auf den Button löst die JavaScript-Funktion 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.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
  • HTML 4.0
Beispiel ansehen …
<h1>IP-Adresse oder Uhrzeit</h1> <p>Sie können die eingegebenen Daten an ein Script senden. Dabei werden keine Daten gespeichert.</p> <form action="/extensions/Selfhtml/show-request-params.php" method="post" autocomplete="off"> <label for="vorname">Vorname</label> <input id="vorname" name="vorname" maxlength="100"> <label for="name">Name</label> <input id="name" name="name" maxlength="100"> <button type="submit" name="action" value="0">IP-Adresse</button> <button type="submit" name="action" value="1">Uhrzeit</button> </form>
In diesem Beispiel gibt es zwei submit-Buttons. Abhängig vom gewählten Button wird im serverseitigen Script für den Parameter "action" (der Wert des jeweiligen 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.
Beachten Sie: 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.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
  • HTML 4.0
Beispiel ansehen …
Beachten Sie: Das folgende Beispiel funktioniert im Internetexplorer bis einschließlich Version 11 nicht.
  • HTML5
<form id="form1"> <h2>Formular 1 - ohne Vorbelegung</h2> … </form> <form id="form2"> <h2>Formular 2 - mit Vorbelegung</h2> … </form> <p> <button form="form1" type="reset">Formular 1 zurücksetzen</button> <button form="form2" type="reset">Formular 2 zurücksetzen</button> </p>
Das Beispiel enthält zwei Formulare und für jedes einen Reset-Button. Dazu hat jeder Button ein 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.

Beachten Sie: Die Möglichkeit des Zurücksetzens von Formularen stellt nur in wenigen Fällen tatsächlich eine Verbesserung der Benutzerfreundlichkeit dar. Wer ein Formular nicht absenden möchte, der kann die Seite einfach verlassen; wer jedoch versehentlich ein umfangreiches Formular leert, ist zu Recht frustriert.

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.

  • HTML5
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

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.

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

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:

Beispiel
<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.

Beispiel ansehen …
<form> <h1>Kreditantrag</h1> <fieldset> <legend>Kreditnehmer</legend> <fieldset> <legend>Angaben zur Person</legend> <label for="name-kreditnehmer">Name: </label> <input id="name-kreditnehmer" required> <label for="vorname-kreditnehmer">Vorname: </label> <input id="vorname-kreditnehmer" required> </fieldset> <fieldset> <legend>finanzielle Verhältnisse</legend> <label for="einkommen-kreditnehmer">Jahreseinkommen: </label> <input type="number" id="einkommen-kreditnehmer" required> </fieldset> </fieldset> <button>endgültig absenden</button> <button formnovalidate>Zwischenstand speichern</button> </form>
Das Formular enthält Eingabefelder, die ausgefüllt werden müssen. Möchte man dieses Formular nun absenden, wird vor dem Absenden überprüft, ob alle mit dem 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.

Empfehlung: Achten Sie beim Stylen von Buttons darauf, alle Pseudoklassen des Buttons mit einer visuellen Verdeutlichung für die entsprechende Benutzer-Interaktion zu versehen:
Beispiel: Pseudoklassen hover, active, focus als CSS-Selektoren
  /* 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 {
  ...
}
Legen Sie klar erkennbare Formatierungen für Buttons fest, die dann über die Pseudoklassen hover, active, focus selektiert werden.

Anwendungsbeispiel

Beispiel ansehen …
<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>
Buttons können neben Klartext auch wie in Beispiel 1 Bilder, in Beispiel 2 Hintergrundbilder und auch span-Elemente wie im dritten Beispiel beinhalten.
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

Weblinks


Quellen

  1. MDN: Clicking and focus