Создание динамических текстовых полей в HTML и JavaScript

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

Чтобы динамически вставить текстовое поле ввода с помощью JavaScript, следует выполнить три простых шага:

1. Сгенерировать элемент input.
2. Задать значение его атрибута type равным 'text'.
3. Внедрить этот элемент в DOM.

Вот как это выглядит на практике:

let input = document.createElement('input');
input.type = 'text';
document.body.appendChild(input);

Также можно и сделать – и текстовое поле готово!

Настройка: за пределами простых полей ввода

Добавление стилей и классов: по манере профессионального веб-дизайнера

Давайте придадим нашему полю ввода немного индивидуальности, добавив к нему класс со стилями:

input.className = 'text-input-style';

Учитываем, что класс .text-input-style уже прописан в CSS.

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

Установка атрибутов: имя и скрытое сообщение

Поля ввода могут хранить свои небольшие секреты, типа name и placeholder:

input.setAttribute('name', 'userInput');
input.setAttribute('placeholder', 'Введите текст');

Это способствует корректной обработке форм и улучшает пользовательский интерфейс (UX).

Внедрение в формы: приветствуем, Форменштейн!

Чтобы включить поле ввода в форму, просто находим нужную форму и вставляем туда наш элемент:

let form = document.getElementById('myForm');
form.appendChild(input);

Теперь данное поле ввода является составной частью формы.

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

Представьте, что вы формируете элементы для своего интерактивного пространства "на лету".

Интерактивные элементы: [🛠, 🎨, 🧩, 📦]

И вам необходимо ввести новый элемент, именно текстовое поле (📝):

let interactiveContainer = document.createElement('input');
interactiveContainer.type = 'text';
document.body.appendChild(interactiveContainer);

Визуализация изменений:

До:      [🛠, 🎨, 🧩, 📦]
После:  [🛠, 🎨, 🧩, 📦, 📝]

Прежде текстового поля не было, а теперь оно стало элементом вашего интерактивного пространства.

Продвинутые реализации: кому не нравится похвастаться?

Создание множества текстовых полей ввода

Для динамического генерирования нескольких текстовых полей ввода используйте следующий код:

function addInputs(num) {
  let container = document.getElementById('input-container');
  for (let i = 0; i < num; i++) {
    let input = document.createElement('input');
    input.type = 'text';
    input.name = 'text' + i;
    container.appendChild(input);
  }
}

Вызвав функцию addInputs(5);, вы создадите пять новых текстовых полей.

Создание поля ввода при клике пользователя: всего одно нажатие

Код ниже представлен для того, чтобы поля ввода генерировались при нажатии пользователем на кнопку:

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

Не забываем, что addButton – это ID искомой кнопки.

Дружественные элементы: важность взаимодействия

Очистка перед обновлением

Перед добавлением новых полей старые следует удалить:

container.innerHTML = ''; // Старые поля исчезают!
addInputs(n); // Вот новые поля!

Валидация и функции доступности

Добавьте валидацию и улучшите доступность элементов:

input.setAttribute('required', true); // Теперь поле обязательно для заполнения!
input.setAttribute('aria-label', 'Текстовое поле'); // Сделаем наш элемент более доступным!

Теперь ваши поля ввода привлекательны, надежны и удобны для использования.

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

1. Document: createElement() method – Web APIs | MDN — принципы создания новых элементов.
2. dom – How to insert an element after another element in JavaScript without using a library? – Stack Overflow — руководство по манипуляциям с элементами в DOM.
3. Modifying the document – JavaScript.info — всё об управлении элементами.
4. Element: setAttribute() method – Web APIs | MDN — как задавать элементам различные атрибуты.
5. .append() | jQuery API Documentation — добавление элементов с помощью jQuery.
6. JavaScript insertAdjacentHTML and beforeend – David Walsh Blog — расширение навыков работы с элементами.
7. HTML Standard – HTMLInputElement — подробнее о теге <input>.