如何在html/css/javascript中更快地编写多个文本框？_Javascript_Html_Css

如何在html/css/javascript中更快地编写多个文本框？

javascript html css

如何在html/css/javascript中更快地编写多个文本框？,javascript,html,css,Javascript,Html,Css,我需要使30个不同的文本输入彼此稍微远离。我怎么能这样做？下面只有三个，但我不能把30个都做完 <!DOCTYPE html> <html> <head> <title>Worksheet</title> <style type="text/css"> .center { display: block; margin-lef

我需要使30个不同的文本输入彼此稍微远离。我怎么能这样做？下面只有三个，但我不能把30个都做完

<!DOCTYPE html>
<html>
<head>
    <title>Worksheet</title>
    <style type="text/css">

        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
        input::placeholder{
            color: #d9faa7;
        }

    </style>
</head>
<body>
    <img src="A.png" class = "center">
    <form>
        <input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:389px'>
        <input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:446px'>
        <input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:503px'>

    </form>


</body>
</html>


工作表
.中心{
显示：块；
左边距：自动；
右边距：自动；
宽度：50%；
}
输入：：占位符{
颜色：#d9faa7；
}

如果要使用输入元素执行特定操作，则需要确保每个元素的

id

和

名称

不同

另一方面，关于30种不同的文本输入，您可以尝试使用动态文本输入，以防您想反复输入具有相同

id

和

name

的文本。尝试研究循环。

如果要使用输入元素执行特定操作，则需要确保每个元素的

id

和

名称

不同

另一方面，关于30种不同的文本输入，您可以尝试使用动态文本输入，以防您想反复输入具有相同

id

和

name

的文本。尝试研究循环。

id应该是唯一的，因此最好将具有相同名称的类属性应用于所有输入字段，这些字段可用于设置它们的样式

在JS中使用loop也可以解决这个问题

let form = document.querySelector("form");
let node;
let textInputId;
for(let i=0;i<30;i++)
{
  node = document.createElement('input');
  textInputId= 'fname'+i;
  node.setAttribute('id',textInputId);
  node.setAttribute('type',"text");
  node.setAttribute('name',"fname");
  node.setAttribute('size',"2");
  form.appendChild(node);
}

let form=document.querySelector（“表单”）；
let节点；
让文本输入；
对于（让i=0；i来说，id应该是唯一的，因此最好将具有相同名称的class属性应用于所有输入字段，这些字段可以用来设置它们的样式
在JS中使用loop也可以解决这个问题
let form = document.querySelector("form");
let node;
let textInputId;
for(let i=0;i<30;i++)
{
  node = document.createElement('input');
  textInputId= 'fname'+i;
  node.setAttribute('id',textInputId);
  node.setAttribute('type',"text");
  node.setAttribute('name',"fname");
  node.setAttribute('size',"2");
  form.appendChild(node);
}

let form=document.querySelector（“表单”）；
let节点；
让文本输入；
对于（让i=0；i如果你想改变某些东西的显示方式和外观，只需使用一些简单的CSS
input {
    display: block,
    margin: 5px,
}

这里的边距是5px，您可以根据需要进行更改。最后，您可能会决定使用更好的选择器，即
，那么您的样式选择器将是：.myinputclass
，而不仅仅是输入
如果您想更改某些内容的显示方式和外观，只需使用一些简单的CSS即可
input {
    display: block,
    margin: 5px,
}

这里的边距是5px，您可以根据需要进行更改。最后，您可能会决定使用更好的选择器，即
，那么您的样式选择器将是：。myinputclass
，而不仅仅是输入
ID
必须是唯一的。您可以拥有一个类
，并且在js
中可以循环和附加到form
typo:id和name必须是唯一的id
必须是唯一的。你可以有一个class
，在js
中，你可以循环并附加到form
typo:id和name必须是唯一的