1
resposta

[Projeto] Como colocar vários input juntos?

Boa noite! Preciso fazer preenchimentos eletrônicos de entrada e saída de caminhõe usando “input”, mas não estou conseguindo. Eu preciso fazer igual fiz no lado 2, só que ao invés de tabela, como fiz, tem que ser com input, para preenchimento de campos.

Tentei fazer outro input no lado 1, mas ele apareceu no centro e não consegui movimentá-lo pra cima como eu coloquei o primeiro input. Ainda, preciso fazer um retângulo com vários campos (input) para preenchimentos. No total são 19 campos.

Muito obrigado!


Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá! Entendi que você está tentando colocar vários inputs juntos e está tendo dificuldades para posicionar os elementos.

Primeiro, é importante lembrar que no HTML, os elementos são empilhados de cima para baixo por padrão. Para alterar isso, você pode usar CSS.

Vou te dar um exemplo de como você pode criar um formulário com vários inputs usando HTML e CSS.

<form>
  <div class="input-group">
    <label for="campo1">Campo 1</label>
    <input type="text" id="campo1" name="campo1">
  </div>
  <div class="input-group">
    <label for="campo2">Campo 2</label>
    <input type="text" id="campo2" name="campo2">
  </div>
  <!-- Repita o bloco acima para os 19 campos -->
</form>

E no CSS:

.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px; /* Espaçamento entre os campos */
}

Nesse exemplo, cada grupo de entrada (label + input) é envolvido por uma div com a classe "input-group". No CSS, definimos essa classe para ter uma direção de flexão em coluna (ou seja, os elementos dentro dela são empilhados verticalmente), e um espaço entre cada grupo.

Espero que isso te ajude a criar o formulário que você precisa! Lembre-se de que o CSS é uma ferramenta poderosa para controlar o layout e a aparência dos seus elementos HTML, então não hesite em experimentar e ver o que funciona para você.

Espero ter ajudado e bons estudos!