Тег BUTTON, атрибут disabled

Html сделать неактивной кнопку

Тег чтобы добавить на страницу кнопку.

Время чтения: меньше 5 мин

Обновлено 13 сентября 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

создаёт кликабельную кнопку.

Пример

Скопировать ссылку «Пример» Скопировано

 Нажми меня button name="button">Нажми меняbutton>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

На кнопку можно поместить любой HTML-элемент.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

   .   form> button>. button> form>    Скопировать Скопировано Не удалось скопировать   

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

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

• autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
• disabled — делает кнопку неактивной: нажать на неё нельзя, по дефолту отображается серым цветом.
• form — связывает кнопку с любой формой в документе через ID. Если ID не указан, то с предшествующей формой.
• formaction — задаёт URL-адрес, на который отправляются данные после нажатия на кнопку.
• formenctype — определяет формат файла, который пользователь может отправить при нажатии на кнопку. У него есть три значения:
  • application / x — www — form — urlencoded : стандартное значение, вместо пробелов ставится +, а символы, вроде русских букв, кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя 🤡);
  • multipart / form — data — используется, чтобы отправлять файлы, данные при этом не кодируются;
  • text / plain — буквы и другие символы не кодируются, вместо пробелов появляется +.
  • post — упаковывает данные формы в тело сообщения и передаёт их на сервер, объём данных зависит от настроек сервера;
  • get — добавляет данные из формы прямо в URL-адрес после знака «?», например https : / / site . ru / doc / ? name = Ivan&age = 27 здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 4 Кб. Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.
  • _self : показывает данные в текущем окне. Это значение используется по умолчанию.
  • _blank : показывает данные в новом окне браузера — его используют чаще всего.
  • _parent : показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
  • _top : отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.
  • submit : отправляет данные на сервер. Это также значение по умолчанию.
  • reset : удаляет введённые данные из формы.
  • button : просто кнопка. Действие для неё можно задать через скрипты.

  Подсказки

  Скопировать ссылку «Подсказки» Скопировано

  💡 Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то либо должен быть внутри контейнера , либо связан с формой при помощи атрибутов id и form :

      Введите ваш email Отправить form id="login"> label> Введите ваш email input type="email" placeholder="Ваш email"> label> form> button type="submit" form="login">Отправитьbutton>    Скопировать Скопировано Не удалось скопировать   

  💡 Тег с атрибутом type = «button | reset | submit» тоже создаёт кнопку, но проще стилизовать, так как внутрь можно добавить любой HTML-контент, например, , или .

  💡 Если создаёте кнопку, которая не отправляет ничего на сервер, убедитесь, что задан атрибут type , иначе может вылезти ошибка.

  На практике

  Скопировать ссылку «На практике» Скопировано

  Дока Дог советует

  Скопировать ссылку «Дока Дог советует» Скопировано

  🛠 Но есть и другое мнение. Я вот использую крайне редко. Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю , потому что проще верстать 🤷‍♂️

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

  Алёна Батицкая советует

  Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

  В первую очередь вы должны понять, за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице (например, отправляет данные формы).

  🛠 Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег , ссылку.

  Если мы никуда пользователя не отправляем, а, например, открываем диалоговое окно или листаем слайдер, то это кнопки.

  Вадим Макеев в своём докладе «Жми сюда!» сформулировал следующий способ выбора между кнопкой и ссылкой:

  • В любой ситуации, где вам нужно выбирать, кнопка это или ссылка, выберите кнопку ( ).
  • Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка ( ).
  • Всегда начинайте с кнопки.

  На собеседовании

  Скопировать ссылку «На собеседовании» Скопировано

  Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

  Скопировать ссылку «Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?» Скопировано

  Скопировать ссылку «Александр Ламков отвечает» Скопировано

  Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter , а для кнопок — пробелом или Enter . Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой.

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

  С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link , у кнопок — button . Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.

  Источник

  Атрибут disabled

  Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передается на сервер.

  Синтаксис

  Значения

  Значение по умолчанию

  По умолчанию это значение выключено.

         
  Активная кнопка Неактивная кнопка
   
    

  Результат данного примера продемонстрирован на рис. 1.

  

  Рис. 1. Вид активной и неактивной кнопки

  Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

  Типы тегов

  

  HTML5

  

  Блочные элементы

  

  Строчные элементы

  

  Универсальные элементы

  

  Нестандартные теги

  

  Осуждаемые теги

  

  Видео

  

  Документ

  

  Звук

  

  Изображения

  

  Объекты

  

  Скрипты

  

  Списки

  

  Ссылки

  

  Таблицы

  

  Текст

  

  Форматирование

  

  Формы

  

  Фреймы

  Источник

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

  Уже неоднократно на хабре (вот в этой публикации и в этой) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = «disabled» .

  Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет — на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.

  Зачем нужно делать кнопки неактивными

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

  Понятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь class=»form_is_loading» , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?

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

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

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

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

  Источник

  Читайте также:  Http forum tortugasocial ru index php