Submit par défaut dans un formulaire HTML
By Geoffrey on Tuesday 3 October 2006, 02:08 - Coding - Permalink
Qu'on se le dise, dans un formulaire comprenant plusieurs input de type submit, il n'est pas possible de spécifier le bouton à actionner quand on appuie sur la touche entrée. Si l'on considère que les HIG de Gnome imposent d'avoir un bouton ok à droite du bouton annuler, on se retrouve avec une incompatibilité fondamentale, puisque l'action par défaut est rarement celle d'annuler la saisie que l'on vient de faire. Plusieurs solutions s'offrent dès lors à nous:
- Ignorer les HIG, solution non acceptable dans mon cas (sous peine de lynchage généralisé)
- Supprimer purement et simplement les boutons
annuler, ce qui représente une perte de fonctionnalitées trop importante dans certains cas - Utiliser du JS, solution non acceptable vis à vis de mon challenge personnel (ne pas utiliser de JS avant que l'appli ne soit complètement fonctionnelle)
- Tricher.
J'ai donc opté pour la 4ème solution, j'ai triché. J'ai placé mes input comme le souhaitait le navigateur (ok, puis cancel), et utilisé la directive CSS direction pour réorienter le tout, ce qui donne, pour le HTML:
<fieldset class="submit"> <input type="submit" name="submit" id="ok" value="Ok" /> <input type="submit" name="submit" id="cancel" value="Cancel" /> </fieldset>
Et pour la CSS:
fieldset.submit {
direction: rtl;
}
Et le rendu final.
Problèmes connus:
Impossible d'utiliser de ponctuation dans les boutons (un point d'exclamation à la fin d'un bouton par exemple se retrouvera au début)Unfieldset.submit input { direction: ltr; }est nécessaire pour bénéficier des ponctuations au bon endroit (merci Matt.Rixx)- Surement d'autres conséquences facheuses qui ne me sont pas encore tombées dessus :-)
Mais bon pour l'instant ça marche.
Comments
tu roxes mon mirmo.
Je ne pense pas que ce soit un problème de ponctuation. Je pense que si tu fais une phrase, du moins, au minimum 2 mots, ca va se retrouver à l'envers.
En revanche, je pense que le problème pourrait se régler si tu spécifiais en css que le contenu de tes boutons submit soit ltr.
Sinon, rien à voir, mais 2 choses:
Avec du float, on s'en sort aussi normalement :
fieldset input {
}
Matt.Rixx:
value, ça marche, testé et approuvéfieldset.submit input { direction: ltr; }, et ça marche (j'y avais vaguement pensé je crois mais merci de me l'avoir rappelé :p)RESETn'est pas successfull dans la validation d'un formulaire (c'est le w3 qui le dit), ça signifie qu'il ne peut donc pas le submitvaluepar défaut pour un submit c'est Submit query, ce qui n'est pas adapté à tous mesinput... et comme tu dis, ça se met dans la langue du browser, donc si il gère pas les mêmes langues que toi, tu l'as dans l'os (pour rester poli)Ben:
Avec du float on s'en sort oui, mais c'est beaucoup plus complexe à maitriser une fois l'effet recherché atteint. De plus, un
float: right;ne suffit pas, il faut également unfloat: left;sur le bouton de gauche, et après on se retrouve avec nos boutons alignés à droite, sans méthode simple pour les faire revenir à la raison (alors qu'avec ma méthode untext-alignsur lefieldsetfonctionne parfaitement)