<kbd>: Элемент ввода с клавиатуры

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

HTML элемент ввода с клавиатуры (<kbd>) указывает на то, что текст внутри элемента  описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста. По общему соглашению, user agent использует моноширный шрифт для отображения содержимого элемента <kbd> по-умолчанию, хотя это и не указывается HTML стандартом явно.

<kbd> можно использовать в различных комбинациях с  <samp> (Sample Output) элементом для отображения различных форм ввода с клавиатуры или ввода, базирующегося на визуальных сигналах.

Content categories Flow content, phrasing content, palpable content.
Permitted content Phrasing content.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Permitted parents Any element that accepts phrasing content.
Permitted ARIA roles Any
DOM interface HTMLElement


Этот элемент использует только глобальные атрибуты.

Usage notes

Other elements can be used in tandem with <kbd> to represent more specific scenarios:

  • Nesting a <kbd> element within another <kbd> element represents an actual key or other unit of input as a portion of a larger input. See Representing keystrokes within an input below.
  • Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system. See Echoed input, below, for an example.
  • Nesting a <samp> element inside a <kbd> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under Representing onscreen input options below.

You can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your CSS.


Basic example

<p>Use the command <kbd>help mycommand</kbd> to view documentation
for the command "mycommand".</p>


Representing keystrokes within an input

To describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>.


First, let's look at what this looks like as just plain HTML.

<p>You can also create a new document using the keyboard shortcut

This wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence.


The output looks like this without a style sheet applied:

With custom styles

We can make more sense of this by adding some CSS:


We add new new style for <kbd> elements, "key", which we can apply when rendering keyboard keys:

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

Then we update the HTML to use this class on the keys in the output to be presented:

<p>You can also create a new document by pressing
<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.</p>

The result is just what we want!

Echoed input

Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system.

<p>If a syntax error occurs, the tool will output the initial
command you typed for your review:</p>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>

The result looks like this:

Representing onscreen input options

Nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:

<p>To create a new file, choose the menu option

<p>Don't forget to click the <kbd><samp>OK</samp></kbd> button
to confirm once you've entered the name of the new file.</p>

This does some interesting nesting. For the menu option description, the entire input is enclosed in a <kbd> element. Then, inside that, both the menu and menu item names are  contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget.

Similarly, the representation of the keyboard shortcut is done by enclosing the entire keyboard shortcut text inside <kbd>, but by also wrapping each key in its own <kbd> element.

You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <kbd> element. In other words, simplifying this to just <kbd>Ctrl</kbd>+<kbd>N</kbd> would be perfectly valid.

Depending on your style sheet , though, you may find it useful to do this kind of nesting.

The output from this HTML looks like this:


Specification Status Comment
HTML Living Standard
Определение '<kbd>' в этой спецификации.
Живой стандарт  
Определение '<kbd>' в этой спецификации.
Рекомендация Expanded to include any user input, like voice input and individual keystrokes.
HTML 4.01 Specification
Определение '<kbd>' в этой спецификации.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
kbdChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1
Полная поддержка 1
Замечания Before Firefox 4, creating a <kbd> element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement.
IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да


Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

See also