HTML-атрибуты Disabled и Readonly

Сравнительные характеристики

disabled readonly1
Применяется к элементам <button> <fieldset> <input> <keygen> <menuitem> <optgroup> <option> <select> <textarea> <input> <textarea>
Редактирование значений элемента Запрещено Запрещено
Передача значений элемента на сервер Не передаются Передаются
Доступ к элементу с помощью скриптов Недоступен Доступен
Получение элементом фокуса Не получает Получает
Цвет фона элемента Серого оттенка По умолчанию
  1. Кроме чекбоксов: <input type="checkbox">.

Атрибуты disable и readonly — это сокращённые атрибуты, поэтому их можно использовать без значений.

Передача заблокированных <input> и <textarea> на сервер

Для передачи на сервер заблокированных (нередактируемых) значений элементов, созданных с помощью <input> и <textarea>, необходимо использовать атрибут readonly; однако он не меняет цвет фона элемента по умолчанию на серого оттенка, в отличие от disabled, что может поставить Человека в тупик — почему Он не может редактировать содержимое. В этом случае лучше сделать имитацию заблокированности с помощью CSS, то есть просто определить элементу светло-серый фон.

Этот эффект наблюдается во всех популярных браузерах, кроме Safari, который меняет цвет фона элемента на серого оттенка при применении к нему атрибута readonly.

Пример использования атрибута Disabled

Пример использования атрибута Readonly

Readonly как Disabled

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

[readonly] {
	background-color: #f5f5f5;
}

textarea[readonly]:focus { /* WebKit: Google Chrome, Opera Next, Safari, etc. */
	outline: 0;
}

Для Opera Presto второе правило не работает, поэтому в данном браузере, при получении фокуса текстовой областью (<textarea>) с атрибутом readonly, вокруг элемента будет отображаться пунктирная рамка.