<input>-Elemente vom Typsubmit werden als Schaltflächen dargestellt. Wenn dasclick-Ereignis auftritt (in der Regel, weil der Benutzer die Schaltfläche angeklickt hat), versucht derUser Agent, das Formular an den Server zu übermitteln.

Wert

Das Attributvalue eines<input type="submit">-Elements enthält eine Zeichenkette, die als Beschriftung der Schaltfläche angezeigt wird. Schaltflächen haben ansonsten keinen echten Wert. Dervalue liefert diezugängliche Beschreibung für die Schaltfläche.

Das Attribut "value" festlegen

<input type="submit" value="Send Request" />

Das Attribut "value" weglassen

Wenn Sie keinenvalue angeben, erhält die Schaltfläche eine Standardbeschriftung, die vom User Agent ausgewählt wird. Diese Beschriftung könnte "Senden" oder "Anfrage senden" lauten. Hier ist ein Beispiel für eine Absende-Schaltfläche mit einer Standardbeschriftung in Ihrem Browser:

<input type="submit" />

Zusätzliche Attribute

Zusätzlich zu den Attributen, die alle<input>-Elemente gemeinsam haben, unterstützensubmit-Button-Eingaben die folgenden Attribute.

formaction

Eine Zeichenkette, die die URL angibt, an die die Daten gesendet werden sollen. Dies hat Vorrang vor demaction-Attribut des<form>-Elements, das das<input> besitzt.

Dieses Attribut ist auch auf<input type="image"> und<button>-Elementen verfügbar.

formenctype

Eine Zeichenkette, die die zu verwendende Kodierungsmethode angibt, wenn Formulardaten an den Server gesendet werden. Es gibt drei zulässige Werte:

application/x-www-form-urlencoded

Diese, der Standardwert, sendet die Formulardaten als Zeichenkette, nachdem der Text unter Verwendung eines Algorithmus wieencodeURI()percent-codiert wurde.

multipart/form-data

Verwendet dieFormData-API zur Verwaltung der Daten, wodurch Dateien an den Server gesendet werden können. Siemüssen diesen Kodierungstyp verwenden, wenn Ihr Formular irgendein<input>-Element vomtypefile (<input type="file">) enthält.

text/plain

Klartext; hauptsächlich nur für das Debugging nützlich, damit Sie die zu übermittelnden Daten leicht sehen können.

Wenn angegeben, überschreibt der Wert desformenctype-Attributs dasenctype-Attribut des übergeordneten Formulars.

Dieses Attribut ist auch auf<input type="image"> und<button>-Elementen verfügbar.

formmethod

Eine Zeichenkette, die die HTTP-Methode angibt, die verwendet wird, wenn die Formulardaten gesendet werden; dieser Wert überschreibt jedesmethod-Attribut, das im übergeordneten Formular angegeben ist. Zulässige Werte sind:

get

Eine URL wird erstellt, indem mit der vonformaction oderaction angegebenen URL begonnen wird, ein Fragezeichen ("?") hinzugefügt wird und dann die Formulardaten angehängt werden, die wie imformenctype oder imenctype des Formulars beschrieben codiert sind. Diese URL wird dann unter Verwendung einer HTTP-get-Anfrage an den Server gesendet. Diese Methode funktioniert gut für Formulare, die nurASCII-Zeichen enthalten und keine Nebeneffekte haben. Dies ist der Standardwert.

post

Die Formulardaten sind im Rumpf der Anfrage enthalten, die unter Verwendung einer HTTP-post-Methode an die vonformaction oderaction angegebene URL gesendet wird. Diese Methode unterstützt komplexe Daten und Dateianhänge.

dialog

Diese Methode wird verwendet, um anzuzeigen, dass die Schaltfläche den Dialog schließt, mit dem die Eingabe verbunden ist, und die Formulardaten überhaupt nicht übermittelt.

Dieses Attribut ist auch auf<input type="image"> und<button>-Elementen verfügbar.

formnovalidate

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass das Formular vor dem Senden an den Server nicht validiert werden soll. Dies überschreibt den Wert desnovalidate-Attributs des übergeordneten Formulars.

Dieses Attribut ist auch auf<input type="image"> und<button>-Elementen verfügbar.

formtarget

Eine Zeichenkette, die einen Namen oder ein Schlüsselwort angibt, das angibt, wo die Antwort nach dem Senden des Formulars angezeigt werden soll. Die Zeichenkette muss der Name einesBrowsing-Kontextes (z. B. eines Tabs, Fensters oder eines<iframe>) sein. Ein hier angegebener Wert überschreibt den Zielwert, der imtarget-Attribut des übergeordneten Formulars angegeben ist.

Zusätzlich zu den tatsächlichen Namen von Tabs, Fenstern oder eingebetteten Frames gibt es einige spezielle Schlüsselwörter, die verwendet werden können:

_self

Lädt die Antwort in denselben Browsing-Kontext, der das Formular enthält. Dadurch wird das aktuelle Dokument durch die empfangenen Daten ersetzt. Dies ist der Standardwert, der verwendet wird, wenn keiner angegeben ist.

_blank

Lädt die Antwort in einen neuen, unbenannten Browsing-Kontext. Dies ist in der Regel ein neuer Tab im selben Fenster wie das aktuelle Dokument, kann jedoch je nach Konfiguration desUser-Agenten variieren.

_parent

Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen Browsing-Kontextes. Wenn kein übergeordneter Kontext vorhanden ist, verhält sich dies genauso wie_self.

_top

Lädt die Antwort in den obersten Browsing-Kontext; dies ist der oberste Vorfahr des aktuellen Kontextes. Wenn der aktuelle Kontext der oberste Kontext ist, verhält sich dies genauso wie_self.

Dieses Attribut ist auch auf<input type="image"> und<button>-Elementen verfügbar.

Verwendung von Absende-Schaltflächen

<input type="submit">-Schaltflächen werden zum Absenden von Formularen verwendet. Wenn Sie eine benutzerdefinierte Schaltfläche erstellen und dann deren Verhalten mit JavaScript anpassen möchten, sollten Sie<input type="button"> oder besser ein<button>-Element verwenden.

Wenn Sie sich entscheiden,<button>-Elemente zu verwenden, um die Schaltflächen in Ihrem Formular zu erstellen, beachten Sie Folgendes: Wenn sich das<button> innerhalb eines<form> befindet, wird diese Schaltfläche als "Absende"-Schaltfläche behandelt. Daher sollten Sie sich angewöhnen, ausdrücklich zu spezifizieren, welche Schaltfläche die Absende-Schaltfläche ist.

Eine einfache Absende-Schaltfläche

Wir beginnen mit dem Erstellen eines Formulars mit einer einfachen Absende-Schaltfläche:

<form>  <div>    <label for="example">Let's submit some text</label>    <input type="text" name="text" />  </div>  <div>    <input type="submit" value="Send" />  </div></form>

Dies wird wie folgt gerendert:

Versuchen Sie, etwas Text in das Textfeld einzugeben und dann das Formular abzusenden.

Beim Senden werden die Daten als Name/Wert-Paar an den Server gesendet. In diesem Fall wird die Zeichenkettetext=user-text sein, wobei "user-text" der vom Benutzer eingegebene Text ist, der kodiert wird, um Sonderzeichen zu erhalten. Wo und wie die Daten gesendet werden, hängt von der Konfiguration des<form> ab; sieheVersenden von Formulardaten für weitere Details.

Eine Tastenkombination zu einer Absende-Schaltfläche hinzufügen

Tastenkombinationen, auch als Zugriffsschlüssel und Tastaturäquivalente bekannt, ermöglichen es dem Benutzer, eine Schaltfläche mithilfe einer Taste oder einer Kombination von Tasten auf der Tastatur auszulösen. Um eine Tastenkombination zu einer Absende-Schaltfläche hinzuzufügen — genau wie bei jedem<input>, bei dem es sinnvoll ist — verwenden Sie das globale Attributaccesskey.

In diesem Beispiel wirds als Zugriffsschlüssel angegeben (Sie müssens zusammen mit den speziellen Modifikatortasten für Ihre Browser-/Betriebssystemkombination drücken). Um Konflikte mit den eigenen Tastenkombinationen des User-Agenten zu vermeiden, werden für Zugriffsschlüssel andere Modifikatortasten verwendet als für andere Tastenkombinationen auf dem Host-Computer. Weitere Details finden Sie unteraccesskey.

Hier ist das vorherige Beispiel mit dems-Zugriffsschlüssel:

<form>  <div>    <label for="example">Let's submit some text</label>    <input type="text" name="text" />  </div>  <div>    <input type="submit" value="Send" accesskey="s" />  </div></form>

Beispielsweise löst in Firefox für Mac das Drücken vonControl-Option-S die Senden-Schaltfläche aus, während Chrome unter WindowsAlt+S verwendet.

Das Problem mit dem obigen Beispiel ist, dass der Benutzer nicht wissen wird, was der Zugriffsschlüssel ist! Dies ist besonders wahr, da die Modifikatoren normalerweise nicht standardisiert sind, um Konflikte zu vermeiden. Beim Erstellen einer Website sollten Sie sicherstellen, dass diese Informationen auf eine Weise bereitgestellt werden, die das Site-Design nicht stört (z. B. durch Bereitstellen eines leicht zugänglichen Links, der auf Informationen darüber verweist, was die Zugriffsschlüssel der Website sind). Das Hinzufügen eines Tooltips zur Schaltfläche (mit demtitle-Attribut) kann ebenfalls hilfreich sein, obwohl es nicht als vollständige Lösung für Barrierefreiheitszwecke dient.

Eine Absende-Schaltfläche deaktivieren und aktivieren

Um eine Absende-Schaltfläche zu deaktivieren, geben Sie dasdisabled-Attribut folgendermaßen an:

<input type="submit" value="Send" disabled />

Schaltflächen können zur Laufzeit aktiviert und deaktiviert werden, indemdisabled auftrue oderfalse gesetzt wird; in JavaScript sieht dies aus wiebtn.disabled = true oderbtn.disabled = false.

Validierung

Absende-Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen echten Wert, der eingeschränkt werden könnte.

Beispiele

Wir haben oben grundlegende Beispiele eingefügt. Es gibt wirklich nichts Weiteres zu sagen über Absende-Schaltflächen. Es gibt einen Grund, warum diese Art der Kontrolle manchmal als "einfache Schaltfläche" bezeichnet wird.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input> und dieHTMLInputElement-Schnittstelle, die sie implementiert.
• Formulare und Schaltflächen
• HTML-Formulare
• Das<button>-Element