<kbd> : l'élément de saisie clavier
===================================

L'élément HTML **`<kbd>`** 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 user agent rend par défaut le contenu d'un élément `<kbd>` en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.

`<kbd>` peut être imbriqué dans diverses combinaisons avec `<samp>` (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.

Exemple interactif
------------------

Attributs
---------

Cet élément ne contient que les attributs universels.

Notes d'utilisation
-------------------

D'autres éléments peuvent être utilisés en association avec `<kbd>` afin de représenter certains scénarios plus spécifiques :

* Imbriquer un élément `<kbd>` dans un autre élément `<kbd>` représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. Représenter les frappes de touches dans une saisie ci-après.
* Imbriquer un élément `<kbd>` dans un élément `<samp>` permet d'indiquer que la saisie a été restituée (*echo*) à l'utilisateur. Cf. Saisie restituée, ci-après.
* Imbriquer un élément `<samp>` dans un élément `<kbd>` 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. Représenter les options de saisies à l'écran ci-après.

**Note :** Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément `<kbd>`. À 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.

Exemples
--------

### Exemple simple


```html
<p>
  Utilisez la commande <kbd>help macommande</kbd> afin de consulter la
  documentation pour la commande "macommande".
</p>
```


#### Résultat

### Représenter les frappes de touches dans une saisie

Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément `<kbd>` dans un élément `<kbd>` englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément `<kbd>`.

#### Sans mise en forme

Commençons par analyser le code HTML.

##### HTML


```html
<p>
  Vous pouvez également créer un nouveau document en utilisant le raccourci
  clavier
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
 >.
</p>
```


On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément `<kbd>` et que chaque touche possèe son propre élément.

##### Résultat

Sans mise en forme particulière, voici le résultat obtenu :

#### Avec style

On peut alors ajouter un peu de CSS :

##### CSS

On ajoute un règle pour les les éléments `<kbd>` avec la classe `"key"` afin de représenter les touches d'un clavier :


```css
kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```


##### HTML

On met à jour le code HTML afin d'utiliser cette classe :


```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>
```


##### Résultat

### Saisie restituée

En imbriquant un élément `<kbd>` dans un élément `<samp>`, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).

#### HTML


```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>
```


#### Résultat

### Représenter les options de saisies à l'écran

Imbriquer un élément `<samp>` dans un élément `<kbd>` 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.).

#### HTML

Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :


```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>
```


On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément `<kbd>` qui contient le menu et le nom de l'élément du menu dans des éléments `<kbd>` et `<samp>`, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.

#### Résultat

Résumé technique
----------------

|  |  |
| --- | --- |
| Catégories de contenu | Contenu de flux,
 contenu phrasé,
 contenu tangible.
  |
| Contenu autorisé | Contenu phrasé. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | 
 Tout élément qui accepte du
 contenu phrasé.
  |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | `HTMLElement`Jusqu'à Gecko 1.9.2 (Firefox
 4), Firefox implémentait l'interface
 `HTMLSpanElement` pour cet élément.
  |

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-kbd-element |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `<code>`
* `<samp>`