HTML-атрибуты Disabled и Readonly
Атрибуты disable и readonly — это сокращённые атрибуты, поэтому их можно использовать без значений.
Передача заблокированных <input> и <textarea> на сервер
Для передачи на сервер заблокированных (нередактируемых) значений элементов, созданных с помощью <input> и <textarea> , необходимо использовать атрибут readonly ; однако он не меняет цвет фона элемента по умолчанию на серого оттенка, в отличие от disabled , что может поставить Человека в тупик — почему Он не может редактировать содержимое. В этом случае лучше сделать имитацию заблокированности с помощью CSS, то есть просто определить элементу светло-серый фон.
Этот эффект наблюдается во всех популярных браузерах, кроме Safari, который меняет цвет фона элемента на серого оттенка при применении к нему атрибута readonly .
Пример использования атрибута Disabled
Пример использования атрибута Readonly
Readonly как Disabled
Как видно из примеров выше, применение разных атрибутов определяет различное стилевое оформление соответствующих элементов. Чтобы сделать его одинаковым, можно использовать следующий код CSS:
Для Opera Presto второе правило не работает, поэтому в данном браузере, при получении фокуса текстовой областью ( <textarea> ) с атрибутом readonly , вокруг элемента будет отображаться пунктирная рамка.
HTML Атрибут readonly
Атрибут readonly (от англ. «read only» — «только для чтения») указывает, что поле ввода или текстовое поле предназначено только для чтения.
Когда к элементу добавляется атрибут readonly , поле ввода или текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов. Также содержимое поле можно выделить и скопировать в буфер обмена.
Синтаксис
Значения
Данный атрибут является логическим атрибутом. В HTML данный атрибут может указываться либо без значения, либо с пустым значением, либо со значением «readonly».
Значение по умолчанию
По умолчанию этот атрибут выключен.
Применяется к тегам
Примечание: Атрибут readonly может быть использован с полями данных (тег input ) следующих типов (атрибут type ): «date», «datetime», «email», «month», «number», «password», «search», «tel», «text», «time», «url», «week».
Атрибут HTML:только для чтения
Атрибут Boolean readonly , если он присутствует, делает элемент неизменяемым, то есть пользователь не может редактировать элемент управления.
Если атрибут readonly указан в элементе ввода, поскольку пользователь не может редактировать ввод, элемент не участвует в проверке ограничений.
readonly атрибута поддерживается text , search , url , tel , email , password , date , month , week , time , datetime-local и number <input> типов и <textarea> Элементы управления формой. Если присутствует в любом из этих типов ввода и элементов, псевдокласс :read-only будет соответствовать. Если атрибут не включен, псевдокласс :read-write будет соответствовать.
Атрибут не поддерживается или не имеет отношения к <select> или типам ввода, которые уже не изменяются, например флажку и радио, или не могут по определению начинаться со значения, такого как тип ввода файла . диапазон и цвет , так как оба имеют значения по умолчанию. Он также не поддерживается для скрытых, так как нельзя ожидать, что пользователь заполнит скрытую форму. Он также не поддерживается ни одним из типов кнопок, включая image .
Примечание. Только текстовые элементы управления можно сделать доступными только для чтения, поскольку для других элементов управления (например, флажков и кнопок) нет полезного различия между режимом только для чтения и отключением, поэтому атрибут readonly не применяется.
Когда вход имеет атрибут readonly , псевдокласс :read-only также применяется к нему. И наоборот, входные данные, которые поддерживают атрибут readonly , но не имеют набора атрибутов, соответствуют псевдоклассу :read-write .
Attribute interactions
Разница между disabled и readonly является то , что только для чтения управления может функционировать и по — прежнему фокусируемые, в то время как контроль инвалидов не может получить фокус и не представлены с формой и , как правило , не функционирует как элементы управления , пока они не будут включены.
Поскольку значение поля только для чтения не может быть изменено взаимодействием с пользователем, required не оказывает никакого влияния на входные данные с также readonly атрибутом только для чтения.
Единственный способ динамического изменения значения атрибута readonly-это сценарий.
Примечание: required атрибут не допускается на входах с readonly атрибута , указанного.
Usability
Браузеры отображают атрибут только для readonly
Constraint validation
Если элемент доступен только для чтения,то значение элемента не может быть обновлено пользователем и не участвует в проверке ограничений.
HTML attribute: readonly
The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.
Try it
Overview
If the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.
The readonly attribute is supported by text , search , url , tel , email , password , date , month , week , time , datetime-local , and number <input> types and the <textarea> form control elements. If present on any of these input types and elements, the :read-only pseudo class will match. If the attribute is not included, the :read-write pseudo class will match.
The attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image .
Note: Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
When an input has the readonly attribute, the :read-only pseudo-class also applies to it. Conversely, inputs that support the readonly attribute but don’t have the attribute set match the :read-write pseudo-class.
Attribute interactions
The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.
Because a read-only field cannot have its value changed by a user interaction, required does not have any effect on inputs with the readonly attribute also specified.
The only way to modify dynamically the value of the readonly attribute is through a script.
Note: The required attribute is not permitted on inputs with the readonly attribute specified.
Usability
Browsers display the readonly attribute.
Constraint validation
If the element is read-only, then the element’s value can not be updated by the user, and does not participate in constraint validation.