带有多列的html文本字段

Question

我正在设计一个html表单，我必须设计一个包含多列的文本字段，如下图所示，

有一个替代解决方案，如下面的代码片段，但它太长了，我希望解决方案在一行中像其他html元素一样提供

<input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;>"<input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;"><input type="text" maxlength="1" style="width:20px;">

Answer 1

你想要的是一个组件。所以你应该考虑使用像vue.js，react.js或webcomponents这样的框架。

编辑：

好的，用jquery尝试这样的东西。如果你也不想使用jquery它有点复杂，但想法仍然是相同的：

let $b = $("<form>");

for(let i = 0; i < 5; i++){
    let $n = $("<input type='text'>");
    $n.attr("name","inp"+i);
    $n.attr("id","inp"+i);
    $b.append($n);
}

$("#someplaceinyourapp").append($b)