HTML/Formulare/Button

Aus SELFHTML-Wiki
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.

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

Was die Gestaltung von Formularelementen betrifft, gibt es zwei gegensätzliche Meinungen: Die einen sehen solche Elemente als Bedienelemente des Endgerätes an, die ihre browser- und betriebssystemspezifische Darstellung behalten sollen, die anderen möchten, dass sich auch ein Button harmonisch in die Seite einfügt.

Beide Meinungen haben ihre Berechtigung. Lesen die beiden folgenden Abschnitte und entscheiden Sie für sich und Ihr Projekt, welchen Weg Sie bevorzugen. Achten Sie in jedem Fall darauf, dass ein Button als solcher wahrgenommen wird, seine Funktion intuitiv erkennbar ist und das gesamte Formular mit allen Endgeräten problemlos bedient werden kann.

contra

Buttons gehören wie beinahe alle Formularelemente zu denen, die sich etwas gegen die Gestaltung durch CSS „wehren“. Das liegt daran, dass das Aussehen dieser Bedienelemente vom Browser und Betriebssystem abhängig ist. Sowohl Aussehen als auch Funktionalität sollte möglichst nicht durch den Webdesigner beeinflusst werden, Buttons sind Teil der Arbeitsumgebung des Anwenders und deshalb kein Spiel- und Tummelplatz für Autoren von Web-Seiten.

Sobald Sie beispielsweise Hintergrund- oder Rahmeneigenschaften ändern, werden sämtliche Gestaltungen, die durch Browser und Betriebssystem vorgegeben sind, durch die CSS-Voreinstellungen ersetzt. Dazu zählt explizit auch das Verhalten bei gehoverten oder fokussierten Elementen.

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>
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;
}
Beachten Sie: Buttons gehören zu den Bedienelementen der Browser. Vermeiden Sie deshalb nach Möglichkeit, diese mit CSS zu gestalten.

pro

Die Tatsache, dass Buttons ihre browserspezifische Gestaltung verlieren, sobald Sie bestimmte CSS-Eigenschaften ändern, ist kein Fehler sondern gewolltes Verhalten. So wird versucht sicherzustellen, dass die gewünschte Gestaltung nicht mit dem Browserdesign kollidiert. Das erlaubt es dem Webdesigner, seine Buttons vom Design der Benutzeroberfläche abzukoppeln und an die Gestaltung seiner Website anzupassen. Es ist nachvollziehbar, dass auch ein Button nicht wie ein Fremdkörper in der Seite wirken soll. Prüfen Sie dennoch das Verhalten Ihrer selbstgestalteten Buttons in vielen verschieden Umgebungen, sie zählen zu wichtigen Elementen hinsichtlich der Zugänglichkeit.

Beispiel ansehen …
<p class="choice">
	<button id="win">Windows</button>
	<button id="and">Android</button>
	<button id="mac">Apple</button>
</p>
p.choice {
	margin-top: 6em;
}
button {
	position: relative;
	margin: 2em;
	padding: .5em 1em;
	width: 8em;
	background: transparent;
	color: white;
	border: 1px solid white;
	border-radius: 3px;
	cursor: pointer;
	transition: all ease 2s;
}
button:hover, button:active {
	outline: none;
	background: white;
	color: darkblue;
}
button::before, button::after {
	position: absolute;
	width: 100%;
	height: 150px;
	left: 0;
	color: white;
}
button::before {
	content: " ";
	top: -120px;
	background: none center no-repeat transparent;
	background-size: 30px 30px;
	transition: all ease 1s;
	transform: rotate(0deg);
}
	button:hover::before {
	background-size: 80px 80px;
	transform: rotate(360deg);
}
button::after {
	bottom: -520%;
	transition: transform ease-in .5s, opacity ease-out 1s;
}
#win::before {
	background-image: url(/images/2/29/Win.png);
}
#and::before {
	background-image: url(/images/3/32/And.png);
}
#mac::before {
	background-image: url(/images/6/69/Mac.png);
}
#win::after {
	content: "7, 9, 10";
	transform: translatex(-200%);
	opacity: 0;
}
#win:hover::after {
	transform: translatex(0);
	opacity: 1;
}
#and::after {
	content: "4.3, 4.4, 5.0";
	transform: translatey(200px);
	opacity: 0;
}
#and:hover::after {
	transform: translatey(0);
	opacity: 1;
}
#mac::after {
	content: "iOS 7, iOS 8";
	transform: translatex(200%);
	opacity: 0;
	transition: transform ease-in .5s, opacity ease-out 1s;
}
#mac:hover::after {
	transform: translatex(0);
	opacity: 1;
}
In diesem Beispiel werden die Buttons nach dem Vorbild sogenannter Ghost-Buttons gestaltet. Hierbei handelt es sich um sehr minimalistisch gehaltene Elemente, die sich gerade deshalb vom Hintergrund abheben.

Weblinks

siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML