<input type="button">

<input> элементы типа button отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями на веб-странице, присваивая им функцию обработчика событий (обычно для события click).

Попробуйте

Примечание: Хотя элементы <input> типа button по-прежнему являются полностью допустимым HTML, новый элемент <button> теперь является предпочтительным способом создания кнопок. Поскольку текст метки <button> вставляется между открывающим и закрывающим тегами, вы можете включать в метку HTML, даже изображения.

Значение

Кнопка со значением

Атрибут value элемента <input type="button"> содержит строку, которая используется в качестве метки кнопки. value предоставляет доступное описание для кнопки.

html

<input type="button" value="Click Me" />

Кнопка без значения

Если вы не укажете value, вы получите пустую кнопку:

html

<input type="button" />

Использование кнопок

Элементы <input type="button"> не имеют поведения по умолчанию (их аналоги, <input type="submit"> и <input type="reset"> используются для отправки и сброса форм соответственно). Чтобы кнопки выполняли какие-либо действия, вам необходимо написать код JavaScript.

Простая кнопка

Начнем с создания простой кнопки с обработчиком событий click, который запускает нашу машину (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):

html

<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>

const button = document.querySelector("input");
const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "Start machine") {
    button.value = "Stop machine";
    paragraph.textContent = "The machine has started!";
  } else {
    button.value = "Start machine";
    paragraph.textContent = "The machine is stopped.";
  }
}

Скрипт получает ссылку на объект HTMLInputElement, представляющий <input> в DOM, сохраняя эту ссылку в переменной button. addEventListener() затем используется для создания функции, которая будет выполняться при возникновении событий click на кнопке.

Добавление сочетаний клавиш к кнопкам

Сочетания клавиш, также известные как клавиши доступа и эквиваленты клавиатуры, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — так же, как вы сделали бы с любым <input>, для которого это имеет смысл — вы используете глобальный атрибут accesskey.

В этом примере s указан как клавиша доступа (вам нужно будет нажать s плюс определенные клавиши-модификаторы для вашей комбинации браузера/ОС; см. accesskey для полезного списка этих клавиш).

html

<form>
  <input type="button" value="Start machine" accesskey="s" />
</form>
<p>The machine is stopped.</p>

Примечание: Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, какая клавиша является клавишей доступа! На реальном сайте вам нужно будет предоставить эту информацию таким образом, чтобы она не мешала дизайну сайта (например, предоставив легкодоступную ссылку, которая указывает на информацию о том, какие клавиши доступа есть на сайте).

Отключение и включение кнопки

Чтобы отключить кнопку, укажите глобальный атрибут disabled, например:

html

<input type="button" value="Disable me" disabled />

Установка атрибута disabled

Вы можете включать и отключать кнопки во время выполнения, устанавливая disabled в true или false. В этом примере наша кнопка изначально включена, но если вы нажмете ее, она будет отключена с помощью button.disabled = true. Функция setTimeout() затем используется для возвращения кнопки в включенное состояние через две секунды.

html

<input type="button" value="Enabled" />

const button = document.querySelector("input");

button.addEventListener("click", disableButton);

function disableButton() {
  button.disabled = true;
  button.value = "Disabled";
  setTimeout(() => {
    button.disabled = false;
    button.value = "Enabled";
  }, 2000);
}

Наследование состояния disabled

Если атрибут disabled не указан, кнопка наследует свое состояние disabled от своего родительского элемента. Это позволяет включать и отключать группы элементов одновременно, заключая их в контейнер, такой как элемент <fieldset>, а затем устанавливая disabled на контейнер.

Пример ниже показывает это в действии. Он очень похож на предыдущий пример, за исключением того, что атрибут disabled устанавливается на <fieldset> при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.

html

<fieldset>
  <legend>Button group</legend>
  <input type="button" value="Button 1" />
  <input type="button" value="Button 2" />
  <input type="button" value="Button 3" />
</fieldset>

const button = document.querySelector("input");
const fieldset = document.querySelector("fieldset");

button.addEventListener("click", disableButton);

function disableButton() {
  fieldset.disabled = true;
  setTimeout(() => {
    fieldset.disabled = false;
  }, 2000);
}

Примечание: В отличие от других браузеров, Firefox сохраняет состояние disabled элемента <input> даже после перезагрузки страницы. В качестве обходного пути установите атрибут autocomplete элемента <input> в off. (См. ошибку Firefox 654072 для получения более подробной информации).

Валидация

Кнопки не участвуют в проверке ограничений; у них нет реального значения, которое можно было бы ограничить.

Примеры

В примере ниже показано очень простое приложение для рисования, созданное с помощью элемента <canvas> и некоторого простого CSS и JavaScript (мы скроем CSS для краткости). Два верхних элемента управления позволяют выбирать цвет и размер пера для рисования. Кнопка при нажатии вызывает функцию, которая очищает холст.

html

<div class="toolbar">
  <input type="color" aria-label="select pen color" />
  <input
    type="range"
    min="2"
    max="50"
    value="30"
    aria-label="select pen size" /><span class="output">30</span>
  <input type="button" value="Clear canvas" />
</div>

<canvas class="myCanvas">
  <p>Add suitable fallback here.</p>
</canvas>

const canvas = document.querySelector(".myCanvas");
const width = (canvas.width = window.innerWidth);
const height = (canvas.height = window.innerHeight - 85);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0 0 0)";
ctx.fillRect(0, 0, width, height);

const colorPicker = document.querySelector('input[type="color"]');
const sizePicker = document.querySelector('input[type="range"]');
const output = document.querySelector(".output");
const clearBtn = document.querySelector('input[type="button"]');

// covert degrees to radians
function degToRad(degrees) {
  return (degrees * Math.PI) / 180;
}

// update sizepicker output value

sizePicker.oninput = () => {
  output.textContent = sizePicker.value;
};

// store mouse pointer coordinates, and whether the button is pressed
let curX;
let curY;
let pressed = false;

// update mouse pointer coordinates
document.onmousemove = (e) => {
  curX = e.pageX;
  curY = e.pageY;
};

canvas.onmousedown = () => {
  pressed = true;
};

canvas.onmouseup = () => {
  pressed = false;
};

clearBtn.onclick = () => {
  ctx.fillStyle = "rgb(0 0 0)";
  ctx.fillRect(0, 0, width, height);
};

function draw() {
  if (pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(
      curX,
      curY - 85,
      sizePicker.value,
      degToRad(0),
      degToRad(360),
      false,
    );
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();

Техническое резюме

Value	Строка, используемая в качестве подписи кнопки
События	`click`
Поддерживаемые общие атрибуты	`type` и `value`
Атрибуты IDL	`value`
DOM интерфейс	`HTMLInputElement`
Неявная роль ARIA	`button`
Методы	Нет

Спецификации

Спецификация
HTML Стандарт # button-state-(type=button)

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`button`	1	12	1	15	1	18	4	14	1	1.0	4.4

См. также

<input> и интерфейс HTMLInputElement, который его реализует.
Более современный элемент <button>.
Совместимость CSS свойств

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button