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

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

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

Этот элемент включает только глобальные атрибуты.

Другие элементы могут использоваться совместно с <kbd> для представления более конкретных сценариев:

• Вложение элемента <kbd> внутри другого элемента <kbd> представляет собой фактическую клавишу или другой элемент ввода как часть более крупного элемента ввода. См. Представление нажатий клавиш внутри элемента ввода ниже.
• Вложение элемента <kbd> внутри элемента <samp> представляет собой ввод, который был повторно отображён пользователю системой. См. Повторный ввод ниже для примера.
• Вложение элемента <samp> внутри элемента <kbd>, с другой стороны, представляет ввод, основанный на тексте, представленном системой, таком как имена меню и пунктов меню или имена кнопок, отображаемых на экране. См. пример в разделе Представление вариантов ввода на экране ниже.

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

Результат

Чтобы описать ввод, состоящий из нескольких нажатий клавиш, вы можете вложить несколько элементов <kbd>, при этом внешний элемент <kbd> представляет весь ввод, а каждая отдельная клавиша или компонент ввода заключён в свой собственный элемент <kbd>.

Без стилей

Сначала посмотрим, как это выглядит просто в HTML.

HTML

<p>
  You can also create a new document using the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>

Это оборачивает всю последовательность нажатий клавиш во внешний элемент <kbd>, а затем каждую отдельную клавишу в свой собственный, в порядке обозначения компонентов последовательности.

Результат

Вывод выглядит так без применённого стиля:

Со стилями

Мы можем сделать это более понятным, добавив немного CSS:

CSS

Мы добавляем новый селектор для вложенных элементов <kbd>, kbd>kbd, который мы можем применить при отображении клавиш клавиатуры:

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

HTML

Затем мы обновляем HTML, чтобы использовать этот класс для клавиш в выводе:

<p>
  You can also create a new document by pressing the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>

Результат

Результат именно тот, что мы и хотим!

Вложение элемента <kbd> внутри элемента <samp> представляет ввод, который был повторно отображён пользователю системой.

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

Результат

Вложение элемента <samp> внутри элемента <kbd> представляет ввод, основанный на тексте, представленном системой, таком как имена меню и пунктов меню или имена кнопок, отображаемых на экране.

Например, вы можете объяснить, как выбрать опцию "Новый документ" в меню "Файл", используя HTML, который выглядит так:

<p>
  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</p>

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

Это демонстрирует интересное вложение. Для описания пункта меню весь ввод заключён в элемент <kbd>. Затем внутри него и имя меню, и имя пункта меню заключены в <kbd> и <samp>, указывая на ввод, выбранный из элемента управления на экране.

Результат

• <code>