Balises input, button, a href et comment déguiser un lien en bouton

Des boutons, il y en a partout. Des boutons pour soumettre un formulaire, des boutons pour lancer une action, des boutons pour donner notre accord (ou pas), des boutons pour « liker » une page, etc.

Il y a plusieurs façons de créer un bouton : balise <input>, balise <button> et même balise <a href>. De même, il y a plusieurs façons pour définir le comportement du bouton.

Examinons les différentes possibilités.

▼Publicité

Travailler avec un bouton

Dans une page Web, un bouton peut mener à une action de deux façons différentes :

  • du côté serveur;
  • du côté client.

Traitement du côté serveur

Du côté serveur, le bouton redirigera l'action vers la page indiquée dans l'attribut action de son formulaire. On dira qu'il se charge de soumettre le formulaire. Il y aura nécessairement un postback, c'est-à-dire un retour vers le serveur qui s'occupera de charger la page avec tout le traitement nécessaire. 

Ex :

HTML

<form ... action="traitementformulaire.php">

    ...

    <input type="submit" value="Envoyer" />

</form>

Si le bouton ne fait pas partie d'un formulaire, il ne pourra qu'effectuer une action du côté client.

Traitement du côté client

Du côté client, le bouton lancera l'action JavaScript indiquée dans son attribut onclick.

Pour lancer un traitement côté client, on peut utiliser différents types de boutons.

Le cas le plus fréquent consiste à utiliser un input de type button. Il a la même apparence qu'un input de type submit mais il ne se chargera pas de soumettre le formulaire. Il est donc tout indiqué pour les traitements côté client.

HTML

<input type="button" value="Recalculer" onclick="recalculer();" />

Si on utilise un input de type submit, on ajoutera généralement un return false  afin d'éviter que le formulaire ne soit soumis. C'est le JavaScript qui déterminera si la soumission doit avoir lieu ou pas.

HTML

<input type="submit" value="Recalculer" onclick="recalculer(); return false;" />

Il est également possible d'utiliser la balise <button> pour effectuer un traitement côté client. Cette balise offre plus de flexibilité au niveau de l'apparence en permettant d'ajouter des balises HTML dans son contenu, comme par exemple une image à côté du texte. 

Comme avec la balise input, il est possible de spécifier le type d'un button : button, submit ou reset. Un button peut donc soumettre un formulaire s'il a l'attribut type="submit" (c'est sa valeur par défaut). Mais attention : lorsqu'elle est utilisée pour soumettre un formulaire, la balise button peut avoir un comportement différent selon le navigateur utilisé. Il est donc déconseillé de l'utiliser à cette fin. 

Pour les traitements côté client, la balise button elle est très intéressante.

HTML

<button type="button" onclick="recalculer();"><img src="calcul.png" />Recalculer</button>

Ajoutons un peu de mise en forme pour bien centrer l'image par rapport au texte :

CSS

button {

  padding: 5px 10px 1px 10px;

  line-height: 20px;

}

 

button img {

  margin-right: 5px;

  vertical-align: middle;

  padding-bottom: 4px;

}

Nous obtenons ce résultat :

Exemple button

Rediriger l'internaute vers une autre page

Oublions le cas précis d'un bouton permettant de soumettre un formulaire. Lorsque nous voulons simplement rediriger l'internaute vers une autre page, il est possible de le faire de trois façons :

  • avec une balise <form> qui ne contient qu'un input de type submit

    Ex :

    HTML

    <form action="nouveauclient.php">

        <input type="submit" value="Nouveau client" />

    </form>

  • avec une balise permettant le traitement côté client

    Ex :

    HTML

    <input type="button" value="Nouveau client" onclick="window.location.href='nouveauclient.php';" />

  • avec un simple lien

    Ex :

    HTML

    <a href="nouveauclient.php">Nouveau client</a>

Déguiser un lien en bouton

Pour effectuer une simple redirection, l'utilisation du lien est de loin la technique la plus simple. Pourtant, l'utilisation d'un bouton est plus intéressante au niveau visuel. 

Pas de problème : avec le CSS, il est possible de déguiser le lien pour qu'il ait l'apparence d'un bouton.

Ce code est inspiré de http://www.snilesh.com/resources/css/css3-html5-button

Ex :

HTML

<a class="stylebouton" href="nouveauclient.php">Nouveau client</a>

CSS

a.stylebouton {

  -webkit-border-radius: 1px;

  -moz-border-radius: 1px;

  border-radius: 1px;

  border: solid thin #929292;

  text-shadow: none;

  background: #F6F6F6;

  background-image: -webkit-linear-gradient(top, #F6F6F6, #DDDDDD);

  background-image: -moz-linear-gradient(top, #F6F6F6, #DDDDDD);

  background-image: -ms-linear-gradient(top, #F6F6F6, #DDDDDD);

  background-image: -o-linear-gradient(top, #F6F6F6, #DDDDDD);

  background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD);    

  color: buttontext;

  padding: 3px 8px;

  margin: 2px;

  text-decoration: none;

  font-family: Arial;

  font-size: 13.1999998092651px;

}

a.stylebouton:hover {

  background-image: -webkit-linear-gradient(top, #DDDDDD, #F6F6F6);

  background-image: -moz-linear-gradient(top, #DDDDDD, #F6F6F6);

  background-image: -ms-linear-gradient(top, #DDDDDD, #F6F6F6);

  background-image: -o-linear-gradient(top, #DDDDDD, #F6F6F6, #DDDDDD);

  background-image: linear-gradient(to bottom, #DDDDDD, #F6F6F6);    

}

Et voilà le résultat :

Lien style bouton

Lien style bouton

À titre comparatif, voici l'apparence qu'on aurait obtenue avec une balise input.

button

Pour plus d'information

« Rediscovering the button element ». Particletree. http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/

« When To Use The Button Element ». CSS-Tricks. http://css-tricks.com/use-button-element/

« The Difference Between Anchors, Inputs and Buttons ». David Walsh. http://davidwalsh.name/html5-buttons

« CSS3 HTML5 Button ». Nilesh Shiragave. http://www.snilesh.com/css3-html5-button/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories