Какая разница между disabled = "disabled" и readonly = "readonly" для полей ввода формы HTML?

Ответ 1

readonly для form readonly элемент просто не редактируется, но отправляется, когда по form представляет. disabled элемент не редактируется и не отправляется при отправке. Другое отличие состоит в том, что элементы, доступные только для readonly могут быть сфокусированы (и фокусироваться при "вкладке" в форме), а disabled элементы - нет.

Подробнее об этом читайте в этой замечательной статье или в определении от w3c. Чтобы процитировать важную часть:

Ключевые отличия

Атрибут Disabled

• Значения для отключенных элементов формы не передаются в процессорный метод. W3C называет это успешным элементом (это работает аналогично флажкам формы, которые не отмечены).
• Некоторые браузеры могут переопределять или предоставлять стиль по умолчанию для отключенных элементов формы. (Затенение или тиснение текста) Internet Explorer 5.5 особенно противен этому.
• Отключенные элементы формы не получают фокус.
• Отключенные элементы формы пропускаются при навигации по вкладкам.

Атрибут Только для чтения

• Не все элементы формы имеют атрибут readonly. Наиболее примечательно, что элементы <SELECT>, <OPTION> и <BUTTON> не имеют атрибутов только для чтения (хотя они оба имеют отключенные атрибуты)
• Браузеры не предоставляют переопределенной визуальной обратной связи по умолчанию о том, что элемент формы доступен только для чтения. (Это может быть проблемой... см. Ниже.)
• Элементы формы с установленным атрибутом readonly будут переданы в процессор форм.
• Элементы только для чтения могут получить фокус
• Элементы навигации только для чтения включены в навигацию с вкладками.

Ответ 2

Никакие события не срабатывают, когда элемент имеет отключенный атрибут.

Ни одно из ниже не будет вызвано.

$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

В то время как readonly будет запущен.

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

Ответ 3

Отключено означает, что никакие данные из этого элемента формы не будут отправлены при отправке формы. Только для чтения означает, что любые данные из элемента будут отправлены, но пользователь не может изменить его.

Например:

<input type="text" name="yourname" value="Bob" readonly="readonly" />

Это приведет к значению "Боб" для элемента "Ваше имя".

<input type="text" name="yourname" value="Bob" disabled="disabled" />

Это ничего не даст для элемента "Ваше имя".

Ответ 4

Элементы с атрибутом Disabled не будут отправлены или могут сказать, что их значения не будут отправляться с запросом.

то есть.

<input type="textbox" name="field" value="field" disabled="disabled" />

Разница

• Отключенные элементы управления не получают фокус.
• Отключенные элементы управления пропускаются в навигации по табуляции.
• Отключенные элементы управления не могут быть успешно отправлены.

Используйте атрибут readonly, если вы хотите опубликовать свои данные поля.

то есть.

<input type="textbox" name="field" value="field" readonly="readonly" />

• Элементы только для чтения получают фокус, но не могут быть изменены пользователем.
• Элементы только для чтения включены в навигацию по табуляции.
• Элементы, доступные только для чтения, успешно отправлены.

Ответ 5

То же, что и другие ответы (отключенный не отправляется на сервер, только для чтения), но некоторые браузеры предотвращают выделение отключенной формы, а доступность только для чтения все еще может быть подсвечена (и скопирована).

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

Поле только для чтения не может быть изменено. Однако пользователь может выполнить вкладку, выделить его и скопировать текст из него.