Кнопка

Html input type reset form

Вы можете легко сбросить все значения формы с помощью кнопки HTML, используя атрибут . Нажатие кнопки сброса возвращает форму в исходное состояние (значение по умолчанию) до того, как пользователь начал вводить значения в поля, выбирать переключатели, флажки и т. д.

Как сбросить текст в HTML?

Что такое форма сброса?

Метод сброса()Метод сброса()сбрасывает значения всех элементов формы (то же самое,что и нажатие кнопки Сброс).Совет:Для отправки формы используйте метод submit().

Как установить кнопку сброса?

По сути, кнопка сброса используется для сброса всех значений данных формы и установки их исходного значения по умолчанию. В случае, если пользователь ввел неправильные данные, пользователь может легко исправить их, нажав кнопку «Сброс». Сначала мы создаем HTML-документ, содержащий элемент

.

Как сбросить значение формы?

Метод reset() восстанавливает значения элемента формы по умолчанию. Этот метод делает то же самое, что и щелчок по элементу управления формы. Если элемент управления формы (например, кнопка сброса) имеет имя или идентификатор сброса, он будет маскировать метод сброса формы. Он не сбрасывает другие атрибуты ввода, такие как disabled .

Почему используется сброс типа кнопки?

Нажатие кнопки сброса очистит все элементы ввода в форме до их первоначального значения.Кнопка может содержать текст,изображения,значки и другие элементы.

Try it

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

Value

Атрибут value элемента содержит строку, которая используется в качестве метки кнопки. В противном случае такие кнопки, как reset , не имеют значения. value reset

Установка атрибута значения

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

Опуская атрибут значения

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

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

Кнопки используются для сброса форм. Если вы хотите создать пользовательскую кнопку, а затем настроить ее поведение с помощью JavaScript, вам необходимо использовать или, что еще лучше, элемент .

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

Начнем с создания простой кнопки сброса:

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> 

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

Добавление клавиатурной комбинации сброса

Чтобы добавить сочетание клавиш к кнопке сброса — так же, как и к любому , для которого это имеет смысл, — вы используете глобальный атрибут 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 .

Примечание. Дополнительные сведения о включении и отключении кнопок см. На странице .

Validation

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

Examples

Мы включили простые примеры выше.Больше нечего сказать о кнопках сброса.

Specifications

Источник

Html input type reset form

elements of type reset are rendered as buttons, with a default click event handler that resets all inputs in the form to their initial values.

Try it

Note: You should usually avoid including reset buttons in your forms. They’re rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).

Value

An element’s value attribute contains a string that is used as the button’s label. Buttons such as reset don’t have a value otherwise.

Setting the value attribute

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

Omitting the value attribute

If you don’t specify a value , you get a button with the default label (typically «Reset,» but this will vary depending on the user agent):

Using reset buttons

buttons are used to reset forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use , or better still, a element.

A simple reset button

We’ll begin by creating a simple reset button:

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

Try entering some text into the text field, and then pressing the reset button.

Adding a reset keyboard shortcut

To add a keyboard shortcut to a reset button — just as you would with any for which it makes sense — you use the accesskey global attribute.

In this example, r is specified as the access key (you’ll need to press r plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

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

The problem with the above example is that there’s no way for the user to know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn’t interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it’s not a complete solution for accessibility purposes.

Disabling and enabling a reset button

To disable a reset button, specify the disabled attribute on it, like so:

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

You can enable and disable buttons at run time by setting disabled to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .

Validation

Buttons don’t participate in constraint validation; they have no real value to be constrained.

Examples

We’ve included simple examples above. There isn’t really anything more to say about reset buttons.

Technical summary

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Кнопки

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.

Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .

Рассмотрим вначале добавление кнопки через и его синтаксис.

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок

Атрибут	Описание
name	Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.

Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .