Plusieurs boutons d'envoi dans un formulaire HTML

Question

Disons que vous créez un assistant dans un formulaire HTML. Un bouton permet de revenir en arrière et un autre d'avancer. Puisque le bouton arrière apparaît en premier dans le balisage lorsque vous appuyez sur Enter il utilisera ce bouton pour soumettre le formulaire.

Exemple :

<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>

Je voudrais pouvoir décider quel bouton est utilisé pour soumettre le formulaire lorsqu'un utilisateur appuie sur Enter . De cette façon, lorsque vous appuyez sur Enter l'assistant passe à la page suivante et non à la précédente. Devez-vous utiliser tabindex pour faire ça ?

Answer 1

J'espère que cela vous aidera. Je fais juste le tour de float en cliquant sur les boutons à droite.

De cette façon, le Prev est à gauche du bouton Next mais le bouton Next vient en premier dans la structure 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>

Avantages par rapport aux autres suggestions : pas de code JavaScript, accessible, et les deux boutons sont conservés. type="submit" .

Answer 2

Changez le type de bouton précédent en un bouton comme celui-ci :

<input type="button" name="prev" value="Previous Page" />

Maintenant, le Suivant serait le bouton par défaut, et vous pourriez également ajouter le bouton default afin que votre navigateur le mette en évidence comme suit :

<input type="submit" name="next" value="Next Page" default />

Answer 3

Donnez le même nom à vos boutons d'envoi, comme ceci :

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

Lorsque l'utilisateur appuie sur Enter et le demande va au serveur, vous pouvez vérifier la valeur de submitButton sur votre code côté serveur qui contient une collection de formulaires name/value paires. Par exemple, dans ASP Classic :

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

Référence : Utilisation de plusieurs boutons d'envoi sur un seul formulaire

Answer 4

Si le fait que le premier bouton soit utilisé par défaut est cohérent d'un navigateur à l'autre, placez-les dans le bon sens dans le code source, puis utilisez les CSS pour modifier leur position apparente.

float à gauche et à droite pour les intervertir visuellement, par exemple.

Answer 5

Si vous voulez vraiment que cela fonctionne comme une boîte de dialogue d'installation, il suffit de mettre l'accent sur le bouton "Suivant" OnLoad.

De cette façon, si l'utilisateur frappe Return le formulaire est soumis et va de l'avant. S'ils veulent revenir en arrière, ils peuvent cliquer sur Tab ou cliquez sur le bouton.