HTML表单-与对象数组相似的输入组

HTML 表单中的输入组可以模拟对象数组的结构，允许用户输入多个相似的数据项。这种技术在需要收集一组具有相同属性的数据时非常有用，例如注册表单中的多个联系人信息或订单详情中的多个商品项。

基础概念

在 HTML 中，可以使用 <form> 元素来创建表单，并使用 <input>、<select>、<textarea> 等元素来收集用户输入的数据。为了模拟对象数组，可以使用相同的 name 属性，并在其后添加一对方括号 []，这样提交表单时，服务器会接收到一个数组。

类型与应用场景

类型

静态输入组：预先定义好固定数量的输入字段。
动态输入组：允许用户根据需要动态添加或移除输入字段。

应用场景

联系人列表：用户可以添加多个联系人的姓名、电话和邮箱。
商品清单：在电商网站中，用户可以添加多个商品的名称、数量和价格。
项目列表：在项目管理工具中，用户可以添加多个项目的详细信息。

示例代码

以下是一个简单的示例，展示了如何创建一个动态的输入组，用于收集多个联系人的信息：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Input Group</title>
<script>
function addContact() {
    const container = document.getElementById('contacts');
    const newContact = document.createElement('div');
    newContact.innerHTML = `
        <input type="text" name="contacts[name][]" placeholder="Name">
        <input type="text" name="contacts[phone][]" placeholder="Phone">
        <input type="text" name="contacts[email][]" placeholder="Email">
        <button type="button" onclick="removeContact(this)">Remove</button>
    `;
    container.appendChild(newContact);
}

function removeContact(button) {
    button.parentElement.remove();
}
</script>
</head>
<body>

<form action="/submit" method="post">
    <div id="contacts">
        <div>
            <input type="text" name="contacts[name][]" placeholder="Name">
            <input type="text" name="contacts[phone][]" placeholder="Phone">
            <input type="text" name="contacts[email][]" placeholder="Email">
            <button type="button" onclick="removeContact(this)">Remove</button>
        </div>
    </div>
    <button type="button" onclick="addContact()">Add Contact</button>
    <button type="submit">Submit</button>
</form>

</body>
</html>