Wie kann verhindert werden, dass eine Schaltfläche ein Formular in HTML und JavaScript sendet?

So verhindern Sie, dass eine Schaltfläche ein Formular sendet

Wenn in HTML in einem Formular auf eine Schaltfläche geklickt wird, wird normalerweise das Formular ausgelöst Vorlage. Es gibt jedoch Szenarien, in denen Sie möglicherweise möchten, dass eine Schaltfläche eine bestimmte Aktion ausführt, ohne das Formular abzusenden.

Betrachten Sie das folgende Formular:

<code class="html"><form id="myform">
  <label>Label
    <input />
  </label>
</form>
<button>My Button</button></code>

In diesem Beispiel wird das Klicken auf die Schaltfläche weiterhin ausgelöst die Formularübermittlung, obwohl sie außerhalb des Formularelements liegt. Um dieses unerwünschte Verhalten zu verhindern, können Sie das Attribut type="button" für die Schaltfläche angeben:

<code class="html"><button type="button">My Button</button></code>

Alternative Lösung über JavaScript

Wenn Sie lieber damit umgehen möchten Wenn Sie JavaScript verwenden, können Sie das Standardverhalten beim Senden von Formularen deaktivieren. Hier ist ein Beispiel für die Verwendung von Ereignis-Listenern:

<code class="html"><button onclick="event.preventDefault();">My Button</button></code>

In diesem Fall verhindert die Funktion event.preventDefault(), dass das Formular gesendet wird, wenn auf die Schaltfläche geklickt wird.

Fazit

Indem Sie type="button" für die Schaltfläche angeben oder JavaScript verwenden, um die Standardaktion zu unterdrücken, können Sie verhindern, dass eine Schaltfläche ein Formular sendet, selbst wenn sie sich außerhalb des Formularelements befindet.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass eine Schaltfläche ein Formular in HTML und JavaScript sendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!