Input type button VS button VS a stylé comme un bouton

Bonjour,

Tout est dans le titre

En gros la question c'est un input de type button à sa place dans un formulaire.

Si on regarde la définition de l'élément button dans le livre de Rodolphe Rimelé c'est exactement la même chose. Donc à priori dans un form... ? Pourquoi cette variante déjà ?

Donc si on veut un boutton pour aller sur une autre page en dehors d'un formulaire à priori aucun soucis pour que ce soit un élément a.

Maintenant si ce même bouton sert à afficher une modale ou déclancher une animation (genre une aide qui apparait) etc. Que faire ? a ou button ?

Merci
Modifié par MagicCarpet (08 Sep 2017 - 08:25)

Hello,

Pour commencer, la distinction entre <button> (ou <input type=button>) et un lien : le lien mène vers un autre document (genre il lie deux documents entre eux, quoi), pas le <button>.

Donc première chose : soit l'objectif de l'élément est d'aller sur une autre page (et donc c'est un lien, <a>) soit non (il ne sert qu'à déclencher un événement) et c'est un <button>.

Précision : valider un formulaire qui amène vers une page de confirmation, c'est l'action du formulaire, ce n'est pas l'élément déclencheur qui génère l'action (donc pas un lien).

Ensuite entre un <button> et un <input type=button>, pas vraiment de différence à ma connaissance, même si <input> est plutôt destiné à de la saisie. Il faut avouer que le <input type=button> est rarement employé désormais, tout comme le <input type=image>.

Pour faire simple : dans tous les cas s'il te faut un bouton, utilise <button> avec le type correspondant (submit, button, reset, etc.).

Et finalement, lorsque ton élément se contente de déclencher une action dans la page sans la quitter (ouvrir une modale, faire tourner un carrousel, déplier une menu ou un accordéon, etc.) il vaut généralement mieux un <button>.

Pour la petite histoire il s'agit aussi de ton approche de travail : si tu fais de l'amélioration progressive, généralement le HTML de base pourrait comporter une ancre vers le contenu en question (qui devrait être affiché par défaut) et lorsque le JS est chargé et activé, il cache le contenu en question et convertit le lien en bouton. C'est un peu plus délicat mais il s'agit là de distinguer le contenu du document de ses interactions

J'espère avoir éclairé ta lanterne (et ne pas avoir dit trop de bêtises ).

Je t'ajoute quelques lectures (en anglais) que j'ai dans mon panier, sans les avoir relues (donc je te les conseille chaudement !) :
- Proper Use of Buttons and Links
- Links vs. Buttons in Modern Web Applications
- Links are not buttons. Neither are DIVs and SPANs
- The Difference Between Anchors, Inputs and Buttons

Ten a écrit :
Ensuite entre un &lt;button&gt; et un &lt;input type=button&gt;, pas vraiment de différence à ma connaissance, même si &lt;input&gt; est plutôt destiné à de la saisie. Il faut avouer que le &lt;input type=button&gt; est rarement employé désormais, tout comme le &lt;input type=image&gt;.

<button> est une version «moderne» de <input type=button>, il autorise des contenus html et mis en forme au lieu du textes bruts de l'input, des attributs plus avancés. l'input reste pour des raisons de retro-compatibilité mais on a aucune raison de l'utiliser à part pour être compatible IE6

Ok merci pour vos réponses rapides et complète.

Toutefois, deux petites questions :

1- Ok, j'utilise button mais uniquement dans un form ou n'importe où ? Parce que dans le livre c'est bien dans la section autres éléments de formulaire.
2- kustolovic, aurais-tu un exemple de la version "moderne" du boutton ? Car je ne suis pas bien sur de comprendre.

Merci.

Merci kustolovic pour la précision, je ne savais pas que cette distinction était si ancienne

MagicCarpet, tu peux utiliser l'élément <button> hors d'un formulaire mais il faut impérativement lui attribuer le type="button" : son type par défaut est "submit", et hors d'un formulaire il est donc perdu

Pour la version moderne, c'est simplement que <button> est la même chose que <input type="button"> mais en plus récent