html - 复杂的 HTML 表单

Question

这个问题并不像它长那么难，它很长是因为我不擅长解释事情，版主在减少这个问题的长度或改进它的标题(同时保持它的含义)方面的任何帮助将不胜感激。

我正在设计一个可以处理复杂表单的通用应用程序，但要做到这一点，我需要决定如何自己处理表单......所以让我们暂时忘记服务器后端。
我已经对此进行了一段时间的研究，但似乎找不到任何不过时或不相关的内容。

对我来说，解释这一点的最简单方法是举个例子，让我们以一个假设的“商人”和“客户数据库”为例:

一位自雇商人决定为他的每个客户保留一份记录，他可以在其中存储他们的所有姓名、电话号码、电子邮件、国家/地区、城市和出生日期。
为此，他使用了一个网络应用程序，他可以在手机上或在家里的旧办公室电脑上打开该应用程序。
但可悲的是，这个商人也是偏执狂，关闭了他电脑上的所有 JavaScript。

商人可能会指派他的秘书添加客户数据，因此我们将编辑表单的人称为“用户”。

此表单的难点在于支持多个电话和电子邮件，以及没有 JavaScript 的国家 > 城市选择。

有几种解决方案，最简单的方法是首先存储客户，然后在他实际存在后给他所有的电话号码、电子邮件和国家，但在这种情况下，客户需要选择他/她的国家和存储时至少有一个电话号码。

选择国家和城市可以通过一个带有“选择国家”字段的表单和一个没有任何值的禁用“选择城市”和一个显示“选择国家”或类似内容的按钮来完成……它将使用很少使用的表单按钮，类似于这样的东西:

<h2>General info</h2>
...name, surname, gender, age selection...
<h2>Country and city</h2>
<p><label>Select country: </label><select name="country">
<option value="United Kingdom">United Kingdom</option> 
<option value="United States">United States</option> 
<option value="France">France</option> 
<option value="Germany">Germany</option> 
<option value="Spain">Spain</option> 
<option value="Italy">Italy</option> 
<option value="Canada">Canada</option></select>
<input type="button" name="select[country]" value="Select Country" /></p>
<p>Select city: <select disabled="disabled"><option value="">No city selected<option></select> (you must first select a country)</p>

用户点击“选择国家”按钮，表单将显示他输入的所有数据和一个基于他选择的国家的“城市”选择字段
(只要表单验证它输出的数据，并为表单使用唯一的 token ，它应该是安全的)
它还会将国家选择字段显示为禁用，他选择的国家作为所选值，以及一个清除他选择的按钮，我们这样做是为了防止用户选择国家，例如“美国”，然后是“城市” New York”，后来更改了他在国家/地区的选择，并阻止他提交具有 country="Uruguay"和 city="New York"值的表单。

另一种方法是仅显示一个名为“选择国家/城市”的按钮，单击该按钮会导致国家选择表单，然后又会导致城市选择表单，提交时会将用户返回到他开始的表单。但我认为上面的解决方案更好。

如果有更好的方法，请纠正我。

然后在选择国家和城市后，表单的用户必须在尚未存储的“客户端”中添加至少一个电话号码。
(电子邮件将以同样的方式处理)
这部分，我还没有设法做到，希望得到一些帮助。
到目前为止，我所拥有的就是:

...name, surname, gender, age selection...
...country/city selection...
<p><input name="add[phone]" type="button" value="Add phone number" /></p>

单击“添加电话号码”将转到不同的页面，用户可以在其中输入电话号码，然后将其添加到输入字段列表中:

...name, surname, gender, age selection...
...country/city selection...
<p><input name="add[phone]" type="button" value="Add phone number" /></p>
<p>
List of phones that will be added when the client is saved:<br/>
<ul>
<li>987654321<input name="phone[0]" type="hidden" value="987654321" /><button name="remove[phone][0]" value="Remove" /></li>
<li>987654322<input name="phone[1]" type="hidden" value="987654322" /><button name="remove[phone][1]" value="Remove" /></li>
</ul>
</p>

我很确定有更好的方法，我在上面做错了什么，我需要一些帮助。

如果答案可以通过多种方式理解，请提供示例 HTML。

附言它不必是“客户数据库”表单，只是它应该支持链接选择并为单个条目添加多个变量“值”(如本例中的电话和电子邮件)。

编辑:
现在我想起来，手机应该是可编辑的，所以它应该看起来像这样:

...name, surname, gender, age selection...
...country/city selection...
<p><input name="add[phone]" type="button" value="Add phone number" /></p>
<p>
List of phones that will be added when the client is saved:<br/>
<ul>
<li><input name="phone[0]" type="text" value="987654321" /><button name="remove[phone][0]" value="Remove" /></li>
<li><input name="phone[1]" type="text" value="987654322" /><button name="remove[phone][1]" value="Remove" /></li>
</ul>
</p>

“添加电话”会指向一个包含所有相同字段的表单，但它们将被隐藏并预填充用户值，以及一个用于添加新电话的字段。

或者我可以完全跳过它，只显示相同的页面，但添加了一个空的电话号码……或者编辑不同页面上的所有字段？
如果您使用此表单添加和编辑，也会出现问题。

Answer 1

你的解决方案有什么问题？

如果您不能使用 javascript，您肯定必须使用多个页面来处理字段之间的依赖关系。这就是大多数框架所说的屏幕流。

如果您知道使用了哪些设备/浏览器，您可以尝试用框架集替换多个页面......国家选择的目标将是一个最初为空的框架集，一旦它从第一个国家开始，它将显示所有城市选择...(你觉得我在想什么吗？:-)

但是框架集很丑陋，会导致很多问题。

所以我的建议是使用屏幕流并确保响应时间非常快......

更新:如果问题是如何处理处理表单的多个用户...:

session 有助于识别用户并跟踪已填写的表单元素的状态

更好(更强大)是将您需要的信息(来自已填写的元素和其他元数据)保存在 <input type='hidden'> 中。领域。这样，您不必保持 session - 表单将始终将所有数据提交给服务器。但请确保在最后一步中再次验证所有字段 - 用户可能已经修改了请求。