Динамическое добавление/удаление полей формы [Модуль 8: Работа с формами]: Тренажер JavaScript: Покоряем HTML DOM

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

В этом тренажере вы попрактикуетесь в динамическом создании и удалении элементов формы с помощью JavaScript. Вы будете работать с различными HTML-элементами, такими как `<input>`, `<textarea>`, `<select>`, `<button>`, и контейнерами (`<div>`). Вам предстоит добавлять новые поля, удалять существующие, а также изменять их атрибуты и содержимое, реагируя на действия пользователя (например, нажатие кнопки). Каждое задание представляет собой фрагмент HTML и JavaScript кода с пропусками, которые вам нужно заполнить, чтобы добиться желаемого результата.

Список тем

Добавление текстового поля

id: 37059_add-text-input

Добавьте текстовое поле (`<input type="text">`) внутрь `<div>` с идентификатором "container" после нажатия на кнопку "Добавить". Поле должно появляться при каждом нажатии.

HTML

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

                      <button id="addButton">Добавить</button>
<div id="container"></div>

<button id="addButton">Добавить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let input = document.input__1("input");
  input.input__2 = "text";
  document.getElementById("container").input__3(input);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let input = document.input__1("input");
  input.input__2 = "text";
  document.getElementById("container").input__3(input);
});

Используйте `document.createElement` для создания нового элемента `<input>`. Затем используйте `appendChild` для добавления созданного элемента внутрь элемента `<div>` с id "container". Не забудьте установить атрибут `type` в значение "text".

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

Результат

Лог

Выполнить

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

Удаление последнего поля

id: 37059_remove-last-input

Добавьте несколько текстовых полей, используя кнопку "Добавить". Затем реализуйте удаление последнего добавленного поля при нажатии на кнопку "Удалить".

HTML

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

                      <button id="addButton">Добавить</button>
<button id="removeButton">Удалить</button>
<div id="container"></div>

<button id="addButton">Добавить</button>
<button id="removeButton">Удалить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let input = document.createElement("input");
  input.type = "text";
  document.getElementById("container").appendChild(input);
});

document.getElementById("removeButton").addEventListener("click", function() {
  let container = document.getElementById("container");
  let lastInput = container.querySelector("input:input__1");
  if (lastInput) {
    lastInput.input__2();
  }
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let input = document.createElement("input");
  input.type = "text";
  document.getElementById("container").appendChild(input);
});

document.getElementById("removeButton").addEventListener("click", function() {
  let container = document.getElementById("container");
  let lastInput = container.querySelector("input:input__1");
  if (lastInput) {
    lastInput.input__2();
  }
});

Используйте `querySelector` и `:last-child` чтобы найти последний `<input>` внутри "container". Затем используйте `remove()` для удаления найденного элемента.

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

Результат

Лог

Выполнить

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

Добавление поля с номером

id: 37059_add-numbered-input

Добавляйте текстовые поля с порядковым номером при каждом нажатии на кнопку "Добавить". Например: "Поле 1", "Поле 2", и т.д.

HTML

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

                      <button id="addButton">Добавить</button>
<div id="container"></div>

<button id="addButton">Добавить</button>
<div id="container"></div>

JavaScript

let count = 0;
document.getElementById("addButton").addEventListener("click", function() {
  count++;
  let label = document.createElement("label");
  label.textContent = "Поле " + input__1 + ": ";
  let input = document.createElement("input");
  input.type = "text";
  let br = document.createElement("br"); 
 document.getElementById("container").appendChild(input__2);
  document.getElementById("container").appendChild(input);
  document.getElementById("container").appendChild(br);
});

                     let count = 0;
document.getElementById("addButton").addEventListener("click", function() {
  count++;
  let label = document.createElement("label");
  label.textContent = "Поле " + input__1 + ": ";
  let input = document.createElement("input");
  input.type = "text";
  let br = document.createElement("br"); 
 document.getElementById("container").appendChild(input__2);
  document.getElementById("container").appendChild(input);
  document.getElementById("container").appendChild(br);
});

Используйте переменную для отслеживания количества добавленных полей. При создании нового поля, увеличивайте значение переменной и используйте его для формирования текста внутри `<label>`.

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

Результат

Лог

Выполнить

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

Добавление выпадающего списка

id: 37059_add-select

Добавьте выпадающий список (`<select>`) с тремя опциями ("Вариант 1", "Вариант 2", "Вариант 3") внутрь `<div>` с id "container" при нажатии на кнопку.

HTML

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

                      <button id="addButton">Добавить select</button>
<div id="container"></div>

<button id="addButton">Добавить select</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let select = document.createElement(input__1);
  let option1 = document.createElement("option");
  option1.value = "1";
  option1.textContent = "Вариант 1";
  let option2 = document.createElement("option");
  option2.input__2 = "2";
  option2.textContent = "Вариант 2";
  let option3 = document.createElement("option");
  option3.value = "3";
  option3.textContent = "Вариант 3";
  select.appendChild(option1);
  select.appendChild(option2);
  select.appendChild(option3);
  document.getElementById("container").appendChild(input__3);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let select = document.createElement(input__1);
  let option1 = document.createElement("option");
  option1.value = "1";
  option1.textContent = "Вариант 1";
  let option2 = document.createElement("option");
  option2.input__2 = "2";
  option2.textContent = "Вариант 2";
  let option3 = document.createElement("option");
  option3.value = "3";
  option3.textContent = "Вариант 3";
  select.appendChild(option1);
  select.appendChild(option2);
  select.appendChild(option3);
  document.getElementById("container").appendChild(input__3);
});

Создайте элемент `<select>` с помощью `createElement`. Затем создайте три элемента `<option>` и добавьте их внутрь `<select>`. Наконец, добавьте `<select>` в "container".

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

Результат

Лог

Выполнить

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

Удаление определенного поля

id: 37059_remove-specific-input

Добавьте несколько текстовых полей с кнопками "Удалить" рядом с каждым полем. При нажатии на кнопку "Удалить", должно удаляться соответствующее поле.

CSS

.input-group { margin-bottom: 5px; }

HTML

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

                      <button id="addButton">Добавить поле с кнопкой удаления</button>
<div id="container"></div>

<button id="addButton">Добавить поле с кнопкой удаления</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let inputGroup = document.createElement("div");
  inputGroup.className = "input-group";
  let input = document.createElement("input");
  input.type = "text";
  let button = document.createElement("button");
  button.textContent = "Удалить";
  button.addEventListener("click", function() {
    input__1.parentNode.remove();
  });
  inputGroup.appendChild(input);
  inputGroup.appendChild(button);
  document.getElementById("container").appendChild(inputGroup);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let inputGroup = document.createElement("div");
  inputGroup.className = "input-group";
  let input = document.createElement("input");
  input.type = "text";
  let button = document.createElement("button");
  button.textContent = "Удалить";
  button.addEventListener("click", function() {
    input__1.parentNode.remove();
  });
  inputGroup.appendChild(input);
  inputGroup.appendChild(button);
  document.getElementById("container").appendChild(inputGroup);
});

При создании поля и кнопки, добавьте кнопке обработчик события `click`. Внутри обработчика используйте `parentNode` и `remove()` чтобы удалить родительский элемент кнопки (который будет содержать и поле, и кнопку).

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

Результат

Лог

Выполнить

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

Добавление изображения

id: 37059_add-image

Добавьте изображение внутрь `<div>` с id "container" при нажатии на кнопку. Используйте одну из картинок, указанных в условии.

HTML

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

                      <button id="addImageButton">Добавить изображение</button>
<div id="container"></div>

<button id="addImageButton">Добавить изображение</button>
<div id="container"></div>

JavaScript

document.getElementById("addImageButton").addEventListener("click", function() {
  let img = document.createElement(input__1);
  img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
  document.getElementById("container").input__2(img);
});

                     document.getElementById("addImageButton").addEventListener("click", function() {
  let img = document.createElement(input__1);
  img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
  document.getElementById("container").input__2(img);
});

Создайте элемент `<img>` с помощью `document.createElement`. Установите атрибут `src` равным URL изображения. Затем добавьте изображение в "container".

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

Результат

Лог

Выполнить

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

Добавление и очистка поля textarea

id: 37059_add-clear-textarea

Добавьте поле `<textarea>` внутрь `<div>` с id "container" при нажатии на кнопку "Добавить". Затем добавьте кнопку "Очистить", которая будет очищать содержимое `<textarea>`.

HTML

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

                      <button id="addButton">Добавить textarea</button>
<button id="clearButton">Очистить</button>
<div id="container"></div>

<button id="addButton">Добавить textarea</button>
<button id="clearButton">Очистить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let textarea = document.createElement(input__1);
  document.getElementById("container").appendChild(textarea);
});

document.getElementById("clearButton").addEventListener("click", function() {
  let textarea = document.querySelector("textarea");
    textarea.input__2 = "";
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let textarea = document.createElement(input__1);
  document.getElementById("container").appendChild(textarea);
});

document.getElementById("clearButton").addEventListener("click", function() {
  let textarea = document.querySelector("textarea");
    textarea.input__2 = "";
});

Создайте элемент `<textarea>` и добавьте его в "container". Для очистки, найдите `<textarea>` и установите его свойство `value` в пустую строку.

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

Результат

Лог

Выполнить

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

Добавление клонированного поля

id: 37059_add-cloned-input

Создайте текстовое поле с начальным значением. При нажатии на кнопку "Клонировать", создайте копию этого поля и добавьте её в "container".

HTML

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

                      <input type="text" id="originalInput" value="Исходное поле">
<button id="cloneButton">Клонировать</button>
<div id="container"></div>

<input type="text" id="originalInput" value="Исходное поле">
<button id="cloneButton">Клонировать</button>
<div id="container"></div>

JavaScript

document.getElementById("cloneButton").addEventListener("click", function() {
  let originalInput = document.getElementById("originalInput");
  let clonedInput = originalInput.input__1(input__2);
  document.getElementById("container").appendChild(clonedInput);
});

                     document.getElementById("cloneButton").addEventListener("click", function() {
  let originalInput = document.getElementById("originalInput");
  let clonedInput = originalInput.input__1(input__2);
  document.getElementById("container").appendChild(clonedInput);
});

Используйте `cloneNode(true)` для создания глубокой копии элемента, включая его атрибуты и содержимое. Затем добавьте клонированный элемент в "container".

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

Результат

Лог

Выполнить

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

Добавление нескольких типов полей

id: 37059_add-multiple-field-types

Добавьте выпадающий список (`<select>`) с опциями, представляющими разные типы полей: "text", "number", "email", "password". При выборе типа поля и нажатии на кнопку "Добавить", должно добавляться поле соответствующего типа.

HTML

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

                      <select id="fieldType">
  <option value="text">Text</option>
  <option value="number">Number</option>
  <option value="email">Email</option>
  <option value="password">Password</option>
</select>
<button id="addButton">Добавить</button>
<div id="container"></div>

<select id="fieldType">
  <option value="text">Text</option>
  <option value="number">Number</option>
  <option value="email">Email</option>
  <option value="password">Password</option>
</select>
<button id="addButton">Добавить</button>
<div id="container"></div>

JavaScript

document.getElementById("addButton").addEventListener("click", function() {
  let fieldType = document.getElementById("fieldType").input__1;
  let input = document.createElement("input");
  input.type = input__2;
  document.getElementById("container").appendChild(input);
});

                     document.getElementById("addButton").addEventListener("click", function() {
  let fieldType = document.getElementById("fieldType").input__1;
  let input = document.createElement("input");
  input.type = input__2;
  document.getElementById("container").appendChild(input);
});

Создайте `<select>` с опциями. В обработчике кнопки "Добавить", получайте выбранное значение из `<select>` и используйте его как значение атрибута `type` для нового `<input>`.

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

Результат

Лог

Выполнить

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