Question

我必须设计一个注册表单 which looks like the following image

我必须创建一个文本框并将其分成多个部分，每个部分只接受一个字符，如图中所示。

我不知道如何划分文本框，因为我以后还需要填充数据库中的某些字段。您能告诉我一个解决方案，将文本框分成几部分，在每个部分输入一个字符。

Answer 1

<input type="text" maxlength="1" />

尝试添加属性maxlength

我创建了一个php示例供您参考

Answer 2

如果这只是一个表单，并且客户想要具有完全相同的表单，请使用<input type="text" maxlength="1" />构建它。您可以编写一些JSP标记，为您生成所有这些<input type="text" maxlength="1" />。

<mytag:generate size="12">

另一方面，您可以使用mask属性并将掩码更改为mask('0|0|0|0|0|0|0')，然后通过调整输入文本的大小，字体大小以及使掩码可见，您可以模仿上面的表单。请注意，如果您更改与背景颜色相同的蒙版颜色，则表单也会更好。

Answer 3

在HTML中生成这样的表单有什么真正的价值？据我所知，这样的表格是这样制作的，因此计算机程序可以快速识别不完整或不正确的填充物和/或允许目视检查手动填充的那些。

如果这里真正需要从输入值中生成这样的表单，我认为正确的设计是提供常规表单输入元素，然后处理构建预期格式的提交。

关注点分离非常重要。在这种情况下，强制用户键入字符标签字符将成为一种糟糕的体验，迫使开发人员放置javascript代码只是为了确保输入一个字母后光标可以转到下一个位置。不需要提及哪些版本会是什么样的。

到目前为止，还没有建立这样的组件的原因。原因是UI / UX很差。

希望这对你的决定有所帮助。

Answer 4

我认为，您需要为每个字母创建单独的输入标记，因为我们无法拆分单个输入标记