2 boutons submit dans un formulaire : problème

ote
Eléphanteau du PHP | 15 Messages

27 sept. 2009, 14:37

Bonjour,

J'ai un souci avec un formulaire qui contient deux boutons submit. Voici le code :
<form action="annuaire.php" method="post">
	<fieldset>
		<legend>Annuaire</legend>
		<fieldset>
			<legend>Créer une nouvelle fiche</legend>
			<p>
				<label for="new_mdp">Mot de passe</label>
				<input name="new_mdp" id="new_mdp" type="password" />
			</p>
			<p class="submit"> 
				<input name="new_valid" id="new_valid" type="submit" value="Valider" />
			</p>
		</fieldset>
		<fieldset>
			<legend>Modifier votre fiche</legend>
			<p>
				<label for="mod_nom">Nom de famille</label>
				<input name="mod_nom" id="mod_nom" type="text" />
			</p>
			<p>
				<label for="mod_mdp">Mot de passe</label>
				<input name="mod_mdp" id="mod_mdp" type="password" />
			</p>
			<p class="submit">
				<input name="mod_valid" id="mod_valid" type="submit" value="Valider" />
			</p>
		</fieldset>
	</fieldset>
</form>
Quand je teste le formulaire, si je rempli les deux champs "mod_nom" et "mod_mdp" et que j'appuie sur la touche entrée une fois le deuxième champ rempli, c'est comme si je cliquais sur le premier bouton valider. Donc j'ai une erreur car le champ new_mdp n'est pas rempli et ça le fait pas le traitement que je veux. Je teste en PHP quel bouton a été cliqué pour soit créer une nouvelle fiche, soit en modifier une. Lorsque je clique sur le deuxième bouton submit avec la souris, pas de problème. Mais il faudrait que cela fasse pareil avec la touche entrée. Je sais pas si je suis claire... Des idées pour résoudre cela ou c'est le comportement normal ?

Mammouth du PHP | 2937 Messages

27 sept. 2009, 15:45

En appuyant d'emblée sur entrée, le problème risque d'être insoluble. La meilleure solution consiste, lorsqu'on n'utilise que le clavier, à tabuler (touche Tab) jusqu'à ce qu'on atteigne le second bouton de validation, puis à appuyer sur entrée.

Une autre solution que tu peux utiliser consiste à ajouter des raccourcis clavier au niveau de tes boutons de validation, au moyen de l'attribut accesskey.
<form action="annuaire.php" method="post">
        <fieldset>
                <legend>Annuaire</legend>
                <fieldset>
                        <legend>Créer une nouvelle fiche</legend>
                        <p>
                                <label for="new_mdp">Mot de passe</label>
                                <input name="new_mdp" id="new_mdp" type="password" />
                        </p>
                        <p class="submit"> 
                                <input name="new_valid" id="new_valid" type="submit" value="Valider" accesskey="n" title="Valider la création d'une nouvelle fiche (raccourci clavier&nbsp;: n)" />
                        </p>
                </fieldset>
                <fieldset>
                        <legend>Modifier votre fiche</legend>
                        <p>
                                <label for="mod_nom">Nom de famille</label>
                                <input name="mod_nom" id="mod_nom" type="text" />
                        </p>
                        <p>
                                <label for="mod_mdp">Mot de passe</label>
                                <input name="mod_mdp" id="mod_mdp" type="password" />
                        </p>
                        <p class="submit">
                                <input name="mod_valid" id="mod_valid" type="submit" value="Valider" accesskey="m" title="Valider la modification de votre fiche (raccourci clavier&nbsp;: m)" />
                        </p>
                </fieldset>
        </fieldset>
</form>
Cette solution est notamment utilisée par Wikipédia dans son formulaire d'édition d'article. Cela dit, cette solution ne fait qu'apporter un niveau de confort d'utilisation et doit même être utilisée avec circonspection (soit dit en passant, je te conseille de lire l'excellent article de Jean-Pierre Villain Accesskey le grand échec de l'accessibilité du Web ;) ).

Cela dit, les utilisateurs qui n'ont pas d'autre choix que de naviguer au clavier (soit par manque de souris soit à cause d'un handicap qui les rend inaptes à manier une souris ou qui rend l'utilisation d'une souris impossible faute de pouvoir utiliser les yeux) ont généralement l'habitude de tabuler et s'assurent que le bouton de validation voulu a reçu le focus avant d'appuyer sur entrée. C'est notamment le cas des utilisateurs de lecteurs d'écran.

ote
Eléphanteau du PHP | 15 Messages

29 sept. 2009, 14:10

Merci pour la réponse. Je pensais qu'étant donné que mon curseur se trouve sur las cases relatives aux deuxième bouton c'est celui la qui devait être validé. Je me suis donc trompée.