HTML および JavaScript でボタンがフォームを送信できないようにするにはどうすればよいですか?

ボタンによるフォームの送信を防ぐ方法

HTML では、通常、フォーム内でボタンをクリックすると、フォームがトリガーされます。提出。ただし、フォームを送信せずにボタンで特定のアクションを実行する必要があるシナリオもあります。

次のフォームについて考えてみましょう:

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

この例では、ボタンをクリックするとトリガーされます。フォーム要素の外側にある場合でも、フォームの送信。この望ましくない動作を防ぐために、ボタンに type="button" 属性を指定できます。

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

JavaScript による代替ソリューション

処理したい場合JavaScript を使用すると、デフォルトのフォーム送信動作を無効にすることができます。イベント リスナーを使用した例を次に示します。

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

この場合、event.preventDefault() 関数により、ボタンがクリックされたときにフォームが送信されなくなります。

結論

ボタンに type="button" を指定するか、JavaScript を使用してデフォルトのアクションを抑制することにより、ボタンが form 要素の外側にある場合でも、ボタンがフォームを送信しないようにすることができます。

以上がHTML および JavaScript でボタンがフォームを送信できないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。