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>遇到的问题及解决方法
问题1：提交的数据格式不正确
原因：可能是由于 name 属性的格式不正确，导致服务器无法正确解析数组。
解决方法：确保 name 属性的值以方括号 [] 结尾，并且嵌套属性使用正确的键值对格式。
问题2：动态添加的输入字段无法正确提交
原因：动态添加的输入字段可能没有正确的 name 属性，或者 JavaScript 添加的元素存在问题。
解决方法：检查 JavaScript 代码，确保每次添加的新元素都有正确的 name 属性，并且元素已正确添加到 DOM 中。
问题3：用户误操作导致数据丢失
原因：用户可能在未保存的情况下意外关闭了浏览器或刷新页面。
解决方法：可以使用前端框架如 React 或 Vue 来管理表单状态，实现数据的持久化存储，或者在用户添加或修改数据时即时保存到本地存储。
通过以上方法，可以有效地处理 HTML 表单中与对象数组相似的输入组相关的问题。
相关·内容
4回答
所以我有一个表单，有两组相同的输入，代表教育信息。可能会有两个以上，因为我想包括一个按钮来创建一个新的组，以便用户可以把他所有的教育背景，就像在LinkedIn。month" name="endDate"> </div></form> 现在，如果我使用FormData应用程序接口来获取表单数据
浏览 32提问于2019-01-11得票数 2
我有类似这样的HTML结构： <input type="text" name="name" />我想使用跨浏览器解决方案在Javascript中检索表单的name属性。显然，将不起作用，因为它将返回相应的输入<
浏览 0提问于2010-10-15得票数 5
回答已采纳
4回答
我知道在超文本标记语言中，如果我们给字段命名，比如myimages[]，那么它将创建一个PHP数组，但是如何处理它。
浏览 0提问于2010-12-31得票数 0
回答已采纳
1回答
不久前，我开始使用JSP、JSTL、HTML和JavaScript，所以我的问题是：<c:if test="....">谢谢。我一直在努力，但没能成功。
我有一个包含id和object的字段。我也有带有对象的列表，所以我要做的是找到与该ID相关的对象。，但与id1相关的文本显
浏览 1提问于2010-01-18得票数 5
回答已采纳
1回答
因此，我有一个表单，它出现在几个页面上，包含了许多组输入。假设组a，组b和组c。在某些页面上，它们可能有a和b，而在其他页面上，表单包含b和c。每个组可能需要自己的客户端自定义验证，可能从表单控制器执行。
使用主干和木偶实现这一目标的最佳方法是什么？从概念上来说，我对这两个方面都很陌生，我假设我需要一个FormController，它是从特定于页面的控制器中实例化的，它也实例化了我需要的组控制器。任何建议都会很好。
浏览 1提问于2014-12-18得票数 0
回答已采纳
2回答
我有一个(不可更改的)表单结构，如下所示： <div class="col-sm-3 control-label"> </div>是否可以使用CSS在依赖于具有“*”属性的<
浏览 0提问于2017-08-09得票数 0
3回答
所以基本上，我有很多表单域(大约50个左右)。执行AJAX请求将是一个天文数字的大问题，它很可能只会使我的代码看起来丑陋和不可读。有没有从一个页面收集所有表单数据并执行AJAX请求的方法？
浏览 0提问于2015-09-08得票数 0
1回答
我正在构建一个角度库，理想的功能是允许访问一个有两个输入的选择器。(与数据)对应的形式
在库中，我首先访问所需的组：[formGroup]="myForm.options.form.cont
浏览 2提问于2017-11-02得票数 1
回答已采纳
有人能解释我的区别吗？集合可以是许多字段集吗？字段集是元素的“集合”吗？
浏览 0提问于2014-02-03得票数 1
回答已采纳
在SAS中运行一个与SQL-server 2008相关联的程序时，我在日志中得到了以下错误：
执行错误: ICommand::Execute failed。：：由于文件组“CURRENT01 01”中磁盘空间不足，无法为数据库“数据库”分配新页。通过删除文件组中的对象、向文件组添加其他文件或为文件组中的现有文件设置自动增长，创建必要的空间。我正在寻找类似的问题，我不能真正看到解决办法。我确信我们在数据库中有足够的空间。可能和工作有关吗？我对SQL s
浏览 0提问于2014-08-01得票数 7
回答已采纳
2回答
我有一个moneyFieldset，有两个字段，金额和货币。{ { $this->setHydrator(...);
'name' => 'currency',
浏览 0提问于2015-12-25得票数 5
回答已采纳
1回答
我正在使用Knockout编写一个表单填充页面，基于一些旧的html表单，一切都很好，但是html表单有一个按钮可以将一组地址数据从一组输入复制到另一组，我试图使用这个函数在我的ViewModel中复制类似的功能var i = 0; i < source.length; i++) { };其中源和目标是字符串<
浏览 1提问于2015-10-20得票数 1
回答已采纳
1回答
基本上，我有一个表单来输入日志。首先为日志添加一个标题。然后，它将在数据库(MongoDB)中搜索输入的日志的标题。如果不存在这样的日志标题，它将向用户发送错误。如果日志标题确实存在，它将在日志标题中的数组中添加“logDate”和“logInput”。&
浏览 4提问于2016-06-21得票数 0
2回答
将动态表单场存储为角数组
、、、
FormArray>this.myForm.controls['correctAnswers']; }
question.component.html
浏览 7提问于2017-12-28得票数 1
回答已采纳
我需要一组地址的字段，总计数将由用户选择，以更新与那么多的字段表单。因此，如果用户选择3，表单将有3组地址字段。工作和教育细节的类似概念。现在，我正在将计数传递给一个处理程序页面，该页面检查总计数，并将其与querystring一起返回到主页。我可以更新编号。但是，一旦我返回到表单，所有的值都会丢失。有很多字段可以为每个值使用session对象。此外，它将设置为0的其他此类字段的计数重置。因此，如果我在地址字段中选择4，它将呈现四组地
浏览 1提问于2011-05-05得票数 0
回答已采纳
我想将每个曲目封装为一个组件，它有一个FormGroup，它是单个表单的一部分。使用按钮添加或删除轨道。我会认为这将是一个典型的用例，我错过了什么？如果我构建了一个静态表单，那么一切都可以找到，但是向父组件添加和删除组件的简单操作很快就会变得混乱不堪，我只是不知道如何继续。
浏览 0提问于2018-07-06得票数 0
回答已采纳
我正在使用反应式控件构建一个动态表单，我需要能够显示数据，而不是在输入控件中使用它。我基本上有一个在基于输入和只读(用于打印)的表单之间切换的开关。但是，我不能将label或span与formControlName标记一起使用。因此，我正在做一个hack来遍历表单组对象，似乎应该有一种更简单的方法。.value[i].title}}</div><span *ngIf="isPrint
浏览 2提问于2018-08-25得票数 4
因此，我有一个脚本，在这个脚本中，我输入script.sh，然后输入一组if-else语句。如下所示：最后，输出与输入相呼应。 script.sh 'fnSw38h$?2'
它起作用了。
浏览 5提问于2014-10-13得票数 1
2回答
我在我的页面上有一个表单，其中一个项目输入是可用的服务列表，并且有用于添加和删除更多或更少服务的输入的按钮(例如，输入第一个服务单击添加服务按钮，出现另一个服务输入点，单击删除服务按钮，最后一个服务输入点被删除)
现在，我需要一种在后端使用node.js和express处理输入信息的方法，当然不需要提前知道输入了多少服务。我在其他地方读过关于that到数组的文章，但我不知道它如何与node.js/expre
浏览 4提问于2015-08-26得票数 0
1回答
我目前正在一个组件中工作，该组件由一个反应性表单组成，表单中的每个字段都返回一个对象数组，每个字段的对象数组是不同的。这一点很重要，因为在填写表单时，我需要创建一个URL，以便用该数据调用API。我已经完成了两个生成URL的方法，但是它们只在输入是文本字段或该字段的数据是对象数组以外的另一种类型时才能工作。但是我所有的输入都是使用PrimeNG进行多选择的，所以它们返回一个对象<e
浏览 3提问于2022-09-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
