<input type="submit">

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

Wenn Sie keinen value 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ätzlich zu den Attributen, die alle <input>-Elemente gemeinsam haben, unterstützen submit-Button-Eingaben die folgenden Attribute.

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

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

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 wie encodeURI() percent-codiert wurde.

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten, wodurch Dateien an den Server gesendet werden können. Sie müssen diesen Kodierungstyp verwenden, wenn Ihr Formular irgendein <input>-Element vom type file (<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 des formenctype-Attributs das enctype-Attribut des übergeordneten Formulars.

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

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

get

Eine URL wird erstellt, indem mit der von formaction oder action angegebenen URL begonnen wird, ein Fragezeichen ("?") hinzugefügt wird und dann die Formulardaten angehängt werden, die wie im formenctype oder im enctype 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 nur ASCII-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 von formaction oder action 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.

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

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

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 eines Browsing-Kontextes (z. B. eines Tabs, Fensters oder eines <iframe>) sein. Ein hier angegebener Wert überschreibt den Zielwert, der im target-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 des User-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.

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

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 id="example" 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 Zeichenkette text=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; siehe Versenden von Formulardaten für weitere Details.

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 Attribut accesskey.

In diesem Beispiel wird s als Zugriffsschlüssel angegeben (Sie müssen s 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 unter accesskey.

Hier ist das vorherige Beispiel mit dem s-Zugriffsschlüssel:

<form> <div> <label for="example">Let's submit some text</label> <input id="example" 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 von Control-Option-S die Senden-Schaltfläche aus, während Chrome unter Windows Alt+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 dem title-Attribut) kann ebenfalls hilfreich sein, obwohl es nicht als vollständige Lösung für Barrierefreiheitszwecke dient.

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

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

Schaltflächen können zur Laufzeit aktiviert und deaktiviert werden, indem disabled auf true oder false gesetzt wird; in JavaScript sieht dies aus wie btn.disabled = true oder btn.disabled = false.

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

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.

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