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

Элемент readonly просто не редактируется, но отправляется при отправке соответствующего form. Элемент disabled не редактируется и не отправляется при отправке. Другое отличие состоит в том, что readonly элементам можно сфокусироваться (и сфокусироваться при «переходе» по форме), а disabled элементам - нет.

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

Ключевые различия

Атрибут Disabled

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

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

• Не все элементы формы имеют атрибут только для чтения. Наиболее примечательно то, что элементы <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» для элемента «yourname».

<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"