web-dev-qa-db-fra.com

Les balises html de bouton en dehors d'un formulaire sont-elles valides?

Je viens de remarquer que, dans soundcloud, les boutons "action" d'une piste (comme, republier, etc ...) sont tous des tags de bouton html. De plus, ils ne sont ni à l'intérieur d'un formulaire ni ils se lient à un formulaire à la html5 ni ne soumettent de formulaire (ils sont apparemment traités via javascript). Est-ce du HTML valide? Un bouton peut-il exister sans formulaire? Ou cela rend-il simplement ces boutons divs cliquables? Et dans quelle mesure cela serait-il valide/invalide pour les lecteurs d'écran?

34
ChuckE

Un élément button est valide n'importe où dans le corps du document où le balisage au niveau du texte peut apparaître. Un tel élément n'a pas besoin d'avoir de relation avec un élément form. La référence faisant actuellement autorité est la spécification HTML 4.01 , et les règles formelles sont dans la DTD, mais vous pouvez prendre un raccourci et utiliser le W3C Markup Validator pour vérifier si un document est valable.

Lorsqu'il n'est pas associé à un formulaire, un élément button n'est pas très différent d'un élément span (plutôt que div, qui est au niveau du bloc par défaut), mais button a un rendu par défaut spécial. Les navigateurs et les logiciels d'assistance peuvent traiter button comme étant également spéciaux, et il est plus sûr d'utiliser button uniquement pour les éléments qui sont censés déclencher une action lorsque vous cliquez dessus. Inversement, ces éléments sont souvent mieux représentés à l'aide du balisage button, bien que vous puissiez également créer des éléments visuellement similaires à des boutons (images ou CSS, principalement).

En dehors d'un formulaire, un élément button a type=button Par défaut (et c'est normalement le seul type sensé pour lui alors). Cela signifie qu'il ne peut avoir d'effet que via JavaScript. Cela ne le rend nullement invalide. Cependant, vous pouvez envisager de générer de tels boutons via JavaScript au lieu de les avoir en tant que contenu HTML statique, de sorte que lorsque le script est désactivé, il n'y aura pas de bouton (valide, mais) déroutant qui ne fait rien.

Pour répondre aux questions de clarification dans le commentaire ci-dessous:

Un élément button type=button Est similaire à input type=button; la différence est que ce dernier n'a pas de contenu mais prend le texte affiché dans le bouton de l'attribut value, tandis que button a un contenu qui peut être "riche" (avec balisage).

Pour l'un ou l'autre élément, si leur utilisation provoque une action du serveur (généralement, via un appel Ajax), nous pouvons en effet nous demander comment fonctionne la page avec JavaScript désactivé. Mais cette question pourrait ne pas être pertinente (peut-être que la page est une application censée s'exécuter de toute façon avec JavaScript), et en tout cas il n'y a rien formellement incorrect avec l'idée.

Pourquoi existent-ils? Pour la commodité de l'auteur et pour des raisons héritées, je dirais. De même, on peut se demander pourquoi HTML possède des attributs d'événement, alors qu'ils ne peuvent pas fonctionner sans script côté client et que vous pouvez affecter des gestionnaires d'événements à des éléments en JavaScript. Mais au début, cela n'était pas possible, et même à l'heure actuelle, il pourrait être plus pratique d'utiliser l'élément button ou l'attribut onclick que de faire des choses en JavaScript (et, pour faire ressembler un élément à un bouton, CSS). Il y a aussi le fait que button et input type=button Créent une apparence dépendante du navigateur pour les éléments, et on pourrait faire valoir que pour la plupart des utilisateurs, tout ce qui a le style du style par défaut de son navigateur pour les boutons est perçu comme un bouton.

57
Jukka K. Korpela

Oui. Depuis très longtemps.

De whatwg.org :

Contextes dans lesquels cet élément peut être utilisé:

Où le contenu de la formulation est attendu.

À l'ère de ajax, la plupart des entrées ne sont pas simplement envoyées en soumettant un formulaire. Et la plupart des boutons sont simplement utilisés pour exécuter une action au clic tout en utilisant un widget reconnaissable.

5
Denys Séguret