Wie wird die Standard-Senden-Schaltfläche in einem HTML-Formular bestimmt?

210

Wenn ein Formular gesendet wird, jedoch nicht über eine bestimmte Schaltfläche, z

durch Drücken Enter
mit HTMLFormElement.submit()in JS

Wie soll ein Browser bestimmen, welche der mehreren Senden-Schaltflächen, falls vorhanden, als gedrückte verwendet werden sollen?

Dies ist auf zwei Ebenen von Bedeutung:

Aufrufen eines onclickEreignishandlers, der an eine Senden-Schaltfläche angehängt ist
die an den Webserver zurückgesendeten Daten

Meine bisherigen Experimente haben gezeigt, dass:

Wenn Sie auf EnterFirefox, Opera und Safari drücken , verwenden Sie die erste Schaltfläche zum Senden im Formular
Beim Drücken Enterverwendet der IE entweder die erste oder gar keine Senden-Schaltfläche, je nachdem, welche Bedingungen ich nicht herausfinden konnte
Alle diese Browser verwenden überhaupt keine für eine JS-Übermittlung

Was sagt der Standard?

Wenn es helfen würde, hier ist mein Testcode (das PHP ist nur für meine Testmethode relevant, nicht für meine Frage selbst)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

javascript html cross-browser standards Stewart
quelle

115

Wenn Sie das Formular über Javascript (dh formElement.submit()oder etwas Ähnliches) senden , wird keine der Senden-Schaltflächen als erfolgreich angesehen und keiner ihrer Werte ist in den übermittelten Daten enthalten. (Beachten Sie, dass, wenn Sie das Formular mit submitElement.click()senden, das Senden, auf das Sie einen Verweis hatten, als aktiv angesehen wird. Dies fällt nicht wirklich in den Zuständigkeitsbereich Ihrer Frage, da hier die Schaltfläche zum Senden eindeutig ist, aber ich dachte, ich würde es einschließen Für Leute, die den ersten Teil lesen und sich fragen, wie sie einen Senden-Button über das Senden von JS-Formularen erfolgreich machen können. Natürlich werden die Onsubmit-Handler des Formulars immer noch auf diese Weise ausgelöst, während sie dies nicht form.submit()tun würden. Das ist also ein weiterer Fischkessel ...)

Wenn das Formular durch Drücken der Eingabetaste in einem Feld außerhalb des Textbereichs gesendet wird, muss der Benutzeragent entscheiden, was er hier möchte. Die Spezifikationen sagen nichts über das Senden eines Formulars mit der Eingabetaste in einem Texteingabefeld aus (wenn Sie auf eine Schaltfläche tippen und sie mit Leerzeichen oder was auch immer aktivieren, ist dies kein Problem, da diese bestimmte Schaltfläche zum Senden eindeutig verwendet wird). Es heißt lediglich, dass ein Formular gesendet werden muss, wenn eine Schaltfläche zum Senden aktiviert wird. Es ist nicht einmal erforderlich, dass Sie das Formular durch Drücken der Eingabetaste senden, z. B. durch eine Texteingabe.

Ich glaube, dass Internet Explorer die Schaltfläche "Senden" auswählt, die zuerst in der Quelle angezeigt wird. Ich habe das Gefühl, dass Firefox und Opera die Schaltfläche mit dem niedrigsten Tabindex auswählen und auf die erste definierte Schaltfläche zurückgreifen, wenn nichts anderes definiert ist. Es gibt auch einige Komplikationen hinsichtlich der Frage, ob die Übermittlungen ein nicht standardmäßiges Wertattribut IIRC haben.

Der Punkt, den Sie wegnehmen sollten, ist, dass es keinen definierten Standard für das gibt, was hier passiert, und dass dies ganz nach Lust und Laune des Browsers erfolgt. Versuchen Sie so weit wie möglich, sich nicht auf ein bestimmtes Verhalten zu verlassen. Wenn Sie es wirklich wissen müssen, können Sie wahrscheinlich das Verhalten der verschiedenen Browserversionen herausfinden, aber als ich dies vor einiger Zeit untersuchte, gab es einige ziemlich komplizierte Bedingungen (die sich natürlich mit neuen Browserversionen ändern können), und ich würde raten Sie vermeiden es wenn möglich!

Andrzej Doyle
quelle

1

Zu Abs. 2: Meine grundlegende Frage war, ob irgendetwas in einer Spezifikation den Effekt "Wenn der Browser eine Möglichkeit zum Senden eines Formulars ohne Angabe eines Übermittlungssteuerelements bietet ..." enthält. Aber ich entnehme Davids Antwort, dass es keine gibt. Mein Punkt über IE war, dass manchmal durch Drücken der Eingabetaste ein Formular gesendet wird und keine Senden-Schaltfläche festgelegt wird. Wenn Sie mehrere Formulare an dasselbe Skript senden, können Sie sich nicht darauf verlassen, dass Schaltflächen zum Senden von Formularen verwendet werden. Dies kam in dem Projekt zum Ausdruck, an dem ich arbeite.

Stewart

1

Sehr nützlicher erster Absatz Klammerabschnitt - danke.

Rbassett

63

HTML 4 macht es nicht explizit. Der aktuelle HTML5-Arbeitsentwurf gibt an, dass die erste Senden-Schaltfläche die Standardeinstellung sein muss :

formDie Standardschaltfläche eines Elements ist die erste Übermittlungsschaltfläche in der Baumreihenfolge, deren Formularbesitzer dieses formElement ist.

Wenn der Benutzeragent unterstützt, dass der Benutzer ein Formular implizit senden kann (z. B. wenn auf einigen Plattformen die Eingabetaste gedrückt wird, während ein Textfeld fokussiert ist, wird das Formular implizit gesendet), gilt dies für ein Formular, dessen Standardschaltfläche eine definierte Aktivierung aufweist Das Verhalten muss dazu führen, dass der Benutzeragent Schritte zur Aktivierung synthetischer Klicks auf dieser Standardschaltfläche ausführt .

QUentin
quelle

Ok, genau das soll es tun. Kann ich benutzen?

Pacerier

Ich bin froh, "implizite Übermittlung" in HTML5 zu sehen.

Clint Pachl

61

Andrezj hat es so ziemlich geschafft ... aber hier ist eine einfache Cross-Browser-Lösung.

Nehmen Sie eine Form wie diese an:

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

und Refactor dazu:

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

Da die W3C-Spezifikation angibt, dass mehrere Übermittlungsschaltflächen gültig sind, jedoch keine Anleitung zum Umgang mit dem Benutzeragenten enthält, müssen die Browserhersteller die Implementierung nach eigenem Ermessen durchführen. Ich habe festgestellt, dass sie entweder die erste Schaltfläche zum Senden im Formular oder die nächste Schaltfläche zum Senden nach dem Formularfeld senden, das derzeit den Fokus hat.

Leider einfach einen Anzeigestil hinzufügen : keine; funktioniert nicht, da die W3C-Spezifikation angibt, dass verborgene Elemente von Benutzerinteraktionen ausgeschlossen werden sollten. Verstecken Sie es stattdessen in Sichtweite!

Oben ist ein Beispiel für die Lösung, die ich letztendlich in Produktion genommen habe. Wenn Sie die Eingabetaste drücken, wird das Verhalten des Standardformulars wie erwartet ausgelöst, auch wenn andere nicht standardmäßige Werte vorhanden sind und vor der Standard-Senden-Schaltfläche im DOM stehen. Bonus für die Interaktion zwischen Maus und Tastatur mit expliziten Benutzereingaben unter Vermeidung von Javascript-Handlern.

Hinweis: Wenn Sie durch das Formular tippen, wird für kein visuelles Element der Fokus angezeigt, und dennoch wird die unsichtbare Schaltfläche ausgewählt. Um dieses Problem zu vermeiden, legen Sie einfach die tabindex-Attribute entsprechend fest und lassen Sie ein tabindex-Attribut auf der unsichtbaren Senden-Schaltfläche weg. Es mag zwar unangebracht erscheinen, diese Stile als wichtig zu bewerben, sie sollten jedoch verhindern, dass Frameworks oder vorhandene Schaltflächenstile diese Korrektur beeinträchtigen. Auch diese Inline-Stile sind definitiv eine schlechte Form, aber wir beweisen hier Konzepte ... und schreiben keinen Produktionscode.

James
quelle

5

Vielen Dank. Stolperte über das Display: auch kein Problem. Anstatt die Schaltfläche zu minimieren, können Sie sie auch aus der Seite verschieben, indem Sie sie mit a umgeben <div style="position: fixed; left: -1000px; top: -1000px />. Nur noch eines: Wenn Sie die Schaltfläche mit CSS minimieren oder aus dem Seitenfluss entfernen, kann dies zu WAI-Problemen führen, da Bildschirmleser weiterhin die Standardschaltfläche sehen.

Stefan Haberl

2

DANKE @James für diese ausführliche Antwort.

Nathan

1

das hat bei mir funktioniert, danke. Ich musste dies für den Schaltflächenrand hinzufügen: keine; um es völlig verschwinden zu lassen

Macumbaomuerte

4

Sie können einfach das tabindex-Attribut der versteckten Schaltfläche auf -1

tvanc

2

Wofür ist das da <input/>oben?

Gr.

16

Ich denke, dieser Beitrag würde helfen, wenn jemand es mit jQuery machen möchte:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

Die Grundlösung ist:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    } else {
        return true;
    }
    });
});

und ein anderer, den ich mochte, war:

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
});

Rodrigo Caballero
quelle

jQuery.Event hat immer ein .wichAttribut. Auch keine Notwendigkeit, auf DOMs .keyCode(oder .charCodefür diese Angelegenheit) zurückzugreifen.

Arjan

Ein weiteres Problem in Bezug auf jQuery ist die unnötige Doppelabfrage. Da es nicht erforderlich ist, true zurückzugeben, wird die jQuery-Version außerdem sehr klar und kurz, wenn es darum geht, die von Arjan zuvor empfohlenen Reduzierungen zu integrieren.

Soletan

Ich habe Keydown anstelle von Tastendruck verwendet (vermeiden Sie das Warten auf die Eingabe) und e.preventDefault();am Anfang dieser Funktion hinzugefügt , um die Ausführung der "echten" Standardschaltfläche zu vermeiden. Funktioniert sehr gut.

Matt Roy

6

Ich hatte ein Formular mit 11 Senden-Schaltflächen, und es wurde immer die erste Senden-Schaltfläche verwendet, wenn der Benutzer die Eingabetaste drückte. Ich habe an anderer Stelle gelesen, dass es keine gute Idee ist (schlechte Praxis), mehr als eine Schaltfläche zum Senden in einem Formular zu haben. Der beste Weg, dies zu tun, besteht darin, die gewünschte Schaltfläche als einzige Schaltfläche zum Senden im Formular zu verwenden. Die anderen Schaltflächen sollten in "TYPE = BUTTON" umgewandelt und ein onClick-Ereignis hinzugefügt werden, das Ihre eigene Übermittlungsroutine in Javascript aufruft. Etwas wie das :-

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

Hier ist button3 die Standardeinstellung, und obwohl Sie das Formular programmgesteuert mit den anderen Schaltflächen senden, werden sie von der Routine mjsubmit überprüft. HTH.

Grafik
quelle

19

Schlechte Idee. Ihr Formular funktioniert nicht mit deaktiviertem JS. JS sollte unauffällig eingesetzt werden.

BalusC

7

Nur sehr wenige Browser haben JS standardmäßig deaktiviert, sogar die auf iPods! Auf dem Formular, das ich zitierte, würde JS off es unbrauchbar machen! So viel hängt davon ab, ob JS läuft.

Grafik

7

Standardmäßig deaktiviert oder nicht, sollten diejenigen, die JS deaktiviert haben, es nicht einschalten müssen, nur um einen so dummen kleinen Haken wie diesen zu umgehen.

Stewart

2

Welche Art von Formular hat 11 Senden-Schaltflächen? ( Neugier )

Ben

2

Der Hauptgrund, warum ich die Validierung von unauffälligem Javascript sehe, ist, dass aufdringliches Javascript eher fummelig ist. Ich bin mir nicht sicher, wie ich meine Gedanken qualifizieren soll, aber wenn ich Seiten sehe, die absolut von JS abhängig sind, wette ich auch, dass ich mit meinem DOM einige knifflige Dinge tun und etwas Unbeabsichtigtes auf dem Server tun kann.

Samantha Branham

6

Dies kann nun gelöst werden mit flexbox:

HTML

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

CSS

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

Erklärung
Mit der Flexbox können wir die Reihenfolge der Elemente in einem verwendeten Container umkehren, display: flexindem wir auch die CSS-Regel verwenden : flex-direction: row-reverse. Dies erfordert kein CSS oder versteckte Elemente. Für ältere Browser, die Flexbox nicht unterstützen, erhalten sie immer noch eine praktikable Lösung, aber die Elemente werden nicht umgekehrt.

Demo
http://codepen.io/Godwin/pen/rLVKjm

Godwin
quelle

2

Ich hatte mit der gleichen Frage zu kämpfen, da ich in der Mitte der Schaltfläche "Senden", von der aus die Weiterleitung auf eine andere Seite weitergeleitet wurde, wie folgt:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

Wenn der Benutzer die Eingabetaste drückte, wurde diese Schaltfläche anstelle einer anderen Senden-Schaltfläche angeklickt.

Also habe ich einige primitive Tests durchgeführt, indem ich ein From mit mehreren Submit-Schaltflächen und verschiedenen Sichtbarkeitsoptionen erstellt und per Ereignis darauf hingewiesen habe, auf welche Schaltfläche geklickt wurde: https://jsfiddle.net/aqfy51om/1/

Browser und Betriebssysteme, die ich zum Testen verwendet habe:

FENSTER

Google Chrome 43 (komm schon Google: D)
Mozilla Firefox 38
Internet Explorer 11
Opera 30.0

OSX

Google Chrome 43
Safari 7.1.6

Die meisten dieser Browser haben trotz der angewendeten Sichtbarkeitsoptionen auf die erste Schaltfläche geklickt, mit Ausnahme von IE und Safari, die auf die dritte Schaltfläche geklickt haben, die im "versteckten" Container "sichtbar" ist:

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

Mein Vorschlag, den ich selbst verwenden werde, lautet also:

Wenn Ihr Formular mehrere Senden-Schaltflächen mit unterschiedlicher Bedeutung hat, fügen Sie am Anfang des Formulars die Senden-Schaltfläche mit der Standardaktion ein. Dies ist entweder:

Voll sichtbar
Eingewickelt in einen Behälter mit style="width: 0; height: 0; overflow: hidden;"

BEARBEITEN Eine andere Option könnte sein, die Schaltfläche zu versetzen (noch am Anfang des von) style="position: absolute; left: -9999px; top: -9999px;", habe es gerade im IE versucht - funktioniert, aber ich habe keine Ahnung, was es sonst noch vermasseln kann, zum Beispiel Drucken.

Kristian
quelle

1

Aus Ihren Kommentaren:

Wenn Sie mehrere Formulare an dasselbe Skript senden, können Sie sich nicht darauf verlassen, dass Schaltflächen zum Senden von Formularen verwendet werden.

Ich lasse eine <input type="hidden" value="form_name" />in jede Form fallen.

Wenn Sie mit Javascript senden: Fügen Sie Formulare Übermittlungsereignisse hinzu, und klicken Sie nicht auf Ereignisse auf deren Schaltflächen. Saavy-Benutzer berühren ihre Maus nicht sehr oft.

Ryan Florence
quelle

In der Tat, aber das wirft

Stewart

1

Wenn Sie mehrere Senden-Schaltflächen in einem Formular haben und ein Benutzer die EINGABETASTE drückt, um das Formular über ein Textfeld zu senden, überschreibt dieser Code die Standardfunktionalität, indem er das Senden-Ereignis im Formular über das Tastendruckereignis aufruft. Hier ist dieser Code:

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest('form').submit(); return false; }
    else return true;

});

Axiom82
quelle

Einfach und behebt das Problem

Toddmo

1

Seltsam, dass die erste Schaltfläche Enter immer zur ersten Schaltfläche wechselt, unabhängig davon, ob sie sichtbar ist oder nicht, z show/hide(). B. mithilfe von jquery . Das Hinzufügen eines Attributs .attr('disabled', 'disabled')verhindert den vollständigen Empfang der Schaltfläche "Senden". Dies ist beispielsweise ein Problem beim Anpassen der Sichtbarkeit der Schaltfläche Einfügen / Bearbeiten + Löschen in Aufzeichnungsdialogen. Ich fand es weniger hackisch und einfach, Edit vor Insert zu platzieren

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

und verwenden Sie Javascript-Code:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');

TMa
quelle

0

Mein Rezept:

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

Es wird das versteckte Standardfeld gesendet, wenn keine der Schaltflächen angeklickt wird.

Wenn sie angeklickt werden, haben sie Vorrang und der Wert wird übergeben.

gcb
quelle

2

Aber ist dieses Verhalten in der Norm festgelegt? Und kann man Browsern vertrauen, dass sie es korrekt implementieren?

Stewart

gute Frage. Ich habe es getestet, um auf allen A-Browsern (aus der Yui-Browsermatrix) zu funktionieren, und es ist die beständigste, die ich im wirklichen Leben bekommen konnte (unabhängig davon, was die Standards spezifizieren)

gcb

@yellowandred was passiert? wird später einen Blick darauf werfen

gcb

1

Mein Fehler, ich habe {type = "hidden"} geändert und ich habe nicht die gleichen 'Name'-Werte bemerkt.

Gelb und Rot

Dies funktioniert bei mir in IE11 oder Fx30 nicht. Der Wert wird immer auf den versteckten Wert gesetzt.

Jamie Kitson

0

Eine andere Lösung, die ich verwendet habe, besteht darin, nur eine Schaltfläche im Formular zu haben und die anderen Schaltflächen zu fälschen.

Hier ist ein Beispiel:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

Ich gestalte dann die Span-Elemente so, dass sie wie eine Schaltfläche aussehen. Ein JS-Listener beobachtet die Spanne und führt nach dem Klicken die gewünschte Operation aus.

Nicht unbedingt für alle Situationen geeignet, aber zumindest ist es ziemlich einfach.

Johan Fredrik Varen
quelle

1

Was ist der Fallback für Benutzer mit deaktiviertem JS?

Stewart

Benutzer mit deaktiviertem JS können das Internet nicht nutzen, so einfach ist das heutzutage.

Christoffer Bubach

0

Aus der HTML 4-Spezifikation :

Wenn ein Formular mehr als eine Senden-Schaltfläche enthält, ist nur die aktivierte Senden-Schaltfläche erfolgreich.

Dies bedeutet, dass bei mehr als 1 Senden-Schaltfläche und keiner aktivierten (angeklickten) keine erfolgreich sein sollte.

Und ich würde argumentieren, dass dies sinnvoll ist: Stellen Sie sich ein riesiges Formular mit mehreren Senden-Schaltflächen vor. Oben befindet sich die Schaltfläche "Diesen Datensatz löschen", dann folgen viele Eingaben, und unten befindet sich die Schaltfläche "Diesen Datensatz aktualisieren". Ein Benutzer, der in einem Feld am unteren Rand des Formulars die Eingabetaste drückt, würde niemals vermuten, dass er implizit oben auf "Diesen Datensatz löschen" klickt.

Daher halte ich es für keine gute Idee, die erste oder eine andere Schaltfläche zu verwenden, die der Benutzer nicht definiert (klicken). Trotzdem machen es die Browser natürlich.

Christopher K.
quelle

-2

EDIT: Entschuldigung, als ich diese Antwort schrieb, dachte ich über Submit-Buttons im allgemeinen Sinne nach. Bei der folgenden Antwort geht es nicht um mehrere type="submit"Schaltflächen, da nur eine übrig bleibt type="submit"und die andere geändert wird type="button". Ich lasse die Antwort hier als Referenz für den Fall, dass jemand hilft, der typedie Form ändern kann :

Um festzustellen, welche Taste beim Drücken der Eingabetaste gedrückt wird, können Sie sie mit type="submit"und die anderen Tasten mit markieren type="button". Beispielsweise:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />

Jesús Carrera
quelle

Wenn Sie "button" eingeben, wird das Formular nicht gesendet. Es wird nur zum Auslösen clientseitiger Skripte verwendet.

Stewart

Genau deshalb überspringt der Browser es, wenn Sie die Eingabetaste drücken, und der mit dem Typ "Submit" wird ausgeführt. Sie können die mit dem Typ "button" verwenden, um beispielsweise beim Klicken etwas anderes zu tun. Bitte entfernen Sie die negative Stimme.

Jesús Carrera

Die Frage betraf mehrere Senden- Schaltflächen.

Stewart

Mein Beispiel gilt für mehrere Senden-Schaltflächen. Der Typ "Submit" ist derjenige, der vom Browser als gedrückt festgelegt wurde (worum es bei der Frage ging). Mit der anderen Schaltfläche können Sie sie dann auch als Senden-Schaltfläche verwenden, indem Sie JavaScript-Ereignisse wie das onClick-Ereignis verwenden, das Sie in Ihrem Beispiel haben. Meine Antwort ist also relevant und verdient keine Abwertung. Bitte entfernen Sie es.

Jesús Carrera

1

Wenn Sie vorschlagen möchten, die Mehrdeutigkeit zu beseitigen, indem Sie nur einen von ihnen "Submit" eingeben und JavaScript zum Implementieren der anderen Schaltflächen verwenden, ist dies ein Duplikat der Antwort der Grafik und wurde als solche bereits als schlechte Idee abgetan.

Stewart

Wie wird die Standard-Senden-Schaltfläche in einem HTML-Formular bestimmt?

Antworten: