Атрибут disabled
Атрибут disabled блокирует элемент HTML формы, то есть делает его неактивным. Является атрибутом без значения.
Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью JavaSctipt.
Поведение
В случае кнопки ( button или input с атрибутом type в значениях button , reset или submit ) блокировка означает, что на кнопку нельзя будет нажать. В случае с текстовым полем ввода ( input или textarea ) в нем нельзя будет поменять или скопировать текст. В случае с чекбоксами и радио их состояние (отмечено или нет) нельзя будет сменить. В случае с выпадающими списками select нельзя будет сменить выбранный пункт списка.
Заблокированный элемент по умолчанию имеет серый фон. Он также не будет участвовать в переходах клавишей Tab.
Пример . Заблокированная кнопка
Давайте заблокируем кнопку с помощью атрибута disabled . Для сравнения рядом пример незаблокированной кнопки (попробуем на нее нажать):
Пример . Заблокированный чекбокс
А теперь давайте посмотрим на заблокированный флажок чекбокса. Для сравнения рядом смотрим пример не заблокированного флажка:
Пример . Заблокированный и отмеченный чекбокс
Давайте посмотрим, как выглядит заблокированный и отмеченный с помощью атрибута checked флажок чекбокс. Для сравнения рядом обратимся к примеру не заблокированного отмеченного флажка:
Пример . Заблокированный текстовый инпут
А теперь давайте заблокируем инпут. Для сравнения рядом посмотрим пример не заблокированного инпута:
Пример . Заблокированный текстареа
А здесь мы увидим заблокированный текстареа (обратите внимание на то, что размер заблокированного textarea можно менять). Для сравнения рядом обратимся к примеру не заблокированного текстареа:
Пример . Заблокированный выпадающий список
Давайте посмотрим как работает заблокированный select . Для сравнения рядом посмотрим пример не заблокированного выпадающего списка:
How to disable an input type=text?
I want to disable writing in an input field of type text using JavaScript, if possible. The input field is populated from a database; that is why I don’t want the user to modify its value.
7 Answers 7
Note that readOnly should be in camelCase to work correctly in Firefox (magic).
Demo: https://jsfiddle.net/L96svw3c/ — somewhat explains the difference between disabled and readOnly .
If you know this when the page is rendered, which it sounds like you do because the database has a value, it’s better to disable it when rendered instead of JavaScript. To do that, just add the readonly attribute (or disabled , if you want to remove it from the form submission as well) to the <input> , like this:
If the data is populated from the database, you might consider not using an <input> tag to display it. Nevertheless, you can disable it right in the tag:
If you need to disable it with Javascript later, you can set the «disabled» attribute:
The reason I suggest not showing the value as an <input> is that, in my experience, it causes layout issues. If the text is long, then in an <input> the user will need to try and scroll the text, which is not something normal people would guess to do. If you just drop it into a <span> or something, you have more styling flexibility.
HTML Атрибут disabled
Атрибут disabled (от англ. «disabled» ‒ «неработающий, отключённый») блокирует элемент формы, то есть делает его неактивным.
Заблокированный элемент по умолчанию имеет серый фон. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab , мышью или другим способом. Заблокированное в поле значение не передаётся на сервер.
В случае кнопки ( <button> или <input> с атрибутом type в значениях button , reset или submit ) блокировка означает, что на кнопку нельзя будет нажать.
В случае с текстовым полем ввода ( <input> или <textarea> ) в нем нельзя будет поменять или скопировать текст.
В случае с чекбоксами и радио кнопками их состояние (отмечено или нет) нельзя будет сменить.
В случае с выпадающими списками <select> нельзя будет сменить выбранный пункт списка.
Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью скриптов (например JavaSctipt).
Для визуального отличия заблокированных элементов формы от активных, большинство современных браузеров не существенно изменяют внешний вид заблокированных элементов. Тем не менее, с помощью CSS, используя псевдоклассы disabled и enabled, можно установить свои стили заблокированным и незаблокированным элементам.
Синтаксис
Значения
Данный атрибут является логическим атрибутом. В HTML данный атрибут может указываться либо без значения, либо с пустым значением, либо со значением disabled .