Войти
Регистрация

Атрибут readonly и disabled для input

Атрибут readonly и disabled для input

Меня не раз спрашивали о разнице между атрибутом readonly и disabled для тега <input>

Внешне они выполняют одинаковую функцию - закрывают доступ к редактированию поля формы, за одной лишь разницей - атрибут disabled не только блокирует поле, но и устанавливает серый фон для него.

Что же касается логики этих атрибутов, то они совершенно разные по значению.

Атрибут readonly закрывает доступ пользователя к его изменению, но мы можем менять значение атрибута value у этого поля с помощью JavaScript, например. Также при отправке формы сервер обработает запрос и мы получим значение это поля, если оно там имелось.

Атрибут disabled полностью блокирует доступ к полю как внешне для пользователя, так и для скриптов, а также при отправке формы данные, содержащиеся в этом поле, не будут получены.

Для примера напишем оба варианта:

<form action="" method="GET" />
  <input type="text" name="input1" value="атрибут readonly" readonly />
  <input type="text" name="input2" value="атрибут disabled" disabled />
  <input type="submit" value="Отправить" />
</form>

В каждом поле в атрибуте value мы указали некоторые значения и у формы метод отправки назначили GET, что бы в адресной строке браузера проверить какие данные отправились у нас.

В результате Вы увидите, что оба поля закрыты для редактирования, поле с атрибутом disabled еще и затемнилось.

Нажмите Отправить и Вы увидите, что в строке браузера отобразилось только значение поля с атрибутом readonly.

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

Когда можно использовать атрибут disabled?

В своей практике этот атрибут я использую совместно с JavaScript, когда при заполнении формы дается 2 поля на выбор для заполнения, но заполнить и отправить нужно только одно.

Когда пользователь пишет что-то в первом поле, то второе блокируется, приобретая атрибут disabled. И наоборот. Если же пользователь стирает внесенные данные, то поле разблокируется, т.е. с помощью скрипта атрибут disabled удаляется.

Эти атрибуты можно использовать и для других элементов формы.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?