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

Элементы <input> типа reset отображаются в виде кнопок с обработчиком события click, который по умолчанию сбрасывает все поля формы до их исходных значений.

Попробуйте

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"],
input[type="submit"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

input[type="submit"] {
  grid-column: 2;
  grid-row: 3;
}

Значение

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

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

<input type="reset" value="Reset the form" />

Если атрибут value не указан

Если не указать value, отобразится кнопка с подписью по умолчанию (обычно «Сбросить», но она зависит от пользовательского агента):

<input type="reset" />

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

Кнопки <input type="reset"> используются для сброса форм. Если нужно создать собственную кнопку и настроить её поведение с помощью JavaScript, используйте <input type="button"> или, что ещё лучше, элемент <button>.

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

Для начала создадим простую кнопку сброса:

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

Она будет выглядеть так:

Попробуйте ввести текст в текстовое поле, а затем нажать кнопку сброса.

Добавление сочетания клавиш для сброса

Чтобы добавить сочетание клавиш для кнопки сброса — как и для любого элемента <input>, для которого это имеет смысл, — используйте глобальный атрибут accesskey.

В этом примере клавишей доступа указана r (потребуется нажать r вместе с соответствующими клавишами-модификаторами для вашего браузера и ОС; полезный список таких сочетаний см. на странице accesskey).

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" accesskey="r" />
  </div>
</form>

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

Отключение и включение кнопки сброса

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

<input type="reset" value="Disabled" disabled />

Кнопки можно включать и отключать во время выполнения, присваивая disabled значение true или false; в JavaScript это выглядит как btn.disabled = true или btn.disabled = false.

Проверка валидности

Кнопки не участвуют в проверке ограничений: у них нет значения, которое можно было бы проверить.

Примеры

Выше приведены простые примеры. О кнопках сброса больше особо нечего сказать.

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

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

Совместимость с браузерами

См. также

• <input> и интерфейс HTMLInputElement, который его реализует.
• Формы и кнопки
• Формы HTML
• Элемент <button>