Блокировка/разблокировка полей формы: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь блокировать и разблокировать поля формы с помощью JavaScript. Вы будете изменять атрибуты HTML элементов, таких как `disabled`, а также управлять интерактивностью элементов формы, основываясь на различных условиях и событиях. Задания охватывают различные сценарии, от простой блокировки одного поля до сложных взаимодействий между несколькими элементами. Внимательно читайте условия и используйте свои знания JavaScript и DOM, чтобы правильно модифицировать предоставленный HTML и JavaScript код.

Список тем

Блокировка текстового поля

Заблокируйте текстовое поле с id="myTextField". После выполнения кода поле должно стать недоступным для редактирования.

HTML

Восстановить HTML

                      <input type="text" id="myTextField" value="Исходный текст">

<input type="text" id="myTextField" value="Исходный текст">

JavaScript

document.getElementById("input__1").disabled = input__2;

                     document.getElementById("input__1").disabled = input__2;

Используйте свойство `disabled` элемента. Установите его значение в `true`, чтобы заблокировать поле.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Разблокировка текстового поля

Разблокируйте текстовое поле с id="myTextField", которое изначально заблокировано.

HTML

Восстановить HTML

                      <input type="text" id="myTextField" value="Исходный текст" disabled>

<input type="text" id="myTextField" value="Исходный текст" disabled>

JavaScript

document.getElementById(input__1).input__2 = false;

                     document.getElementById(input__1).input__2 = false;

Используйте свойство `disabled` элемента. Установите его значение в `false`, чтобы разблокировать поле.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка/разблокировка по клику

Сделайте так, чтобы при клике на кнопку с id="toggleButton" текстовое поле с id="myTextField" меняло свое состояние (заблокировано/разблокировано).

HTML

Восстановить HTML

                      <input type="text" id="myTextField" value="Исходный текст">
<button id="toggleButton">Переключить</button>

<input type="text" id="myTextField" value="Исходный текст">
<button id="toggleButton">Переключить</button>

JavaScript

document.getElementById("toggleButton").addEventListener("click", function() {
  const textField = document.getElementById("myTextField");
  textField.disabled = input__1;
});

                     document.getElementById("toggleButton").addEventListener("click", function() {
  const textField = document.getElementById("myTextField");
  textField.disabled = input__1;
});

Добавьте обработчик события `click` на кнопку. Внутри обработчика изменяйте свойство `disabled` текстового поля на противоположное.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка нескольких полей

Заблокируйте все текстовые поля на странице.

HTML

Восстановить HTML

                      <input type="text" value="Поле 1">
<input type="text" value="Поле 2">
<input type="text" value="Поле 3">

<input type="text" value="Поле 1">
<input type="text" value="Поле 2">
<input type="text" value="Поле 3">

JavaScript

const textFields = document.querySelectorAll("input__1");
textFields.forEach(function(textField) {
  textField.input__2 = true;
});

                     const textFields = document.querySelectorAll("input__1");
textFields.forEach(function(textField) {
  textField.input__2 = true;
});

Используйте `querySelectorAll`, чтобы получить все текстовые поля, а затем в цикле установите свойство `disabled` каждого поля в `true`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Разблокировка полей при выборе чекбокса

Сделайте так, чтобы при установке чекбокса с id="agreeCheckbox" разблокировались текстовые поля с классом "protected".

HTML

Восстановить HTML

                      <input type="checkbox" id="agreeCheckbox"> Согласен с условиями
<input type="text" class="protected" value="Поле 1" disabled>
<input type="text" class="protected" value="Поле 2" disabled>

<input type="checkbox" id="agreeCheckbox"> Согласен с условиями
<input type="text" class="protected" value="Поле 1" disabled>
<input type="text" class="protected" value="Поле 2" disabled>

JavaScript

document.getElementById("agreeCheckbox").addEventListener("change", function() {
  const protectedFields = document.querySelectorAll(".input__1");
  if (this.input__2) {
    protectedFields.forEach(function(field) {
      field.disabled = input__3;
    });
  }
});

                     document.getElementById("agreeCheckbox").addEventListener("change", function() {
  const protectedFields = document.querySelectorAll(".input__1");
  if (this.input__2) {
    protectedFields.forEach(function(field) {
      field.disabled = input__3;
    });
  }
});

Добавьте обработчик события `change` на чекбокс. Внутри обработчика проверяйте состояние чекбокса (`checked`) и, если он установлен, разблокируйте поля с классом "protected".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка поля в зависимости от значения другого поля

Сделайте так, чтобы поле "Другое" (id="otherInput") блокировалось, если в выпадающем списке (id="occupationSelect") выбрано значение, отличное от "Другое".

HTML

Восстановить HTML

                      <select id="occupationSelect">
  <option value="student">Студент</option>
  <option value="employee">Сотрудник</option>
  <option value="other">Другое</option>
</select>
<input type="text" id="otherInput" placeholder="Укажите другое" disabled>

<select id="occupationSelect">
  <option value="student">Студент</option>
  <option value="employee">Сотрудник</option>
  <option value="other">Другое</option>
</select>
<input type="text" id="otherInput" placeholder="Укажите другое" disabled>

JavaScript

document.getElementById("occupationSelect").addEventListener("change", function() {
  const otherInput = document.getElementById("otherInput");
  otherInput.disabled = this.value input__1 "other";
});

                     document.getElementById("occupationSelect").addEventListener("change", function() {
  const otherInput = document.getElementById("otherInput");
  otherInput.disabled = this.value input__1 "other";
});

Добавьте обработчик события `change` к выпадающему списку. Внутри обработчика проверяйте выбранное значение (`value`) и блокируйте/разблокируйте поле "Другое" соответственно.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка поля с изображением

Сделайте поле с изображением (id="imageInput") некликабельным (заблокируйте его).

HTML

Восстановить HTML

                      <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" id="imageInput" alt="Картинка">

<img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" id="imageInput" alt="Картинка">

JavaScript

document.getElementById('imageInput').style.input__1 = 'input__2';

                     document.getElementById('imageInput').style.input__1 = 'input__2';

Для блокировки поля с изображением можно использовать CSS свойство `pointer-events`, установив его в значение `none`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Разблокировка всех полей формы

Разблокируйте все поля внутри формы с id="myForm".

HTML

Восстановить HTML

                      <form id="myForm">
 <input type="text" value="Поле 1" disabled>
 <input type="email" value="test@test.com" disabled>
 <textarea disabled>Текст</textarea>
 <button type="submit" disabled>Отправить</button>
</form>

<form id="myForm">
 <input type="text" value="Поле 1" disabled>
 <input type="email" value="test@test.com" disabled>
 <textarea disabled>Текст</textarea>
 <button type="submit" disabled>Отправить</button>
</form>

JavaScript

const form = document.getElementById("myForm");
const formElements = form.input__1;
for (let i = 0; i < formElements.length; i++) {
 formElements[i].input__2 = false;
}

                     const form = document.getElementById("myForm");
const formElements = form.input__1;
for (let i = 0; i < formElements.length; i++) {
 formElements[i].input__2 = false;
}

Получите форму по id, затем используйте `elements` для доступа ко всем элементам формы. Пройдитесь по ним в цикле и установите `disabled = false` для каждого элемента.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка поля ввода файла

Заблокируйте поле для выбора файла (input type="file") с id="fileInput".

HTML

Восстановить HTML

                      <input type="file" id="fileInput">

<input type="file" id="fileInput">

JavaScript

document.getElementById(input__1).input__2 = true;

                     document.getElementById(input__1).input__2 = true;

Используйте свойство `disabled` элемента, установив его значение в `true`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка радиокнопок

Заблокируйте все радиокнопки с именем "gender".

HTML

Восстановить HTML

                      <input type="radio" name="gender" value="male"> Мужской
<input type="radio" name="gender" value="female"> Женский

<input type="radio" name="gender" value="male"> Мужской
<input type="radio" name="gender" value="female"> Женский

JavaScript

const radioButtons = document.querySelectorAll("input__1");
radioButtons.forEach(function(radioButton) {
  radioButton.disabled = input__2;
});

                     const radioButtons = document.querySelectorAll("input__1");
radioButtons.forEach(function(radioButton) {
  radioButton.disabled = input__2;
});

Используйте `querySelectorAll` для получения всех радиокнопок с нужным именем, а затем в цикле установите свойство `disabled` каждой радиокнопки в `true`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка textarea по достижению лимита символов

Заблокируйте текстовую область (textarea) с id="myTextarea", когда количество введенных символов достигнет или превысит 50.

HTML

Восстановить HTML

                      <textarea id="myTextarea" maxlength="50"></textarea>

<textarea id="myTextarea" maxlength="50"></textarea>

JavaScript

document.getElementById("myTextarea").addEventListener("input", function() {
 this.disabled = this.value.input__1 input__2 50;
});

                     document.getElementById("myTextarea").addEventListener("input", function() {
 this.disabled = this.value.input__1 input__2 50;
});

Добавьте обработчик события `input` к textarea. Внутри обработчика проверяйте длину введенного текста (`value.length`) и блокируйте/разблокируйте textarea соответственно.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка/разблокировка поля в зависимости от выбора в другом select

Сделайте так, чтобы поле с id="cityInput" блокировалось, если в списке (id="countrySelect") выбрана опция "Не выбрано".

HTML

Восстановить HTML

                      <select id="countrySelect">
 <option value="">Не выбрано</option>
 <option value="usa">США</option>
 <option value="canada">Канада</option>
</select>
<input type="text" id="cityInput" placeholder="Введите город" disabled>

<select id="countrySelect">
 <option value="">Не выбрано</option>
 <option value="usa">США</option>
 <option value="canada">Канада</option>
</select>
<input type="text" id="cityInput" placeholder="Введите город" disabled>

JavaScript

document.getElementById("countrySelect").addEventListener("change", function() {
 const cityInput = document.getElementById("cityInput");
 cityInput.disabled = this.input__1 input__2 "";
});

                     document.getElementById("countrySelect").addEventListener("change", function() {
 const cityInput = document.getElementById("cityInput");
 cityInput.disabled = this.input__1 input__2 "";
});

Добавьте обработчик события `change` к выпадающему списку. Внутри обработчика проверяйте выбранное значение и блокируйте/разблокируйте поле ввода города.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Динамическая блокировка/разблокировка полей

Создайте функцию `toggleField`, которая принимает ID элемента и булево значение (true/false) и блокирует/разблокирует элемент с этим ID.

HTML

Восстановить HTML

                      <input type="text" id="field1" value="Поле 1">
<input type="text" id="field2" value="Поле 2" disabled>
<button onclick="toggleField('field1', true)">Заблокировать поле 1</button>
<button onclick="toggleField('field2', false)">Разблокировать поле 2</button>

<input type="text" id="field1" value="Поле 1">
<input type="text" id="field2" value="Поле 2" disabled>
<button onclick="toggleField('field1', true)">Заблокировать поле 1</button>
<button onclick="toggleField('field2', false)">Разблокировать поле 2</button>

JavaScript

function toggleField(input__1, shouldDisable) {
  document.getElementById(id).disabled = input__2;
}

                     function toggleField(input__1, shouldDisable) {
  document.getElementById(id).disabled = input__2;
}

Определите функцию `toggleField`, которая принимает два аргумента: `id` и `shouldDisable`. Внутри функции получите элемент по ID и установите его свойство `disabled` в значение `shouldDisable`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Блокировка кнопки при невалидной форме

Заблокируйте кнопку отправки (id="submitBtn") если форма (id="myForm2") не проходит валидацию (свойство `checkValidity()` возвращает `false`).

HTML

Восстановить HTML

                      <form id="myForm2">
 <input type="email" id="emailInput2" required>
 <button type="submit" id="submitBtn">Отправить</button>
</form>

<form id="myForm2">
 <input type="email" id="emailInput2" required>
 <button type="submit" id="submitBtn">Отправить</button>
</form>

JavaScript

document.getElementById("myForm2").addEventListener("input", function() {
 const submitBtn = document.getElementById("submitBtn");
 submitBtn.disabled = !this.input__1();
});

                     document.getElementById("myForm2").addEventListener("input", function() {
 const submitBtn = document.getElementById("submitBtn");
 submitBtn.disabled = !this.input__1();
});

Добавьте обработчик события `input` для формы. Внутри обработчика проверяйте валидность формы с помощью метода `checkValidity()` и блокируйте/разблокируйте кнопку отправки.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку