Есть форма, не могу понять как написать форму... Помогите пожалуйста
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<h1>Заказать товар</h1>
<form method="GET" action="#">
<input class="form-control" name="names" type="text" style="width:300px;" placeholder="Введите ваше имя">
<input class="form-control" type="text" name="email" style="width:300px;" placeholder="Ваш e-mail">
<div id="parentId">
<div>
<nobr>
<input class="form-control" name="name[1]" type="text" style="width:300px;" placeholder="Название товара" />
<input class="form-control" name="link[1]" type="text" style="width:300px;" placeholder="Ссылка на товар" />
<input class="form-control" name="color[1]" type="text" style="width:300px;" placeholder="Цвет" />
<input class="form-control" name="size[1]" type="text" style="width:300px;" placeholder="Размер товара" />
<input class="form-control" name="price[1]" type="text" style="width:300px;" placeholder="Цена товара" />
<input class="form-control" name="quantity[1]" type="text" style="width:300px;" placeholder="Количество" />
<a class="btn btn-danger" onclick="return deleteField(this)" href="#">Удалить товар</a>
<a class="btn btn-success" onclick="return addField()" href="#">Добавить товар</a>
</nobr>
</div>
</div>
<textarea class="form-control" name="textarea" cols="30" rows="10" style="width:300px;" placeholder="Например: если не будет размера 10, можно взять на размер больше."></textarea>
<input class="btn btn-primary" type="submit" value="Отправить" />
</form>
<script>
var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 25; // Максимальное число возможных полей
function deleteField(a) {
if (countOfFields > 1) {
// Получаем доступ к ДИВу, содержащему поле
var contDiv = a.parentNode;
// Удаляем этот ДИВ из DOM-дерева
contDiv.parentNode.removeChild(contDiv);
// Уменьшаем значение текущего числа полей
countOfFields--;
}
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}
function addField() {
// Проверяем, не достигло ли число полей максимума
if (countOfFields >= maxFieldLimit) {
alert("Число полей достигло своего максимума = " + maxFieldLimit);
return false;
}
// Увеличиваем текущее значение числа полей
countOfFields++;
// Увеличиваем ID
curFieldNameId++;
// Создаем элемент ДИВ
var div = document.createElement("div");
// Добавляем HTML-контент с пом. свойства innerHTML
div.innerHTML = "<nobr><input class=\"form-control\" name=\"name[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" placeholder=\"Название товара\"/> <input class=\"form-control\" name=\"link[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" placeholder=\"Ссылка на товар\"/> <input class=\"form-control\" name=\"color[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" placeholder=\"Цвет\"/> <input class=\"form-control\" name=\"size[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" placeholder=\"Размер товара\"/> <input class=\"form-control\" name=\"price[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" placeholder=\"Цена товара\"/> <input class=\"form-control\" name=\"quantity[" + curFieldNameId + "]\" type=\"text\" style=\"width:300px;\" placeholder=\"Количество\"/> <a class=\"btn btn-danger\" onclick=\"return deleteField(this)\" href=\"#\">Удалить товар</a> <a class=\"btn btn-success\" onclick=\"return addField()\" href=\"#\">Добавить товар</a></nobr>";
// Добавляем новый узел в конец списка полей
document.getElementById("parentId").appendChild(div);
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}
</script>
</body>
</html>
Средний
