Яка різниця між відключеними = "вимкнено" та "лише для читання" для полів введення 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"