<input type="reset">

{{HTMLSidebar}}

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

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

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

Значення

Атрибут 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.

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

Валідація

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

Приклади

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

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

Значення Рядок, що використовується як підпис кнопки
Події click
Доступні спільні атрибути type і value
Атрибути IDL value
Інтерфейс DOM

HTMLInputElement

Методи Жодних
Неявна роль ARIA button

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
type="reset"
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
footnote
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support 1
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support 4
footnote
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes

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