Html `button`` type = 'enden' `vs.` type = 'button' ``

Typ = "Senden" wird verwendet, um ein Formular einzureichen, und das Klicken löst das Standard -Einreichungsverhalten aus. Typ = "Taste" ist eine normale Taste, und JS -Operationen müssen manuell gebunden werden. 1. Klicken auf Typ = "Senden" im Formular senden automatisch Daten an die angegebene Adresse. Auch wenn das Onclick -Ereignis gebunden ist, blockiert es das Standardverhalten nicht, es sei denn, Ereignis.PreventDefault () wird verwendet. 2. Typ = "Taste" sendet keine Formulare und eignet sich für die Durchführung einer benutzerdefinierten Logik wie Überprüfung und dynamischen Vorgängen. Es wird häufig in Front-End-Frameworks verwendet, um verpasste Einsendungen zu vermeiden. 3. HINWEIS: Wenn der Typ nicht angegeben ist, wird der Browser standardmäßig als Einreichung angesehen. Bei Nichtabläufen muss es auf Taste eingestellt werden, um zu verhindern, dass es versehentlich berührt wird. Das Schaltflächen -Tag ist einfacher zu steuern als der Eingang. Wählen Sie den Typ entsprechend dem Zweck aus, und es ist sicherer, das Typattribut eindeutig aufzuschreiben.

Der Unterschied zwischen der Verwendung type="submit" oder type="button" in der Form ist tatsächlich sehr offensichtlich, aber viele Menschen sind zu Beginn zu Verwirrung. Einfach ausgedrückt: submit muss ein Formular einreichen, während button eine gewöhnliche Taste ist, die das Einreichungsverhalten nicht automatisch auslöst .

Wenn Sie eine Formularbetriebslogik schreiben, kann die Auswahl des falschen Typs dazu führen, dass das Formular nicht übermittelt wird, oder die JS -Ereignisbindung reagiert nicht. Daher ist es sehr wichtig, ihre Verwendungs- und Nutzungsszenarien zu verstehen.

1. type="submit" : Dedizierte Schaltfläche für die Einreichung von Formular

Die Funktion dieser Schaltfläche ist klar. Wenn Sie darauf klicken, wird versucht, das aktuelle Formular einzureichen . Unabhängig davon, ob Sie JS -Logik geschrieben haben oder nicht, so lange wie es im <form></form> -Tag ist, löst das Klicken auf das Standard -Einreichungsverhalten des Browsers aus.

Zum Beispiel:

 <form action = "/sure" method = "post">
  <Eingabe type = "text" name = "userername" />
  <Schaltfläche Typ = "Senden"> Register </button>
</form>

Klicken Sie im obigen Code auf die Schaltfläche "Register" und der Browser sendet die Formulardaten an /submit .

TIPP: Selbst wenn Sie das onclick -Ereignis binden, wird das Standardverhalten der Sub -Taste nicht automatisch blockiert, es sei denn, Sie rufen event.preventDefault() in JS.

2. type="button" : Eine reine Taste, die eine manuelle Steuerung des Verhaltens erfordert

Diese Taste löst kein Standard -Einreichungsverhalten aus und eignet sich zum Bindung benutzerdefinierter JavaScript -Vorgänge wie Formbestätigung, dynamischer Feldzusatz, Schaltstatus usw.

Zum Beispiel:

 <form id = "myForm">
  <Eingabe type = "text" name = "mail" />
  <Schaltfläche type = "Button" onclick = "valateForm ()"> Überprüfen Sie die E -Mail </button>
</form>

<Script>
Funktion valateForm () {
  const E -Mail = document.querySelector (&#39;[name = "E -Mail"]&#39;). Wert;
  if (! Email.includes (&#39;@&#39;)) {
    ALERT ("Das Mailbox -Format ist falsch");
  }
}
</script>

Wenn Sie zu diesem Zeitpunkt auf die Schaltfläche klicken, wird das Formular nicht gesendet, sondern validateForm() -Funktion ausführen.

Tipps: Wenn Sie Front-End-Frameworks (z. B. React, Vue) verwenden, verwenden Sie normalerweise type="button" um unerwartete Einreichungen zu vermeiden.

3.. Häufige Missverständnisse und Vorsichtsmaßnahmen

• Der Standardtyp ist ein Senden : Wenn Sie type nicht schreiben, ist der Browser standardmäßig type="submit" , was möglicherweise nicht das gewünschte Ergebnis ist.
• Vermeiden Sie Missverständnisse : Wenn Sie interne Operationen des Formulars ausführen (z. B. Hinzufügen einer Zeile oder Löschen eines Elements), verwenden Sie type="button" . Andernfalls wird die Einreichung ausgelöst, wenn Sie nicht vorsichtig sind.
• Der Unterschied zwischen : <button></button> ist flexibler, kann Symbole und Textkombinationen platzieren und der Stil leichter zu steuern.

4. Wie kann man wählen? Von der Nachfrage abhängen

• Wenn es sich um die Schaltfläche "Senden" des Formulars handelt, verwenden Sie type="submit" .
• Wenn es Funktionen wie "Abbrechen", "eine Zeile hinzufügen" und "Vorschau" hinzufügen, verwenden Sie type="button" .
• Wenn Sie sich nicht sicher sind, schreiben Sie type Typattribut klar und verlassen Sie sich nicht auf das Standardverhalten.

Grundsätzlich ist das. Obwohl es einfach erscheint, kann in der tatsächlichen Entwicklung das Erfassen des Zwecks von Schaltflächen viele geringfügige Probleme vermeiden.

Das obige ist der detaillierte Inhalt vonHtml `button`` type = 'enden' `vs.` type = 'button' ``. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!