Создание динамических input полей в HTML с помощью JavaScript

Быстрый ответ

Для динамического создания полей ввода используется цикл for в JavaScript. Вот скрипт, который добавляет заданное количество полей ввода в существующую форму. Ниже представлен элегантный и эффективный пример кода:

for (let i = 0; i < 5; i++) {
  document.getElementById('myForm').appendChild(Object.assign(document.createElement('input'), {
    type: 'text',
    name: `input${i}`,
    placeholder: `Ввод ${i + 1}`
  }));
}

Убедитесь, что форма в HTML имеет атрибут id="myForm". Этот код создаст 5 текстовых полей ввода, при необходимости количество можно изменить.

Пошаговый процесс создания полей ввода

Проверка введенных данных крайне важна для предотвращения возможных сбоев или непредвиденных ситуаций, связанных с некорректным вводом пользователей. Проверьте, что введено целое число без задержек.

Инициализация поля ввода

Сначала привяжите к кнопке обработчик события onclick:

<button onclick="addInputs()">Добавить поля</button>

Теперь JavaScript функция addInputs, будет проверять ввод пользователя перед тем, как динамически создавать поля ввода.

function addInputs() {
  let numberOfInputs = parseInt(document.getElementById('inputCount').value);
  if (isNaN(numberOfInputs) || numberOfInputs <= 0 || numberOfInputs > 10) {
    alert('Введите корректное число от 1 до 10. В противном случае что-то может пойти не так!');
    return;
  }

  let container = document.getElementById('inputContainer'); // Это место для новых полей
  while (container.hasChildNodes()) { 
    container.removeChild(container.lastChild); // Освобождаем место от старых элементов
  }

  for (let i = 0; i < numberOfInputs; i++) {
    let input = document.createElement('input');
    input.type = 'text';
    input.name = `dynamicInput${i}`; // Имена для каждого поля для избежания ошибок
    input.placeholder = `Ввод ${i + 1}`;
    container.appendChild(input); // Добавляем новое поле в контейнер
    container.appendChild(document.createElement('br')); // Предусматриваем дополнительное пространство между полями
  }
}

В HTML-код добавьте контейнер, который будет принимать динамически создаваемые поля ввода:

<div id="inputContainer"></div>

Подробнее об этом расскажет наш спикер на видео

Советы по обработке динамических форм

Крайне важно давать последовательные имена динамическим полям ввода, например dynamicInput${i}, для удобства извлечения их значений в дальнейших действиях.

Использование jQuery для расширения возможностей

jQuery может значительно упростить выполнение вашей задачи:

$(document).ready(function(){
  $('#addButton').click(function(){
    var numberOfInputsToAdd = parseInt($('#inputCount').val());
    if (numberOfInputsToAdd > 0 && numberOfInputsToAdd <= 10) {
      var $container = $('#inputContainer');
      $container.empty(); // Очищаем контейнер перед добавлением новых элементов
      for(let i = 0; i < numberOfInputsToAdd; i++) {
        $('<input>')
          .attr({
            type: 'text',
            name: `input_${i}`,
             placeholder: `Ввод ${i + 1}`
          })
          .appendTo($container); // Добавляем новые поля ввода
        $('<br>').appendTo($container);
      }
    }
  });
});

Не забывайте подключить библиотеку jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Визуализация

Поля ввода можно сравнить с расписанием поездов:

Расписание поездов: [🚄]
Количество отправлений: **n**

Планируем отправление пяти поездов:

for(let i = 0; i < 5; i++) {
  schedule.push( addTrain() ); // Записываем новые отправления в расписание
}

Вот как выглядит табло:

[🚄, 🚄, 🚄, 🚄, 🚄]
# Каждый символ "🚄" символизирует отдельное поле ввода.

Важно размещать информацию на табло четко и однозначно. Используйте переносы строк и добавляйте описания к полям ввода для улучшения восприятия информации пользователями.

Оформление ваших динамических полей ввода

Динамическое контролирование

Рядом с каждым полем ввода поместите кнопку +, предоставляя пользователю возможность добавлять новые поля самостоятельно:

function addInput(nextToElement) {
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.placeholder = 'Дополнительный ввод';
  nextToElement.parentNode.insertBefore(newInput, nextToElement.nextSibling);
}

Обработка ошибок

Ошибки следует обрабатывать аккуратно. Проверяйте валидность ввода и устанавливайте разумные ограничения. Не добавляйте новых полей, если текущее количество достигает заранее установленной верхней границы, и информируйте о таком случае пользователя с помощью вежливого уведомления.

Полезные материалы

1. Stack Overflow: Динамическое создание заданного количества полей ввода в форме — Обсуждение различных подходов к созданию динамических полей ввода при помощи JavaScript.
2. Angular – Создание динамических форм — Официальное руководство от создателей Angular, посвященное динамическому созданию форм.
3. jQuery API: метод .append() — Документация метода .append() в jQuery, полезная при динамическом добавлении элементов.
4. HTML Standard – Формы — Описание HTML-спецификаций с основной информацией о формах, необходимой для понимания их работы.