<input type="submit">

Das value-Attribut eines <input type="submit">-Elements enthält einen String, der als Beschriftung der Schaltfläche angezeigt wird. Schaltflächen haben sonst keinen echten Wert. Der value bietet 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 wird wahrscheinlich etwas wie "Submit" oder "Submit Query" sein. Hier ist ein Beispiel für eine Submit-Schaltfläche mit einer Standardbeschriftung in Ihrem Browser:

<input type="submit" />

Neben den Attributen, die alle <input>-Elemente gemeinsam haben, unterstützen submit-Button-Eingaben die folgenden Attribute.

Ein String, der die URL angibt, an die die Daten übermittelt werden sollen. Dies hat Vorrang vor dem action-Attribut des <form>-Elements, das das <input>-Element besitzt.

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

Ein String, der die Kodierungsmethode identifiziert, die beim Übermitteln der Formulardaten an den Server verwendet werden soll. Es gibt drei zulässige Werte:

application/x-www-form-urlencoded

Dies ist der Standardwert. Er sendet die Formulardaten als String, nachdem der Text unter Verwendung eines Algorithmus wie encodeURI() prozentkodiert wurde.

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten, sodass Dateien an den Server übermittelt werden können. Sie müssen diese Kodierungsart verwenden, wenn Ihr Formular irgendwelche <input>-Elemente des Typs file (<input type="file">) enthält.

text/plain

Nur Klartext; hauptsächlich nützlich zur Fehlersuche, damit Sie die Daten, die übermittelt werden sollen, leicht einsehen können.

Wenn angegeben, überschreibt der Wert des formenctype-Attributs das action-Attribut des besitzenden Formulars.

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

Ein String, der die HTTP-Methode angibt, die beim Übermitteln der Formulardaten verwendet werden soll; dieser Wert überschreibt jedes method-Attribut, das im besitzenden Formular angegeben ist. Zulässige Werte sind:

get

Eine URL wird erstellt, indem mit der URL, die im formaction- oder im action-Attribut angegeben ist, angefangen wird. Danach wird ein Fragezeichen ("?") angehängt, gefolgt von den Formulardaten, die gemäß formenctype oder dem enctype-Attribut des Formulars kodiert werden. Diese URL wird dann mit einer HTTP-get-Anforderung an den Server gesendet. Diese Methode funktioniert gut für einfache Formulare, die nur ASCII-Zeichen enthalten und keine Nebeneffekte haben. Dies ist der Standardwert.

post

Die Formulardaten werden im Hauptteil der Anforderung gesendet, die an die URL gesendet wird, die im formaction- oder im action-Attribut angegeben ist, unter Verwendung der HTTP-post-Methode. Diese Methode unterstützt komplexe Daten und Dateianhänge.

dialog

Diese Methode wird verwendet, um anzugeben, dass die Schaltfläche den Dialog schließt, mit dem die Eingabe verknüpft ist, und die Formulardaten überhaupt nicht überträgt.

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

Ein boolesches Attribut, das, wenn es vorhanden ist, spezifiziert, dass das Formular vor der Übermittlung an den Server nicht validiert werden soll. Dies überschreibt den Wert des novalidate-Attributs des besitzenden Formulars.

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

Ein String, der einen Namen oder ein Schlüsselwort angibt, das angibt, wo die Antwort angezeigt werden soll, die nach der Formularübermittlung empfangen wird. Der String muss der Name eines Browsing-Kontexts sein (also ein Tab, Fenster oder <iframe>). Ein hier angegebener Wert überschreibt jedes target, das im target-Attribut des <form>-Elements angegeben ist, das dieses Input-Element besitzt.

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

_self

Lädt die Antwort in demselben Browsing-Kontext wie das Formular. Dies wird das aktuelle Dokument durch die empfangenen Daten ersetzen. Dies ist der Standardwert, falls keiner angegeben ist.

_blank

Lädt die Antwort in einem neuen, unbenannten Browsing-Kontext. Dies ist typischerweise ein neuer Tab im selben Fenster wie das aktuelle Dokument, kann jedoch je nach Konfiguration des User-Agent variieren.

_parent

Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen Kontexts. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.

_top

Lädt die Antwort in den obersten Browsing-Kontext; dies ist der Browsing-Kontext, der der oberste Vorfahr des aktuellen Kontexts ist. Wenn der aktuelle Kontext der oberste Kontext ist, verhält es sich wie _self.

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

<input type="submit">-Buttons werden verwendet, um Formulare zu übermitteln. Wenn Sie eine benutzerdefinierte Schaltfläche erstellen und dann das Verhalten mit JavaScript anpassen möchten, müssen Sie <input type="button"> oder noch besser ein <button>-Element verwenden.

Wenn Sie sich entscheiden, <button>-Elemente zur Erstellung der Schaltflächen in Ihrem Formular zu verwenden, beachten Sie Folgendes: Befindet sich das <button>-Element innerhalb eines <form>, wird diese Schaltfläche als "Submit"-Schaltfläche behandelt. Daher sollten Sie sich angewöhnen, ausdrücklich anzugeben, welche Schaltfläche die Submit-Schaltfläche ist.

Wir beginnen mit der Erstellung eines Formulars mit einer grundlegenden Submit-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 so dargestellt:

Probieren Sie aus, einen Text in das Textfeld einzugeben und dann das Formular zu übermitteln.

Beim Übermitteln werden die Daten als Name/Wert-Paar an den Server gesendet. In diesem Fall wird der String text=user-text sein, wobei "user-text" derjenige Text ist, den der Benutzer eingegeben hat, kodiert, um Sonderzeichen zu erhalten. Wohin und wie die Daten übermittelt werden, hängt von der Konfiguration des <form> ab; siehe Übermittlung von Formulardaten für weitere Details.

Tastaturkürzel, auch bekannt als Zugriffstasten und Tastaturequivalente, ermöglichen es dem Benutzer, eine Schaltfläche mit einer Taste oder einer Tastenkombination auf der Tastatur auszulösen. Um einer Submit-Schaltfläche ein Tastaturkürzel hinzuzufügen — so wie bei jedem <input>, bei dem dies sinnvoll ist — verwenden Sie das globale accesskey-Attribut.

In diesem Beispiel wird s als Zugriffstaste festgelegt (Sie müssen s zusammen mit den bestimmten Modifikatortasten für Ihre Browser-/Betriebssystem-Kombination drücken). Um Konflikte mit den eigenen Tastaturkürzeln des User-Agents zu vermeiden, werden für Zugriffstasten andere Modifikatortasten verwendet als für andere Kürzel auf dem Hostcomputer. Weitere Details finden Sie unter accesskey.

Hier ist das vorherige Beispiel mit der s-Zugriffstaste hinzugefügt:

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

Zum Beispiel 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 weiß, was die Zugriffstaste ist! Dies ist besonders zutreffend, da die Modifikatortasten typischerweise nicht standardisiert sind, um Konflikte zu vermeiden. Beim Erstellen einer Website sollten Sie diese Informationen auf eine Weise bereitstellen, die das Webdesign nicht stört (zum Beispiel durch Bereitstellung eines leicht zugänglichen Links, der auf Informationen zu den Zugriffstasten der Website verweist). Das Hinzufügen eines Tooltips zur Schaltfläche (unter Verwendung des title-Attributs) kann ebenfalls helfen, obwohl es keine vollständige Lösung für Barrierefreiheitszwecke darstellt.

Um eine Submit-Schaltfläche zu deaktivieren, geben Sie das disabled-Attribut darauf an, wie folgt:

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

Sie können Schaltflächen zur Laufzeit aktivieren und deaktivieren, indem Sie disabled auf true oder false setzen; in JavaScript sieht das so aus: btn.disabled = true oder btn.disabled = false.

Submit-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 eingeschlossen. Es gibt wirklich nichts mehr über Submit-Schaltflächen zu sagen. Aus gutem Grund wird diese Art von Steuerung manchmal als "einfache Schaltfläche" bezeichnet.

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