Disabled, hidden, readonly в HTML

Три атрибута HTML disabled, hidden и readOnly часто путают. Все они влияют на видимость элемента на странице и его наличие при отправке формы на сервер. Все эти атрибуты делают значение элемента недоступным для редактирования пользователем.

Предположим, что у нас есть некий input в форме.

<form>

<!-- ................. -->

    <input type = "text" id="input_id" name="input_name">

</form>

Чтобы установить атрибут readOnly или disabled из JavaScript, поступаем так:

var el = document.getElementById("input_id");

el.readonly = true;

Чтобы установить тип элемента hidden, делаем так:

var el = document.getElementById("input_id");

el.setAttribute("type", "hidden");

Вот как влияют все эти свойства-атрибуты на поведение элемента: