Du neuf avec du vieux : balise button

Grâce au Digital Web Magazine, je viens de découvrir une nouvelle balise HTML, la balise button. Je me suis alors rendu compte que cette balise n’était pas du tout nouvelle. Par contre elle est très peu employée, et je me demande pourquoi ? Effectivement, cette balise fonctionne totalement différemment de la balise input et a bien des avantages.

Le premier vient du fait qu’il ne s’agit d’une balise vide comme input qui porte le texte du bouton dans un attribut. Il est donc possible de faire des boutons avec des contenus complexes, alors que la balise input ne permet que de présenter une chaîne de caractères.

<input type="submit" value="Envoyer votre réponse" />

<button type="submit"><strong>Envoyer</strong> votre réponse</button>

Autre avantage, il est possible de passer une valeur de paramètre différente du texte du bouton:

<button type='submit' name='action' value='1'>Ajouter</button>
<button type='submit' name='action' value='2'>Supprimer</button>

Cette balise permet d’utiliser n’importe quelle balise dans le contenu exceptés les liens et d’autres contrôles de formulaire bien entendu. De plus les navigateurs n’impose pas de style prédéfini pour la balise button à l’instar de la balise input qui reprend un style peu joyeux d’interface utilisateur « classique ». Il devient beaucoup plus aisé de faire coïncider le design du formulaire avec celui du site, voir même de s’affranchir du bouton valider.

Aaron Gustafson donne de beaux exemples d’utilisations de cette balise button :

Cet article a été publié le 16/10/2006 par Seb