Как я могу быстрее закодировать несколько текстовых полей в html / css / javascript? - PullRequest
Новая
       0

Как я могу быстрее закодировать несколько текстовых полей в html / css / javascript?

1 голос
/ 20 июня 2020

Мне нужно сделать 30 разных текстовых полей немного дальше друг от друга. Как я мог это сделать? Ниже их всего три, но я не могу просто go пройти и выполнить все 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>

Ответы [ 3 ]

0 голосов
/ 20 июня 2020

идентификатор должен быть уникальным, поэтому лучше применить атрибут класса с тем же именем ко всем полям ввода, которые можно использовать для их стилизации.

также используя l oop in JS you может решить эту проблему. 

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);
}
0 голосов
/ 20 июня 2020

Если вы хотите изменить способ отображения чего-либо и только его внешний вид, просто используйте несколько простых CSS ... 

input {
    display: block,
    margin: 5px,
}

Поле здесь составляет 5 пикселей, вы можете изменить его по мере необходимости. В конце концов, вы можете выбрать go с лучшим селектором, например, <input type="text" ... class="myinputclass">, тогда ваш селектор стиля будет: .myinputclass вместо input.

0 голосов
/ 20 июня 2020

Если вы собираетесь использовать элементы ввода для выполнения определенного действия, вам необходимо убедиться, что id и name каждого из этих элементов различны.

И с другой стороны. Что касается ввода 30 различных текстов, вы можете попробовать использовать динамический c ввод текста в том случае, если вы хотите вводить текст с одинаковыми id и name снова и снова. Попробуйте изучить петли.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...