<input type="button">

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

Спробуйте його в дії

[!NOTE] Хоч елементи <input> типу button досі є цілковито дійсним HTML, та бажаним способом створювати кнопки є новіший елемент <button>. Враховуючи, що текст підпису <button> вставляється між початковим і кінцевим тегами, можна додати в підпис код на HTML, навіть зображення.

Значення

Кнопка зі значенням

Атрибут value елементів <input type="button"> містить рядок, що використовується як підпис кнопки. Цей атрибут забезпечує кнопці доступний опис.

<input type="button" value="Клацни мене" />

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

Якщо не задати value, то вийде порожня кнопка:

<input type="button" />

Застосування кнопок

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

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

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

<form>
  <input type="button" value="Запустити машину" />
</form>
<p>Машина зупинена.</p>

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

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "Запустити машину") {
    button.value = "Запустити машину";
    paragraph.textContent = "Машина запущена!";
  } else {
    button.value = "Запустити машину";
    paragraph.textContent = "Машина зупинена.";
  }
}

Цей сценарій отримує посилання на об'єкт HTMLInputElement, що представляє <input> у DOM, зберігши це посилання в змінній button. Далі використовується addEventListener() – для встановлення функції, що запуститься, коли на кнопці відбудеться подія клацання.

Додавання до кнопок комбінацій клавіш

Комбінації клавіш, також відомі як клавіші звертання та клавіатурні еквіваленти, дають користувачам змогу активувати кнопку за допомогою клавіші або комбінації клавіш клавіатури. Для додавання кнопці комбінації клавіш, як і будь-якому елементу <input>, для якого це має зміст, слід використовувати глобальний атрибут accesskey.

В цьому прикладі s задана як клавіша звертання (знадобиться натиснути s плюс певні клавіші-модифікатори, специфічні для комбінації браузера й ОС; дивіться змістовний список модифікаторів на сторінці accesskey).

<form>
  <input type="button" value="Запустити машину" accesskey="s" />
</form>
<p>Машина зупинена.</p>

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

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "Запустити машину") {
    button.value = "Зупинити машину";
    paragraph.textContent = "Машина запущена!";
  } else {
    button.value = "Запустити машину";
    paragraph.textContent = "Машина зупинена.";
  }
}

[!NOTE] Проблема з прикладом вище, звісно, в тому, що користувач не знатиме, яка клавіша є клавішею звертання! На реальному сайті доведеться надати цю інформацію в спосіб, що не суперечить дизайну сайту (наприклад, шляхом надання легкодоступного посилання, що вказує на інформацію про те, які в сайту клавіші звертання).

Вимкнення та вмикання кнопки

Щоб вимкнути кнопку, слід задати на ній глобальний атрибут disabled, отак:

<input type="button" value="Вимкни мене" disabled />

Задання атрибута disabled

Вмикати й вимикати кнопки динамічно можна за допомогою присвоєння disabled значень true і false. У цьому прикладі кнопка з'являється ввімкненою, однак коли її натиснути, вона вимикається за допомогою button.disabled = true. Потім використовується функція setTimeout(), щоб скинути кнопку до її ввімкненого стану за дві секунди.

<input type="button" value="Ввімкнена" />

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

button.addEventListener("click", disableButton);

function disableButton() {
  button.disabled = true;
  button.value = "Вимкнена";
  setTimeout(() => {
    button.disabled = false;
    button.value = "Ввімкнена";
  }, 2000);
}

Успадкування стану вимкненості

Якщо атрибут disabled не заданий, то кнопка успадковує свій стан disabled від свого елемента-предка. Це уможливлює ввімкнення й вимкнення груп елементів водночас, шляхом загортання їх у контейнер, наприклад, поставивши їх в елемент <fieldset>, а потім додавши такому контейнеру disabled.

Приклад нижче демонструє це в дії. Він вельми подібний до попереднього, окрім того, що атрибут disabled задається на <fieldset>, коли натискається перша кнопка – це призводить до того, що всі три кнопки вимикаються, поки не спливе двосекундний період.

<fieldset>
  <legend>Група кнопок</legend>
  <input type="button" value="Кнопка 1" />
  <input type="button" value="Кнопка 2" />
  <input type="button" value="Кнопка 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);
}

[!NOTE] Firefox, на відміну від решти браузерів, зберігає стан disabled елемента <input> при перезавантаженні сторінки. Щоб це обійти, можна задати атрибут autocomplete елемента <input> зі значенням off. (Дивіться подробиці у Ваді Firefox 654072.)

Валідація

Кнопки не беруть участі в валідації обмежень; вони не мають справжнього значення, котре можна було б обмежити.

Приклади

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

<div class="toolbar">
  <input type="color" aria-label="обрати колір пензля" />
  <input
    type="range"
    min="2"
    max="50"
    value="30"
    aria-label="обрати колір пензля" /><span class="output">30</span>
  <input type="button" value="Очистити полотно" />
</div>

<canvas class="myCanvas">
  <p>Тут додати доцільний запасний вміст.</p>
</canvas>

body {
  background: #ccc;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  background: #ccc;
  width: 150px;
  height: 75px;
  padding: 5px;
}

input[type="color"],
input[type="button"] {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

span {
  position: relative;
  bottom: 5px;
}

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"]');

// перетворити градуси в радіани
function degToRad(degrees) {
  return (degrees * Math.PI) / 180;
}

// оновити виведене значення вибору розміру

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

// зберегти координати вказівника миші, і те, чи є кнопка натисненою
let curX;
let curY;
let pressed = false;

// оновити координати вказівника миші
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();

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• <input>, а також інтерфейс HTMLInputElement, котрий його реалізовує.
• Сучасніший елемент <button>.
• Сумісність властивостей CSS