`<input type="button">` значение атрибута

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она поддерживается браузерами с июля 2015 года.

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

Попробуйте

<input class="styled" type="button" value="Add to favorites" />

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 20%),
    rgb(0 0 0 / 20%) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 60%),
    inset -2px -2px 3px rgb(0 0 0 / 60%);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 60%),
    inset 2px 2px 3px rgb(0 0 0 / 60%);
}

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

Значение

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

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

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

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

Если не указать value, кнопка будет пустой:

<input type="button" />

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

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

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

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

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

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

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

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

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

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

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

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

<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 от родительского элемента. Это позволяет одновременно включать и отключать группы элементов, помещая их в контейнер, например элемент <fieldset>, а затем устанавливая disabled для контейнера.

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

<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 опущен). С помощью двух верхних элементов управления можно выбрать цвет и размер пера. При нажатии кнопки вызывается функция, очищающая холст.

<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 size picker 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();

Техническая сводка

Значение	Строка, используемая в качестве метки кнопки
События	`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	WebView для iOS
`button`	1	12	1	15	1	18	4	14	1	1.0	4.4	1

См. также

<input> и реализующий его интерфейс HTMLInputElement.
Более современный элемент <button>.

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

<input type="button"> значение атрибута