<input type="reset">

Елементи <input> типу reset (скинути) візуалізуються як кнопки, чий усталений обробник події click скидає всі поля форми до своїх початкових значень.

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

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

Значення

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

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

<input type="reset" value="Скинути форму" />

Пропускання атрибута value

Якщо не задати value, то вийде кнопка з усталеним підписом (зазвичай "Reset", але може бути й щось інше, залежно від користувацького агента):

<input type="reset" />

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

Кнопки <input type="reset"> використовуються для скидання форм. При потребі створити особливу кнопку, а потім налаштувати її поведінку за допомогою JavaScript – необхідно використати <input type="button">, а ще краще – елемент <button>.

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

Почнімо зі створення простої кнопки скидання:

<form>
  <div>
    <label for="example">Введіть трохи тексту</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Скинути форму" />
  </div>
</form>

Це візуалізується так:

Спробуйте ввести в текстове поле якийсь текст, а потім натиснути кнопку скидання.

Додавання комбінації клавіш для скидання

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

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

<form>
  <div>
    <label for="example">Введіть трохи тексту</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Скинути форму" accesskey="r" />
  </div>
</form>

Проблема з прикладом вище полягає в тому, що користувач не може дізнатися про комбінацію клавіш! Це особливо важливо, оскільки модифікатори зазвичай є нестандартними, аби уникати їхніх конфліктів. При розробці сайту слід обов'язково подати цю інформацію в формі, що не шкодить дизайну сайту (наприклад, шляхом надання легкодоступного посилання, що веде до інформації про комбінації клавіш на сайті). Додавання підказки до кнопки (за допомогою атрибута title) також може допомогти, попри те, що у зв'язку з потребами доступності, таке рішення не є повним.

Вимикання та вмикання кнопки скидання

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

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

На ходу вмикати та вимикати кнопки можна шляхом присвоєння disabled зі значенням true або false; у JavaScript це має вигляд btn.disabled = true або btn.disabled = false.

[!NOTE] Більше ідей щодо вмикання та вимикання кнопок дивіться на сторінці <input type="button">.

Валідація

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

Приклади

Прості приклади наведено вище. Насправді про кнопки скидання більше нічого додати.

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

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

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

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

• <input> та інтерфейс HTMLInputElement, що його реалізовує.
• Форми та кнопки
• Форми HTML
• Елемент <button>
• Сумісність властивостей CSS