В чем разница между disabled = «disabled» и readonly = «readonly» для полей ввода формы HTML?

Я немного читал об этом, но я не могу найти что-то твердое о том, как разные браузеры относятся к вещам.

readonlyЭлемент просто не редактируется, но отправляется , когда по formПРЕДСТАВЛЯЕТ. disabledЭлемент не редактируется и не отправляется на кнопку. Другое отличие состоит в том, что readonlyэлементы могут быть сфокусированы (и становятся сфокусированными при «табулировании» формы), а disabledэлементы - нет.

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

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

Атрибут Disabled

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

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

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

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

Ничто из нижеприведенного не будет запущено.

$("[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]").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

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

Например:

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

Это передаст значение «Bob» для элемента «ваше имя».

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

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

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

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

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

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

Если значение очищенного текстового поля необходимо сохранить при очистке формы (сброс), disabled = "disabled" его следует использовать, поскольку текстовое поле только для чтения не будет сохранять значение

Например:

HTML

Текстовое окно

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

Кнопка сброса

<button type="reset" id="clearButton">Clear</button>

В приведенном выше примере, когда нажата кнопка «Очистить», отключенное текстовое значение будет сохранено в форме. Значение не будет сохранено в случаеinput type = "text" readonly="readonly"