HTML-атрибуты Disabled и Readonly
- Передача заблокированных <input> и <textarea> на сервер
- Пример использования атрибута Disabled
- Пример использования атрибута Readonly
- Readonly как Disabled
Сравнительные характеристики
disabled |
readonly1 |
|
|---|---|---|
| Применяется к элементам | <button>
<fieldset>
<input>
<keygen>
<menuitem>
<optgroup>
<option>
<select>
<textarea> |
<input>
<textarea> |
| Редактирование значений элемента | Запрещено | Запрещено |
| Передача значений элемента на сервер | Не передаются | Передаются |
| Доступ к элементу с помощью скриптов | Недоступен | Доступен |
| Получение элементом фокуса | Не получает | Получает |
| Цвет фона элемента | Серого оттенка | По умолчанию |
- Кроме чекбоксов:
<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, вокруг элемента будет отображаться пунктирная рамка.