SELFHTML: HTML/XHTML / Formulaires / Boutons pouvant être cliqués

	Boutons pouvant être cliqués
	Définir des boutons pouvant être cliqués (traditionnels) Définir des boutons pouvant être cliqués (modernes) Autres informations

Définir des boutons pouvant être cliqués (traditionnels)

Vous pouvez définir des boutons pouvant être cliqués n'ayant aucune signification particulière. De tels boutons définissables à souhait ne sont judicieux qu'en relation avec des langages de programmation comme JavaScript. En règle générale, ils sont employés pour exécuter des liens ou d'autres commandes contrôlées par JavaScript.

La possibilité traditionnelle décrite ici a l'avantage d'être également interprétée par des navigateurs plus anciens (Netscape depuis la version 2.x, l'Explorer Internet MS depuis la version 3.x).

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Liens sous une autre forme</h1>

<form action="input_button.htm">
<p>
<input type="button" name="lien" value="SELFHTML page d'accueil"
onClick="self.location.href='http://actuel.fr.selfhtml.org/'">
</p>
</form>

</body>
</html>

Explication:

Avec <input type="button"> vous définissez un bouton (input = entrée). Vous déterminez l'inscription du bouton grâce à la mention value= (value = valeur). Pour mentionner ce qui doit se passer quand le bouton est cliqué, vous pouvez par exemple utiliser le gestionnaire d'événements onClick=. Derrière le signe égal mentionnez une commande JavaScript, par exemple l'appel d'une fonction JavaScript que vous avez écrite vous-même. Dans l'exemple ci-dessus le saut à un lien menant à une URI mentionnée est exécuté par la propriété objet JavaScript location.href . Une autre instruction JavaScript appréciée et toute simple pouvant être attribuée à un bouton est onClick="history.back()". Le bouton reçoit alors la fonction retour du navigateur.

Avec l'attribut name= vous pouvez attribuer un nom au bouton. C'est par ce nom que JavaScript peut accéder au bouton. Le nom ne doit pas être trop long et ne peut contenir ni espace, ni caractères spéciaux ni caractères avec accent. Le premier signe doit être une lettre. Ensuite les chiffres sont également permis. Utilisez tout au plus comme caractères spéciaux dans le nom le tiret de soulignement (_), le trait d'union (-), les deux points (:) ou le point (.). Par rapport à JavaScript, le nom ne peut même contenir que des lettres , des chiffres et le tiret de soulignement (_). Les majuscules et minuscules sont différenciées comme dans la plupart des langages de programmation.

Définir des boutons pouvant être cliqués (modernes)

À partir de HTML 4.0 les boutons pouvant être cliqués peuvent enfin s'appeler comme ils s'appellent à savoir : Button. De tels boutons sont plus souples que les boutons traditionnels parce qu'ils peuvent aussi avoir un contenu défini comme par exemple un graphique.

L'inconvénient en est qu'ils ne sont soutenus que par les navigateurs les plus récents - de toutes façons pas encore par Netscape 4.x .

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Liens sous une autre forme</h1>

<form action="bouton.htm">
<div>
<button name="cliquemoi" type="button"
  value="SELFHTML" onClick="self.location.href='http://actuel.fr.selfhtml.org/'">
 <p><img src="selfhtml.gif" width="106" height="109" border="0" alt="SELFHTML"><br>
 <b>page d'accueil de SELFHTML</b></p>
</button>
</div>
</form>

</body>
</html>

Explication:

Introduisez la définition d'un tel bouton avec <button>. Ce repère nécessite un repère de fermeture </button>, avec lequel vous terminez la définition du bouton .

Entre les repères d'ouverture et de fermeture peuvent se trouver des contenus. Tout ce que vous notez entre <button>...et </button>, est affiché comme "inscription" du bouton. Cela peut aussi tout à fait être des Graphiques, comme dans l'exemple ci-dessus.

Dans le repère d'ouverture <button> notez les différentes mentions concernant le bouton. La mention type="button" peut sembler un peu étrange alors que le repère porte déjà ce nom. Notez pourtant cette mention pour tous les boutons que vous utilisez pour des langages Script. Car à l'aide du repère button vous pouvez aussi définir deux autres types de boutons à savoir les boutons pour envoyer ou interrompre.

Avec l'attribut name= vous pouvez affecter un nom au bouton. Pour le nom s'appliquent les mêmes remarques que pour définir des boutons pouvant être cliqués (traditionnels).

Avec l'attribut value= vous pouvez déterminer l'inscription du bouton au cas où vous ne notez pas de contenu entre <button>...et </button>. Ne perdez pourtant pas de vue que les navigateurs ignorent cette mention et qu'en l'absence de contenu ils affichent un bouton vide bien dépouillé.

Pour mentionner ce qui doit se passer quand le bouton est cliqué, vous pouvez par exemple utiliser le gestionnaire d'événements onClick=. Derrière le signe égal mentionnez une commande JavaScript, par exemple l'appel d'une fonction JavaScript que vous avez écrite vous-même.

Attention:

Étant donné que le bouton peut déjà être cliqué, tous les éléments HTML créant une fonction de lien y sont prohibés. Aucun lien n'est donc permis dans le contenu et les graphiques affichés comme contenu du bouton ne peuvent avoir aucun attribut usemap= pour les graphiques composés de liens (Image Maps: cartes cliquables) .

Autres informations

Dans le sommaire de référence HTML vous trouverez des données précisant où les éléments décrits ici peuvent être mis, quels attributs ils peuvent avoir et ce à quoi il faut veiller pour ces différents attributs:
référence pour les éléments pour les éléments de formulaire input (<input>)
référence pour les attributs pour les éléments de formulaire input (<input>)
référence pour les éléments pour les boutons (<button>...</button>)
référence pour les attributs pour les boutons (<button>...</button>)


	Champs pour fichier à transmettre
	Listes de choix, cases d'option et cases à cocher

SELFHTML/Aides à la navigation

HTML/XHML

Formulaires