Как сделать кнопку очистить в html

Добавил пользователь Алексей Ф.
Обновлено: 05.10.2024

Внешний вид

Примечание

Действие данной кнопки распространяется только на ту форму, которой принадлежит эта кнопка.

Поддержка браузерами

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

Верс.	Раздел
HTML
2.0	Reset Button: INPUT TYPE=RESET	Перевод
3.2	INPUT text fields, radio buttons, check boxes, .
4.01	17.4.1 Control types created with INPUT reset buttons. DTD: Transitional Strict Frameset
5.0	4.10.5.1.17 Reset Button state (type=reset)
5.1	4.10.5.1.20. Reset Button state (type=reset)
XHTML
1.0	Extensible HyperText Markup Language DTD: Transitional Strict Frameset
1.1	Extensible HyperText Markup Language

Сопутствующие атрибуты

autofocus Автоматческая фокусировка на кнопке сброса после полной загрузки страницы. disabled Блокировка кнопки сброса.

disabled="disabled"

form Присоединение кнопки сброса к форме. name Присваивает имя кнопке сброса. value Указывает текст кнопки сброса.

value="Текст"

Формы: кнопки RESET и SUBMIT.

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

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

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

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега

Преимущество кнопки сброса заключается в том, что она повторно заполнит все элементы формы их исходными значениями, а не просто установит для них нулевое или пустое значение. Таким образом, если форма была сгенерирована сервером с сохраненными данными, пользователь вносит кучу изменений, а затем понимает не только то, что что-то не так, но и то, что они также не имеют понятия, каково было исходное значение, сброс ОЧЕНЬ удобен.

Также это удобно для форм с большим количеством числовых данных, таких как страница расписания, над которой я сейчас работаю. Есть потенциально 16 полей, все с общими, несколько бессмысленными числами. Если пользователь выясняет, что смотрел не на то расписание, неплохо просто вернуть его к тому, что загружал сервер.

Сказав все это, моя страница НЕ включает кнопку сброса просто потому, что я не хотел оставлять открытой полную противоположность тому, что она представляет, а именно: «и я просто нажму эту кнопку, чтобы сохранить . о. дерьмо."

Вместо этого я делаю то, что любое поле может быть установлено в 0, но любые недействительные данные (нечисловые, меньше 0, больше 16) вернутся к последнему введенному значению (которое сохраняется через js). Не предлагает большой очистки, но, по крайней мере, снижает количество возможных ошибок ввода данных и предохраняет пользователя от потери данных из-за простой ошибки.

456 содержит отличную статью и ссылка на эту тему, кстати.

В какой ситуации вы могли бы ввести совершенно неверную информацию в 10+ полей, прежде чем это осознали? И затем, сколько времени экономит время, чтобы очистить их перед тем, как начать заново, вместо того, чтобы просто изменять каждое значение ? Он добавляет важный элемент пользовательского интерфейса, который не только совершенно бесполезен, но и опасен для 99,99% ваших пользователей, поэтому оставшиеся 0,01% экономят, возможно, 1 секунду их времени.

Что насчет одного дня, когда вам нужно его использовать?

Я предполагаю, что в настоящее время, возможно, есть некоторые проблемы с браузерами, которые автоматически заполняют формы для вас с нерелевантной информацией, которую люди могут захотеть очистить.

Так; в конце концов . Я считаю, что это скорее традиционное, чем функциональное. Если у вас нет сложного веб-приложения, я не вижу необходимости в этой дополнительной функции.

Чтобы избежать проблемы с удобством использования, связанной с случайным нажатием кнопки сброса, когда они намеревались нажать кнопку отправки, я поставил ее на некотором расстоянии от отправки и сохранил ее в нейтральном тоне, в то время как кнопка отправки имеет акцентированный цвет (вроде как OS X, у нее есть светящийся синюю кнопку, а затем серую.)

Однако мне все равно это не очень нравится. Я изучал какую-то кнопку сброса на каждом поле выбора, которая трансформируется, чтобы они могли просто сбросить эту единицу.

Хороший вопрос! Я обычно добавляю четкую кнопку, когда вспоминаю ее, но не думаю, что она должна быть обязательной. Так что если я его забуду, я просто оставлю его без него.

И я не думаю, что когда-либо использовал кнопку очистки .. xD

И, по-видимому, существует нестандартный атрибут W3C autocomplete , который можно добавить в поля ввода формы и установить в положение "выключено". Однако с этим могут возникнуть проблемы, ознакомьтесь с этот вопрос о переполнении стека.

Просто мысль для людей, которые не могут придумать ни одной причины, чтобы иметь кнопку сброса формы! У нас есть форма поиска в верхней части наших страниц результатов, которая предварительно заполнена критериями поиска из предыдущего поиска. Без кнопки сброса формы пользователь должен либо вернуться на предыдущую страницу, либо вручную очистить все поля формы, чтобы выполнить новый поиск. Зачем предварительно заполнять форму поиска? Таким образом, пользователь может сохранить остальные параметры поиска такими же и, например, изменить местоположение, в котором он ищет.

Если вы используете jQuery в своем проекте, вы можете сделать это с гораздо меньшим количеством кода (и не нужно менять HTML):

Также обратите внимание, что я не очищаю значения скрытых входов, флажков и переключателей.

Поиграйте с этим здесь.

В jquery просто вы можете использовать,

Вам нужно будет очистить их все с помощью javascript (или очистить его на стороне сервера).

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

Это означает, что я должен очищать каждое поле одно за другим. Есть ли самый короткий способ очистить все поля с помощью одной функции / оператора JS, который я могу использовать с любой формой? У меня есть форма с более чем 50 полями.
@Student - вы можете получить все элементы ввода и очистить значения в цикле. Я предлагаю потратить некоторое время на изучение jQuery.
Петля theForm.elements , проверьте, является ли это набором полей, выберите, радиогруппу, флажок или что-то еще, а затем действуйте соответствующим образом.

Если вы используете jQuery, код намного проще:

Вы также можете удалить: hidden из селектора .not, если вы также хотите очистить скрытые поля.

Самый простой способ очистить форму - использовать HTML-тег

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

Я суммировал некоторые предложения, используя jQuery, чтобы дать более полное решение вопроса:

Я также добавил заданное значение в одно текстовое поле. В val('') функция не очистит такое поле, поэтому я также добавил attr('value','') до последней строки скрипта, чтобы очистить такие значения по умолчанию также.

Вы можете сделать что-то подобное в JS и вызвать его из onclick внутри вашей кнопки:

А затем в вашем HTML-файле:

Если вы используете это решение с Firebase, оно на самом деле ничего не отправит в базу данных, если вы не добавите return false сразу после звонка.

Другой способ сделать это с помощью HTMLFormControlsCollection:

Простой способ сделать это с помощью JS:

Используя JavaScript, присвойте форме идентификатор myform:

Это не решит проблему. Если форма загружается с предварительно заполненными значениями, reset просто сбросит форму до этих значений.

Я только что наткнулся на этот вопрос и использовал для облегчения очистки формы путем перезагрузки страницы. Легко стилизовать чтобы элемент отображался как кнопка.

Используя ? для атрибута href перезагрузит страницу с сервера, не отправляя ее.

Я предпочитаю решения, не зависящие от JavaScript, поэтому надеюсь, что это будет кому-то полезно.

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Читайте также: