5568 sujets

Sémantique web et HTML

Plusieurs <input type"submit" /> dans un formulaire.

Bonjour à tous,

J'ai un formulaire particulièrement long avec plusieurs "<input type"submit" />" dans le formulaire. Ces input permettent en fait de transférer des photos ou de dérouler de nouvelles options lorsque l'utilisateur clique dessus et qu'il ne dispose pas de javascript (la page se recharge, vérifie si le submit a été cliqué, et le cas échéant affiche les nouvelles options). Seul le dernier submit permet une validation définitive du formulaire.

Cependant, je suis particulièrement soucieux des standards et de l'accessibilité, et lorsqu'un utilisateur utilise le clavier et qu'il appuie sur "entrée" pour valider le formulaire, seul le submit suivant est prit en compte ... or je souhaiterais que le submit définitif le soit (en général lorsque quelqu'un appuie sur entrée, c'est bien pour valider le formulaire). Y a t-il une solution (sans javascript, une alternative html aux autres submits que je ne connais pas peut-être ?) ? Merci d'avance Smiley smile
Pas de solution sans JavaScript à part revoir l'ergonomie et peut-être la logique applicative (côté serveur et vues) du bousin.
Modérateur
Bonjour,

La dernière fois que j'ai mis plusieurs boutons dans un formulaire, il m'avait semblé qu'en appuyant sur ENTER, cela soumettait le premier bouton submit présent dans le code du formulaire. J'avais réussi à gérer cette situation en plaçant un bouton submit caché avec la class "invisible" en haut du code du formulaire. De mémoire, display:none et visibility:hidden ne fonctionnent pas bien pour ça.


.invisible {
height:0;
width:0;
line-height:0;
font-size:0;
padding:0;
margin:0;
border:0;
}


En lisant vos messages, le doute s'installe par contre... Smiley ohwell
Modifié par Tony Monast (31 Oct 2011 - 13:07)
Modérateur
Rebonjour,

Je viens de tester dans IE9, Firefox 5 et Google Chrome, et ça fonctionne. C'est bel et bien le premier input de type submit présent dans le code du formulaire qui est envoyé lorsqu'on appui sur la touche Entrée.

Si ce bouton doit être caché, il vaut mieux éviter l'utilisation de display ou de visibility, puisque les navigateurs ne se comportent pas tous de la même façon. C'est d'ailleurs pourquoi j'ai utilisé une class "invisible" pour tricher un peu. Smiley cligne
Administrateur
La plupart des lecteurs d'écran vont prendre en compte cet input pas vraiment caché (exception au moins pour VoiceOver sous OS X et peut-être iOs, parce que height et/ou font-size sont à 0, je sais plus de mémoire ce qu'il prend en compte), du coup mieux vaut être clair sur le rôle ou l'absence de rôle de ce bouton.

Le reste du problème est bien intéressant mais je me suis jamais penché dessus ... ou alors j'ai pas compris le problème : on peut tabuler à travers plusieurs boutons de soumission et en activer un au choix non ?
Modérateur
En général, les utilisateurs sont habitués de soumettre (ou d'enregistrer) un formulaire en appuyant sur la touche Entrée du clavier, sans forcément mettre le focus sur le bouton Enregistrer.

Pour ce qui est des lecteurs d'écran, je ne crois pas que ça pose problème que le bouton Enregistrer le formulaire soit à la fois en haut du formulaire et aussi à la fin du formulaire. J'ai déjà vu des formulaires où les deux boutons étaient parfaitement visibles : c'était à la fois pratique pour tout le monde et même esthétique.

Bien que je cache le premier bouton submit, il est très bien identifié pour les lecteurs d'écran.
Réponse bête,

Pourquoi ne pas mettre ce fameux bouton qui submit en premier dans le source et le positionner de façon à ce qu'il soit en dernier visuellement?

Ce serait simple en utilisant la position absolute dans un container en relatif et ça règlerait ton problème ^^
Salut,

Pour la gestion de tes options déroulantes en JavaScript, affiche-les toutes d'emblée lorsque JavaScript est désactivé : ça te fera économiser des éléments input.
Sujet clos
Aller à