Тонкости свойства disable у кнопок формы, отправляемой на сервер (как делать кнопки неактивными)

Примеры

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


Primary

Secondary

Success

Info

Warning

Danger

Link

Передать смысл для ассистивных технологий

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

Неактивное состояние

Сделайте кнопки которые выглядят не активно, добавив логический атрибут к любому элементу.

Внимание! IE9 и ниже отрисовка кнопок отключен с серым, тени текста, который мы не можем обойти. Primary button Button

Primary button Button

Кнопки отключить с помощью элемент вести себя немного по-другому:

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

Ссылка функционального пояснения

класса попробовать отключить функциональность ссылке из , но что CSS собственность еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают , навигация с помощью клавиатуры остается в силе, это означает, что зрячие пользователи клавиатуры и пользователи технологий будут по-прежнему сможете активировать эти ссылки. Так, чтобы быть безопасным, добавить атрибут по этим ссылкам, (чтобы предотвратить их от получать фокус клавиатуры) и использовать настраиваемые JavaScript отключить их функциональность.

Как делать кнопки неактивными

<input type="submit" onclick="this.disabled=true;">

Почему недостаточно просто делать нажатую кнопку неактивной:

  1. Submit формы может произойти и по нажатию на Enter. Поэтому обработку кнопок надо вешать на событие onsubmit самой формы. К тому же, у формы может быть несколько кнопок, и было бы логичным делать их все неактивными, а не только ту кнопку, которую нажали.
  2. Если после сабмита формы вновь вернуться на страницу с формой (по кнопке «Назад» в браузере), то сработает кеширование: мы столкнемся с неактивными кнопками и не сможем отправить форму еще раз — без принудительной перезагрузки страницы с потерей всех заполненных ранее полей (Возврат к поисковой форме со страницы результатов поиска тут живейший пример).
  3. Если у формы несколько кнопок (например, «Опубликовать» и «Отмена»), то мы не сможем передать серверу, какая именно кнопка была нажата: неактивная кнопка не передает свое имя и значение — даже если мы делаем ее неактивной по событию onsubmit

Итак, сценарий создания неактивных кнопок

  1. Кнопки делаем неактивными по событию onsubmit формы
  2. Кнопки возвращаем в активное состояние до ухода со страницы по событию window.onunload
  3. Каждая кнопка формы по событию onclick должна создавать одноименное hidden поле, через которое передаст свое значение серверу
//// html файл //////////////////////////////////////////////////////////////////////

<form id="the_form">
    <input type="submit" name="send" value="Опубликовать">
    <input type="submit" name="cancel" value="Отменить">
</form>

<script>
    formUploader.prepareForm(document.getElementById('the_form'));
</script>

//// js файл ////////////////////////////////////////////////////////////////////////

<script>
formUploader = {

    prepareForm: function(form){

        // Каждая значимая кнопка формы при клике должна создать одноименное hidden поле,
        // чтобы на сервер передалась информация о том, какая кнопка была кликнута
        var allFormFields = form.getElementsByTagName('input');
        for (var i=0; i<allFormFields.length; i++){
            if(allFormFields.type == 'submit' && allFormFields.name){
                allFormFields.onclick = function(){
                    formUploader.createHiddenField(this);
                }
            }
        }

        // Визуализируем форму как отправляемую на сервер на событии onsubmit
        // (в т.ч. делаем все кнопки неактивными)
        form.onsubmit = function(){
            formUploader.setFormLoading(form);
        }

        // Очищаем визуализацию формы (в т.ч. делаем все кнопки вновь активными)
        // при уходе со страницы - по глобальному событию onunload
        window.onunload = function(){
            formUploader.clearFormLoading(form)
        }
    },

    setFormLoading: function(form){
        // Создаем визуализацию загрузки формы и делаем все кнопки неактивными
        // disabled=true;
    },
	
    clearFormLoading: function(form){
        // Очищаем форму от визуализации загрузки и возвращаем кнопки в активное состояние
        // disabled=false;
    },

    createHiddenField: function(button){
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = button.name;
        input.value = button.value;
        button.parentNode.insertBefore(input, button);
    }
}
</script>

Плагин кнопки

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

Тумблер состояния

Добавить для включения кнопки состояние. Если вы заранее переключить кнопку, Вы должны вручную добавить класс и на .

Single toggle

Флажки и радиокнопки


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

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

Обратите внимание, что предварительно проверил кнопки необходимо вручную добавить класс к входа. Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

Radio 1 (preselected) Radio 2 Radio 3

Атрибуты тега button

Атрибут Значения Описание
autofocus не указывается / autofocus

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку.

disabled не указывается / disabled

Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать).

form id формы

Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы.

Если кнопка находится внутри тега <form>, то использовать атрибут form не нужно, кнопка по умолчанию привязана к форме, внутри которой находится.

formaction URL

URL адрес документа — обработчика формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега <form>.

formenctype

application/x-www-form-urlencoded


multipart/form-data

text/plain

Способ кодирования информации. Используется для кнопок с типом submit.

Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.

  • application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию;
  • multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме);
  • text/plain — символы не кодируются, пробелы заменяются символом «+».

Атрибут используется только в случае отправки формы методом POST.

Этот атрибут переопределяет значение, указанное в атрибуте enctype тега <form>.

formmethod

GETPOST

HTTP метод передачи данных формы.

  • GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
  • POST — передача данных в теле HTTP запроса.

Используется только для кнопок с типом submit.

Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>.

formnovalidate не указывается / formnovalidate

Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>.

formtarget _blank_paren_self_topимя фрейма

Используется для кнопок с типом submit.

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

  • _blank — в новой вкладке или окне;
  • _parent — в родительском окне;
  • _self — в текущем окне (используется по умолчанию);
  • _top — на весь экран.

Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>.

name текст

Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.

type

buttonresetsubmit

Тип кнопки.

  • button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом;
  • reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы;
  • submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер.

Значение этого атрибута по умолчанию может отличаться в разных браузерах. Для кроссбраузерности вашего кода всегда указывайте этот атрибут.

value текст

Значение кнопки, которое будет отправлено на сервер.

На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте.

К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы.


С этим читают