1. ホーム
  2. ハイパーリンク

[解決済み】HTMLフォームに複数の送信ボタンがある場合

2022-03-31 23:41:09

質問

HTMLのフォームにウィザードを作るとします。1つのボタンは戻り、1つのボタンは進みます。このとき 戻る を押すと、マークアップの中で最初にボタンが現れます。 入力 の場合、そのボタンを使ってフォームを送信します。

<form>
  <!-- Put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

を押したときに、どのボタンを使ってフォームを送信するかを決められるようにしたいです。 入力 . そうすることで、押したときに Enter をクリックすると、ウィザードは前のページではなく、次のページに移動します。この場合 tabindex を実行する必要がありますか?

解決するには?

の仕掛けをしているだけです。 float ボタンを右側に移動させます。

こうすることで Prev ボタンの左にある Next ボタンがありますが Next がHTMLの構造上、最初に来ます。

.f {
  float: right;
}
.clr {
  clear: both;
}
<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

他の提案に対する利点:JavaScriptのコードがない、アクセス可能、両方のボタンが残る type="submit" .