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

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

 Параметр  hidden  disabled  readOnly
 Видимость на странице  невидим  видим, затемнён  видим
 Передаётся на сервер при отправке формы  да  нет  да
 Пользователь может редактировать значение input  нет  нет  нет

 

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.