<input type="submit"> HTML-Attributwert

Wert

Das Attribut value eines <input type="submit">-Elements enthält eine Zeichenfolge, die als Beschriftung der Schaltfläche angezeigt wird. Darüber hinaus haben diese Schaltflächen keinen eigentlichen Wert. value stellt die zugängliche Beschreibung der Schaltfläche bereit.

Das Attribut value festlegen

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

Das Attribut value weglassen

Wenn Sie keinen value angeben, erhält die Schaltfläche eine vom User Agent gewählte Standardbeschriftung. Diese lautet wahrscheinlich etwa „Submit“ oder „Submit Query“. Hier sehen Sie ein Beispiel für eine Submit-Schaltfläche mit der Standardbeschriftung Ihres Browsers:

<input type="submit" />

Zusätzliche Attribute

Zusätzlich zu den Attributen, die alle <input>-Elemente gemeinsam haben, unterstützen submit-Schaltflächen die folgenden Attribute.

formaction

Eine Zeichenfolge, die die URL angibt, an die die Daten übermittelt werden sollen. Sie hat Vorrang vor dem Attribut action des <form>-Elements, zu dem das <input> gehört.

Dieses Attribut ist auch für <input type="image">- und <button>-Elemente verfügbar.

formenctype

Eine Zeichenfolge, die das Kodierungsverfahren für die Übermittlung der Formulardaten an den Server angibt. Drei Werte sind zulässig:

application/x-www-form-urlencoded

Dies ist der Standardwert. Die Formulardaten werden als Zeichenfolge gesendet, nachdem der Text mit einem Algorithmus wie encodeURI() prozentkodiert wurde.

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten und ermöglicht es, Dateien an den Server zu übermitteln. Sie müssen diesen Kodierungstyp verwenden, wenn Ihr Formular <input>-Elemente mit dem type file (<input type="file">) enthält.

text/plain

Klartext; hauptsächlich für die Fehlersuche nützlich, da Sie die zu übermittelnden Daten leicht einsehen können.

Falls angegeben, überschreibt der Wert des Attributs formenctype das Attribut enctype des zugehörigen Formulars.

Dieses Attribut ist auch für <input type="image">- und <button>-Elemente verfügbar.

formmethod

Eine Zeichenfolge, die die HTTP-Methode für die Übermittlung der Formulardaten angibt. Dieser Wert überschreibt ein etwaiges Attribut method des zugehörigen Formulars. Zulässige Werte sind:

get

Ausgehend von der URL im Attribut formaction oder action wird eine URL erstellt. Daran werden ein Fragezeichen („?“) und anschließend die Formulardaten angehängt, kodiert gemäß formenctype oder dem Attribut enctype des Formulars. Diese URL wird dann mit einer HTTP-Anfrage der Methode get an den Server gesendet. Diese Methode eignet sich gut für Formulare, die nur ASCII-Zeichen enthalten und keine Nebenwirkungen haben. Dies ist der Standardwert.

post

Die Formulardaten werden in den Body der Anfrage aufgenommen, die mit der HTTP-Methode post an die im Attribut formaction oder action angegebene URL gesendet wird. Diese Methode unterstützt komplexe Daten und Dateianhänge.

dialog

Diese Methode gibt an, dass die Schaltfläche den zugehörigen Dialog schließt. Die Formulardaten werden dabei nicht übertragen.

Dieses Attribut ist auch für <input type="image">- und <button>-Elemente verfügbar.

formnovalidate

Ein boolesches Attribut, das, falls vorhanden, festlegt, dass das Formular vor der Übermittlung an den Server nicht validiert werden soll. Es überschreibt den Wert des Attributs novalidate des zugehörigen Formulars.

Dieses Attribut ist auch für <input type="image">- und <button>-Elemente verfügbar.

formtarget

Eine Zeichenfolge, die einen Namen oder ein Schlüsselwort angibt und damit festlegt, wo die nach dem Übermitteln des Formulars empfangene Antwort angezeigt wird. Die Zeichenfolge muss der Name eines Browsing-Kontexts sein (also eines Tabs, Fensters oder <iframe>). Ein hier angegebener Wert überschreibt das Ziel, das im Attribut target des zugehörigen <form> angegeben ist.

Neben den tatsächlichen Namen von Tabs, Fenstern oder Inline-Frames können einige spezielle Schlüsselwörter verwendet werden:

_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, wenn kein Wert angegeben wird.

_blank

Lädt die Antwort in einen neuen, unbenannten Browsing-Kontext. Üblicherweise ist dies ein neuer Tab im selben Fenster wie das aktuelle Dokument; je nach Konfiguration des User Agents kann es jedoch anders sein.

_parent

Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen Kontexts. Wenn es keinen übergeordneten Kontext gibt, verhält sich dieser Wert wie _self.

_top

Lädt die Antwort in den obersten Browsing-Kontext, also den obersten Vorfahren des aktuellen Kontexts. Ist der aktuelle Kontext bereits der oberste, verhält sich dieser Wert wie _self.

Dieses Attribut ist auch für <input type="image">- und <button>-Elemente verfügbar.

Submit-Schaltflächen verwenden

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

Wenn Sie die Schaltflächen in Ihrem Formular mit <button>-Elementen erstellen, beachten Sie Folgendes: Befindet sich ein <button> innerhalb eines <form>, wird diese Schaltfläche als Submit-Schaltfläche behandelt. Geben Sie deshalb ausdrücklich an, welche Schaltfläche das Formular übermitteln soll.

Eine einfache Submit-Schaltfläche

Zunächst erstellen wir ein Formular mit einer einfachen 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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Das wird wie folgt dargestellt:

Geben Sie etwas Text in das Textfeld ein und übermitteln Sie anschließend das Formular.

Bei der Übermittlung wird das Name-Wert-Paar der Daten an den Server gesendet. In diesem Fall lautet die Zeichenfolge text=user-text, wobei „user-text“ für den eingegebenen Text steht, der zur Erhaltung von Sonderzeichen kodiert wird. Wohin und wie die Daten übermittelt werden, hängt von der Konfiguration des <form> ab. Weitere Informationen finden Sie unter Formulardaten senden.

Einer Submit-Schaltfläche ein Tastenkürzel hinzufügen

Mit Tastenkürzeln, auch Zugriffstasten oder Tastaturentsprechungen genannt, können Benutzer eine Schaltfläche über eine Taste oder eine Tastenkombination auslösen. Um einer Submit-Schaltfläche ein Tastenkürzel hinzuzufügen, verwenden Sie – wie bei jedem <input>, für das dies sinnvoll ist – das globale Attribut accesskey.

In diesem Beispiel ist s als Zugriffstaste festgelegt (Sie müssen s zusammen mit den für Ihre Browser-Betriebssystem-Kombination vorgesehenen Modifikatortasten drücken). Um Konflikte mit den Tastenkürzeln des User Agents zu vermeiden, werden für Zugriffstasten andere Modifikatortasten verwendet als für andere Tastenkürzel auf dem Computer. Weitere Informationen finden Sie unter accesskey.

Hier sehen Sie das vorherige Beispiel mit der hinzugefügten Zugriffstaste s:

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

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

In Firefox auf einem Mac löst beispielsweise Control-Option-S die Senden-Schaltfläche aus, während Chrome unter Windows Alt+S verwendet.

Das Problem bei diesem Beispiel ist, dass Benutzer die Zugriffstaste nicht kennen. Dies gilt besonders, weil die Modifikatortasten zur Vermeidung von Konflikten in der Regel nicht standardisiert sind. Stellen Sie beim Erstellen einer Website sicher, dass diese Information verfügbar ist, ohne das Design zu beeinträchtigen – beispielsweise über einen leicht zugänglichen Link zu den Zugriffstasten der Website. Ein Tooltip für die Schaltfläche (über das Attribut title) kann ebenfalls helfen, ist im Hinblick auf die Barrierefreiheit jedoch keine vollständige Lösung.

Eine Submit-Schaltfläche deaktivieren und aktivieren

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

<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 beispielsweise so aus: btn.disabled = true oder btn.disabled = false.

Validierung

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

Beispiele

Oben finden Sie bereits grundlegende Beispiele. Über Submit-Schaltflächen gibt es nicht viel mehr zu sagen. Nicht ohne Grund wird diese Art von Steuerelement manchmal als „einfache Schaltfläche“ bezeichnet.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input> und die implementierende Schnittstelle HTMLInputElement
• Formulare und Schaltflächen
• HTML-Formulare
• Das <button>-Element