Тонкости свойства disable у кнопок формы, отправляемой на сервер (Как делать кнопки неактивными)
Уже неоднократно на хабре (вот в этой публикации и в этой) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = «disabled» .
Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет — на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.
Зачем нужно делать кнопки неактивными
- Чтобы пользователю стало очевидным, что он уже нажал на кнопку, и что форма отправляется
- Чтобы сервер не загружался лишними запросами, и чтобы уменьшить вероятность какой-либо ошибки
Понятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь class=»form_is_loading» , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?
Как делать кнопки неактивными
Этот предложенный в вышеупомянутых топиках простой вариант оказывается недостаточным и неработоспособным.
Атрибут disabled
Атрибут disabled блокирует элемент HTML формы, то есть делает его неактивным. Является атрибутом без значения.
Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью JavaSctipt.
Поведение
В случае кнопки ( button или input с атрибутом type в значениях button , reset или submit ) блокировка означает, что на кнопку нельзя будет нажать. В случае с текстовым полем ввода ( input или textarea ) в нем нельзя будет поменять или скопировать текст. В случае с чекбоксами и радио их состояние (отмечено или нет) нельзя будет сменить. В случае с выпадающими списками select нельзя будет сменить выбранный пункт списка.
Заблокированный элемент по умолчанию имеет серый фон. Он также не будет участвовать в переходах клавишей Tab.
Пример . Заблокированная кнопка
Давайте заблокируем кнопку с помощью атрибута disabled . Для сравнения рядом пример незаблокированной кнопки (попробуем на нее нажать):
Пример . Заблокированный чекбокс
А теперь давайте посмотрим на заблокированный флажок чекбокса. Для сравнения рядом смотрим пример не заблокированного флажка:
Пример . Заблокированный и отмеченный чекбокс
Давайте посмотрим, как выглядит заблокированный и отмеченный с помощью атрибута checked флажок чекбокс. Для сравнения рядом обратимся к примеру не заблокированного отмеченного флажка:
Пример . Заблокированный текстовый инпут
А теперь давайте заблокируем инпут. Для сравнения рядом посмотрим пример не заблокированного инпута:
Пример . Заблокированный текстареа
А здесь мы увидим заблокированный текстареа (обратите внимание на то, что размер заблокированного textarea можно менять). Для сравнения рядом обратимся к примеру не заблокированного текстареа:
Пример . Заблокированный выпадающий список
Давайте посмотрим как работает заблокированный select . Для сравнения рядом посмотрим пример не заблокированного выпадающего списка:
HTML-атрибуты Disabled и Readonly
Атрибуты disable и readonly — это сокращённые атрибуты, поэтому их можно использовать без значений.
Передача заблокированных <input> и <textarea> на сервер
Для передачи на сервер заблокированных (нередактируемых) значений элементов, созданных с помощью <input> и <textarea> , необходимо использовать атрибут readonly ; однако он не меняет цвет фона элемента по умолчанию на серого оттенка, в отличие от disabled , что может поставить Человека в тупик — почему Он не может редактировать содержимое. В этом случае лучше сделать имитацию заблокированности с помощью CSS, то есть просто определить элементу светло-серый фон.
Этот эффект наблюдается во всех популярных браузерах, кроме Safari, который меняет цвет фона элемента на серого оттенка при применении к нему атрибута readonly .
Пример использования атрибута Disabled
Пример использования атрибута Readonly
Readonly как Disabled
Как видно из примеров выше, применение разных атрибутов определяет различное стилевое оформление соответствующих элементов. Чтобы сделать его одинаковым, можно использовать следующий код CSS:
Для Opera Presto второе правило не работает, поэтому в данном браузере, при получении фокуса текстовой областью ( <textarea> ) с атрибутом readonly , вокруг элемента будет отображаться пунктирная рамка.