☰

HTML フォーム内の複数の送信ボタン 質問する

tag-icon • tag-icon html forms form-submit submit-button
HTML フォーム内の複数の送信ボタン 質問する

HTML フォームでウィザードを作成するとします。1 つのボタンは戻るボタンで、もう 1 つは進むボタンです。を押すと、マークアップで最初に戻るEnterボタンが表示されるため、そのボタンを使用してフォームが送信されます。

例：

<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。 そうすれば、 を押すとウィザードは前のページではなく次のページに移動します。これを実行するにEnterは を使用する必要がありますか?tabindex

ベストアンサー1

float私はボタンを右側に配置するというトリックをやっているだけです。

この方法では、Prevボタンはボタンの左側にありますNextが、NextHTML 構造では が最初に来ます。

.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"。

おすすめ記事