Remplacer les input type="submit" par des button #4604

Open
opened 2 years ago by nicod_ · 5 comments
nicod_ commented 2 years ago
Owner

Histoire de se moderniser un peu et de perdre de mauvaises habitudes, je propose de remplacer tous les <input type="submit"...> par des <button>

Aucun inconvénient (à part des css qui cibleraient input[type=submit] au lieu de .submit) et de multiples avantages :

  • un <button> peut contenir du html (une image par exemple, ou des ), un non
  • un <button> peut passer une value différente du texte affiché
  • un <input>, comme un <select>, est géré par l'OS et ne peut pas être stylé complètement (notamment les pseudos sélecteurs :before, pour y mettre une icone SVG en background par exemple)

Un exemple de regex pour les remplacer :
<input(.*)type="submit"(.*)value="(.*)"([^>]*)>
remplacé par
<button$1type="submit"$2>$3</button>

Par contre, même si type="submit" est le rôle par défaut des <button> il est conseillé de le conserver.

PS : ce ticket concerne aussi Formidable

Histoire de se moderniser un peu et de perdre de mauvaises habitudes, je propose de remplacer tous les `<input type="submit"...>` par des `<button>` Aucun inconvénient (à part des css qui cibleraient `input[type=submit]` au lieu de `.submit`) et de multiples avantages : * un `<button>` peut contenir du html (une image par exemple, ou des <span>), un <input> non * un `<button>` peut passer une `value` différente du texte affiché * un `<input>`, comme un `<select>`, est géré par l'OS et ne peut pas être stylé complètement (notamment les pseudos sélecteurs :before, pour y mettre une icone SVG en background par exemple) Un exemple de regex pour les remplacer : ` <input(.*)type="submit"(.*)value="(.*)"([^>]*)>` remplacé par `<button$1type="submit"$2>$3</button>` Par contre, même si `type="submit"` est le rôle par défaut des `<button>` il est conseillé de le conserver. PS : ce ticket concerne aussi Formidable

Trompé dans le titre avec hidden non ? :)

Trompé dans le titre avec hidden non ? :)
b_b commented 2 years ago
Owner
There is no content yet.
Owner

Attention car avec ce balisage sans value= sur le button ça va casser des forms qui ont plusieurs boutons et utilisent un test if (_request('..')) pour voir quel bouton a été posté.

Je pense qu'il faudrait au moins un value=1
(et oui il faut impérativement le type="submit" pour que le js des form ajax les trouve)

Attention car avec ce balisage sans `value=` sur le `button` ça va casser des forms qui ont plusieurs boutons et utilisent un test `if (_request('..'))` pour voir quel bouton a été posté. Je pense qu'il faudrait au moins un `value=1` (et oui il faut impérativement le `type="submit"` pour que le js des form ajax les trouve)
Poster
Owner

cedric - a écrit :

Attention car avec ce balisage sans value= sur le button ça va casser des forms qui ont plusieurs boutons et utilisent un test if (_request('..')) pour voir quel bouton a été posté.

Ah oui crotte...
Il ne doit pas y en avoir tant que ça, mais faut les identifier... :-/

Sinon on remet le value dans le button ?
<input(.*)type="submit"(.*)value="(.*)"([^>]*)>
remplacé par
<button$1type="submit"$2 value="$3">$3</button>
mais ça peut être moche...

cedric - a écrit : > Attention car avec ce balisage sans `value=` sur le `button` ça va casser des forms qui ont plusieurs boutons et utilisent un test `if (_request('..'))` pour voir quel bouton a été posté. Ah oui crotte... Il ne doit pas y en avoir tant que ça, mais faut les identifier... :-/ Sinon on remet le value dans le button ? `<input(.*)type="submit"(.*)value="(.*)"([^>]*)>` remplacé par `<button$1type="submit"$2 value="$3">$3</button>` mais ça peut être moche...
Owner

Version cible mise à 4.1

**Version cible mise à 4.1**
Sign in to join this conversation.
No Milestone
No project
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.