<input type="reset">
Елементи <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 | |
Методи | Жодних |
Неявна роль ARIA | button |
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
type="reset"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support Так | Safari Full support 1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
Дивіться також
<input>
та інтерфейсHTMLInputElement
, що його реалізовує.- Форми та кнопки
- Форми HTML
- Елемент
<button>
- Сумісність властивостей CSS