1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
---
title: '<kbd> : l''élément de saisie clavier'
slug: Web/HTML/Element/kbd
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/kbd
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">L'élément HTML <code><strong><kbd></strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le </span>{{Glossary("user agent")}}<span class="seoSummary"> rend par défaut le contenu d'un élément <code><kbd></code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</span></p>
<p><code><kbd></code> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Attributs">Attributs</h2>
<p>Cet élément ne contient que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
<p>D'autres éléments peuvent être utilisés en association avec <code><kbd></code> afin de représenter certains scénarios plus spécifiques :</p>
<ul>
<li>Imbriquer un élément <code><kbd></code> dans un autre élément <code><kbd></code> représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après.</li>
<li>Imbriquer un élément <code><kbd></code> dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (<em>echo</em>) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.</li>
<li>Imbriquer un élément <code><samp></code> dans un élément <code><kbd></code> permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après..</li>
</ul>
<div class="note">
<p><strong>Note :</strong> Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <code><kbd></code>. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.</p>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<pre class="brush: html"><p>Utilisez la commande <kbd>help macommande</kbd> afin de consulter
la documentation pour la commande "macommande".</p>
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample('Exemple_simple', 350, 80)}}</p>
<h3 id="Représenter_les_frappes_de_touches_dans_une_saisie">Représenter les frappes de touches dans une saisie</h3>
<p>Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <code><kbd></code> dans un élément <code><kbd></code> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <code><kbd></code>.</p>
<h4 id="Sans_mise_en_forme">Sans mise en forme</h4>
<p>Commençons par analyser le code HTML.</p>
<h5 id="HTML">HTML</h5>
<pre class="brush: html"><p>
Vous pouvez également créer un nouveau document
en utilisant le raccourci clavier
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.
</p></pre>
<p>On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <code><kbd></code> et que chaque touche possèe son propre élément.</p>
<h5 id="Résultat_2">Résultat</h5>
<p>Sans mise en forme particulière, voici le résultat obtenu :</p>
<p>{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}</p>
<h4 id="Avec_style">Avec style</h4>
<p>On peut alors ajouter un peu de CSS :</p>
<h5 id="CSS">CSS</h5>
<p>On ajoute un règle pour les les éléments <code><kbd></code> avec la classe <code>"key"</code> afin de représenter les touches d'un clavier :</p>
<pre class="brush: css">kbd.key {
border-radius: 3px;
padding: 1px 2px 0;
border: 1px solid black;
}</pre>
<h5 id="HTML_2">HTML</h5>
<p>On met à jour le code HTML afin d'utiliser cette classe :</p>
<pre class="brush: html"><p>
Vous pouvez également créer un nouveau document
en utilisant le raccourci clavier
<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
</p></pre>
<h5 id="Résultat_3">Résultat</h5>
<p>{{EmbedLiveSample("Avec_style", 650, 80)}}</p>
<h3 id="Saisie_restituée">Saisie restituée</h3>
<p>En imbriquant un élément <code><kbd></code> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p>
S'il se produit une erreur de syntaxe, cet outil affichera
la commande initialement saisie pour que vous la revoyez :
</p>
<blockquote>
<samp><kbd>custom-git ad mon-nouveau-fichier.cpp</kbd></samp>
</blockquote></pre>
<h4 id="Résultat_4">Résultat</h4>
<p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p>
<h3 id="Représenter_les_options_de_saisies_à_l’écran">Représenter les options de saisies à l’écran</h3>
<p>Imbriquer un élément <code><samp></code> dans un élément <code><kbd></code> représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p>
<h4 id="HTML_4">HTML</h4>
<p>Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :</p>
<pre class="brush: html"><p>
Pour créer un nouveau fichier, sélectionner l'option
<kbd><kbd><samp>Fichier</samp></kbd>⇒<kbd><samp>Nouveau
document</samp></kbd></kbd> dans le menu.
</p>
<p>
N'oubliez pas de cliquer sur le bouton
<kbd><samp>OK</samp></kbd> afin de confirmer
que vous avez saisi le nom du nouveau fichier.
</p></pre>
<p>On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <code><kbd></code> qui contient le menu et le nom de l'élément du menu dans des éléments <code><kbd></code> et <code><samp></code>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.</p>
<h4 id="Résultat_5">Résultat</h4>
<p>{{EmbedLiveSample("Représenter_les_options_de_saisies_à_l’écran", 650, 120)}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
<td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a>.</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Tous les rôles sont autorisés.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLElement")}}<br>
Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
</tr>
</tbody>
</table>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("html.elements.kbd")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{htmlelement("code")}}</li>
<li>{{htmlelement("samp")}}</li>
</ul>
|
