Урок: сравнить disabled и readonly в FormData

Назначение

Оба состояния могут мешать редактированию поля, но по-разному влияют на набор отправляемых значений. Урок показывает это различие на самостоятельной форме в памяти без сетевой отправки.

Как это работает

Форма содержит два текстовых поля с name. Одно получает disabled, второе readonly. FormData собирается после установки состояния; далее вы проверяете именно наличие ключей, а не внешний вид.

Пример

const form = document.createElement("form");
form.innerHTML = '<input name="locked" value="A" disabled><input name="fixed" value="B" readonly>';
const data = new FormData(form);
console.log(data.has("locked"));
console.log(data.get("fixed"));
console.log([...data.entries()]);

Что должно получиться

Disabled-поле не включено, а значение readonly-поля присутствует как B. Используется фиксированная учебная разметка; пользовательские строки в innerHTML не вставляются.

Граница применения и частая ошибка

Readonly поддерживается не каждым типом элемента управления: для select такое решение не подходит. Ни readonly, ни disabled не являются серверной защитой значения. Если цена или роль пришли от клиента, сервер обязан определить доверенное значение самостоятельно.

Самостоятельная проверка

Поменяйте состояния местами и создайте новый FormData. Затем уберите name у доступного поля и сравните список. Объясните, почему скрытый input тоже не делает значение доверенным, хотя обычно включается в отправку.

Связанные материалы

• Локальный просмотр
• Регрессионная проверка
• Панель Network