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

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

Попробуйте

<p>
  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
  MDN page.
</p>

kbd {
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(255 255 255 / 0.7) inset;
  color: #333333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

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

Атрибуты

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

Примечания по использованию

Вместе с <kbd> можно использовать другие элементы, чтобы представить более конкретные сценарии:

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

Примеры

Базовый пример

<p>
  Use the command <kbd>help my-command</kbd> to view documentation for the
  command "my-command".
</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>