SELFHTML: HTML/XHTML / Formulaires / Recherche par tabulateur, raccourcis clavier et mise en grisé

	Recherche par tabulateur, raccourcis clavier et mise en grisé
	Recherche par tabulateur Raccourcis clavier Mise en grisé d'éléments

Recherche par tabulateur

Les navigateurs plus modernes permettent de passer d'un élément à l'autre du formulaire grâce à la touche de tabulateur du clavier.

Normalement cela permet de passer d'un élément à l'autre du formulaire dans l'ordre dans lequel ils sont définis dans le fichier. Vous pouvez cependant en HTML déterminer un autre ordre.

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>Parcourez donc avec [Tab]!</h1>

<form action="tabindex.htm">
<pre>
Premier Champ: <input type="text" size="40" maxlength="40" tabindex="4">
Deuxième champ: <input type="text" size="40" maxlength="40" tabindex="1">
Troisième champ: <input type="text" size="40" maxlength="40" tabindex="3">
<input type="button" tabindex="2" value="Clique">
</pre>
</form>

</body>
</html>

Explication:

Grâce à l'attribut tabindex=dans le repère d'ouverture de l'un des repères du formulaire <input>, <textarea>, <select> ou bien <button> vous pouvez mentionner l'ordre de recherche par tabulateur. Notez les mentions dans tous les repères correspondants du formulaire et affectez à chaque mention un chiffre. En passant d'un élément à l'autre avec le tabulateur, c'est d'abord l'élément du formulaire avec le plus petit chiffre Tabindex qui sera trouvé, puis le deuxième plus petit etc... et en dernier celui avec le chiffre Tabindex le plus élevé. Dans l'exemple ci-dessus, c'est d'abord le champ 2 qui sera trouvé, ensuite le bouton défini en 4ème ligne, puis le champ 3 et en dernier le champ 1.

Les chiffres compris entre 0 et 32767 sont permis.

Attention:

Les tabindex se rapportent toujours à la totalité du fichier affiché. Ainsi sont aussi compris les liens, graphiques composés de liens -cartes cliquables- (Image Maps) et les objets. Si vous avez de tels éléments en plus du formulaire dans votre fichier, vous devez fixer l'ordre de recherche par tabulateur pour l'ensemble des éléments. Voir aussi Recherche tabulateur et raccourcis clavier pour les liens.

Raccourcis clavier

Vous pouvez proposer à l'utilisateur de passer à un certain élément du formulaire en actionnant une touche. L'élément est ainsi choisi - il n'est pas pour autant "exécuté", à savoir par exemple cliqué ou coché. Cocher les cases à cocher ou les cases de choix s'effectue la plupart de temps avec la barre d'espacement et cliquer ou exécuter les boutons avec la touche "Entrée" ou "Retour".

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>Mettez vous sur la touche!</h1>

<form action="accesskey.htm">
<p>Un champ avec [Alt]+c:<br>
<input type="text" size="40" value="champ" accesskey="c"></p>
<p>Un bouton avec [Alt]+b:<br>
<input type="button" value="bouton" accesskey="b"></p>
<p>Un passage de saisie avec [Alt]+p:<br>
<textarea cols="50" rows="5" accesskey="p">texte</textarea></p>
</form>

</body>
</html>

Explication:

Grâce à l'attribut accesskey= vous pouvez déterminer un signe du clavier que l'utilisateur peut appuyer pour passer directement à un élément du formulaire (accesskey = touche d'accès). Chez la plupart des navigateurs, cela marche de telle façon que vous pouvez mentionner une lettre avec accesskey= qui actionnée ensuite avec la touche [Alt] mènera directement au champ choisi.

L'attribut accesskey= est permis dans les repères de formulaires <input>, <textarea>, <select>, <label>, <legend> ou bien <button>.

Attention:

Utilisez des touches qu'on trouve sur chaque clavier. Les touches de fonction par exemple comme on les trouve sur les claviers MF II pour MS Windows, ne peuvent pas du tout être adressées par cette commande.

Attirez l'attention de l'utilisateur dans le texte sur la possibilité d'un accès par le clavier.

Mise en grisé d'éléments

Vous pouvez mettre du grisé sur des éléments pour signaler que l'élément est sans signification dans le contexte actuel. Les éléments mis en grisé sont aussi ignorés lors d'une recherche par tabulateur.

Cette mention est avant tout judicieuse comme base HTML pour des langages Script qui mettent en grisé de façon dynamique d'après les saisies ou les choix effectués dans d'autres éléments. Ainsi par exemple il serait judicieux de mettre en grisé de façon dynamique les mentions sur le type de la voiture conduite, si l'utilisateur a coché qu'il ne possédait pas de voiture. La mise en grisé d'éléments comme mention statique est par contre rarement fondée, étant donné que les éléments de formulaire que l'on définit, le sont en fin de compte pour de bonnes raisons.

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>Un formulaire pour plus tard!</h1>

<form action="disabled.htm">
<p>Votre nom:<br>
<input type="text" size="40" disabled></p>
<p>votre commentaire:<br>
<textarea cols="50" rows="5" disabled></textarea></p>
</form>

</body>
</html>

Explication:

Avec l'attribut disabled vous mettez un élément en grisé. L'attribut est permis dans les repères de formulaire <input>, <textarea>, <select>, <option>, <optgroup> ou bien <button>. Pour l'Explorer Internet MS comme pour Netscape l'effet en est que le champ ne peut purement et simplement pas être édité voire cliqué. Une signalisation optique par contre n'existe dans aucun des deux navigateurs.

Attention:

Quand vous voulez travailler conformément à XHML, vous devez noter cet attribut sous la forme disabled="disabled". De plus amples remarques à ce sujet dans le chapitre sur XHTML et HTML


	Boutons pour envoyer ou interrompre
	Grouper des éléments et étiquette pour des éléments

SELFHTML/Aides à la navigation

HTML/XHML

Formulaires