Html кнопка очистить всю форму. Очистки поля формы с помощью кнопки
Html кнопка очистить всю форму. Очистки поля формы с помощью кнопки
Кнопки являются одним из популярных элементов интерфейса и часто применяются внутри форм, например, для отправки введённой информации в форме на сервер.
Кнопки на веб-странице можно создать несколькими способами - с помощью элемента
или элемента
Рассмотрим вначале добавление кнопки через
и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
Кнопка
Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.
Второй способ создания кнопки основан на использовании элемента
Рис. 2. Кнопки, созданные с помощью
Синтаксис создания такой кнопки следующий.
Надпись на кнопке
Атрибуты перечислены в табл. 1, но в отличие от кнопки
атрибут value
определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то
добавляется внутрь
, как показано в примере 2.
Пример 2. Рисунок на кнопке
Кнопка
В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого
, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования
, ширину кнопки изменить не удастся.
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action
элемента
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются к первоначальным значениям. Как правило, эту кнопку применяют для очистки введённой в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на неё не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
Надпись на кнопке
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value
элемента
. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить - это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами - с помощью тега
и тега
.
Рассмотрим вначале добавление кнопки через
и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега
. Он по своему действию напоминает результат, получаемый с помощью тега
. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью
.
Рис. 2. Кнопки, созданные с помощью
Синтаксис создания такой кнопки следующий.
Надпись на кнопке
Атрибуты перечислены в табл. 1, но в отличие от кнопки
атрибут value
определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег
добавляется внутрь
, как показано в примере 2.
Пример 2. Рисунок на кнопке
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
В данном примере показано создание обычной кнопки с текстом, при этом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера
, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования
, ширину кнопки изменить не удастся.
Кнопка Submit
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action
тега
Атрибут name
для этого типа кнопки можно не писать. Если не указать значение value
, то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
Надпись на кнопке
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value
тега
. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».
Пример 4. Кнопка для очистки формы
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value
, на кнопке по умолчанию будет добавлен текст «Очистить».
Очистить значение поля ввода, либо любого другого DOM элемента имеющего свойство value , можно просто добавив обработчик к элементу. Недостатком этого подхода, является необходимость добавления обработчика к каждому элементу и помимо этого, элемент должен существовать на момент добавления обработчика:
Document.getElementById("clearButton").onclick = function(e) {
// Если необходимо предотвратить/отменить событие по умолчанию,
// то необходимо вызвать метод preventDefault у события
// https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
// e.preventDefault();
// если необходимо также предотвратить дальнейшее "всплытие" события,
// то необходимо вызвать метод stopPropagation у события
// https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation
// e.stopPropagation();
document.getElementById("textInput").value = "";
}
Clear
Прямое добавление обработчика по селектору
Вместо использования id элемента, можно выбирать элементы по произвольному селектору, например по классу. Таким образом можно добавить обработчик сразу большому количеству элементов, а для передачи дополнительных параметров, можно воспользоваться data-атрибутами :
// Вместо класса можно использовать data-атрибуты: ""
document.querySelectorAll(".clear-button")
.forEach(function (elem) {
elem.onclick = function (e) {
// Если необходимо предотвратить/отменить событие по умолчанию,
// то необходимо вызвать метод preventDefault у события
// https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
// e.preventDefault();
// если необходимо также предотвратить дальнейшее "всплытие" события,
// то необходимо вызвать метод stopPropagation у события
// https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation
// e.stopPropagation();
let selector = this.dataset.clearSelector;
document.querySelectorAll(selector)
.forEach(function (item) {
item.value = "";
});
};
});
* {
font-family: monospace;
}
button {
width: 225px;
}
Class: , type: date
Clear "input.alpha-input"
Clear all inputs
Фильтрация событий контейнера/документа
Для работы примеров, указанных выше, необходимо наличие элементов, к которым добавляется событие. Другими словами, если элемент добавляется динамически, т.е. не существует в момент добавления обработчиков, то такой код работать не будет. Я не претендую на истину в последней инстанции, но решаю эту проблему путём добавления обработчика события на контейнер или, в крайнем случае, на документ. Таким образом можно фильтровать элементы и на основе условий, таких как имя класса, наличие определённого атрибута, либо каких-либо других, выполнять определённые действия. При таком подходе Вы можете динамически добавлять новые элементы в контейнер или документ и не беспокоиться о добавлении тривиальных обработчиков событий. Помимо этого, все обработчики будут у Вас перед глазами в разметке элемента. Нужно лишь побеспокоиться об именах классов и атрибутов:
Document.onclick = function(docEvent){
let elem = docEvent.target;
let isCleaner = elem.classList.contains("input-cleaner");
if(isCleaner) {
// Если необходимо предотвратить/отменить событие по умолчанию,
// то необходимо вызвать метод preventDefault у события
// https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
// docEvent.preventDefault();
// если необходимо также предотвратить дальнейшее "всплытие" события,
// то необходимо вызвать метод stopPropagation у события
// https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation
// docEvent.stopPropagation();
let selector = elem.dataset.cleanerSelector;
document.querySelectorAll(selector)
.forEach(function (item) {
item.value = "";
});
}
};
* {
font-family: monospace;
}
button {
width: 225px;
}