Criação Dinâmica de Caixas de Texto com JavaScript

Caixas de texto, ou campos de entrada, são elementos fundamentais da interface do usuário. Embora o HTML forneça o básico, o JavaScript permite o controle e a manipulação dinâmica. Este artigo demonstra a criação e a gestão de caixas de texto usando HTML e JavaScript, cobrindo caixas de texto únicas, múltiplas e geradas dinamicamente.

Sumário

1. Criando uma Caixa de Texto Usando HTML
2. Criando uma Caixa de Texto Usando JavaScript
3. Criando Múltiplas Caixas de Texto Usando JavaScript
4. Estilizando Caixas de Texto
5. Conclusão

Criando uma Caixa de Texto Usando HTML

A abordagem mais simples é diretamente no seu HTML. Isso é adequado para caixas de texto estáticas.

<input type="text" id="myTextBox" placeholder="Digite o texto aqui">

Isso cria uma caixa de texto com o ID “myTextBox” e um espaço reservado. type="text" especifica que é uma entrada de texto.

Criando uma Caixa de Texto Usando JavaScript

O JavaScript fornece criação dinâmica, ideal para um número de caixas de texto determinado em tempo de execução ou manipulação dinâmica.

function createTextBox() {
  const textBox = document.createElement("input");
  textBox.type = "text";
  textBox.id = "dynamicTextBox";
  textBox.placeholder = "Digite o texto dinâmico aqui";
  document.body.appendChild(textBox);
}

createTextBox();

document.createElement("input") cria o elemento. Definimos os atributos e o anexamos ao corpo do documento.

Criando Múltiplas Caixas de Texto Usando JavaScript

Expandindo o exemplo anterior, podemos criar várias caixas de texto. Isso é útil para formulários com campos variáveis ou interfaces de usuário dinâmicas.

function createMultipleTextBoxes(numTextBoxes) {
  const container = document.createElement('div'); // Cria um contêiner para melhor organização
  for (let i = 0; i < numTextBoxes; i++) {
    const textBox = document.createElement("input");
    textBox.type = "text";
    textBox.id = `dynamicTextBox${i}`;
    textBox.placeholder = `Caixa de Texto ${i + 1}`;
    container.appendChild(textBox);
    container.appendChild(document.createElement('br')); 
  }
  document.body.appendChild(container);
}

createMultipleTextBoxes(3);

Um loop for gera várias caixas de texto. Um contêiner div é usado para melhor estrutura e estilo.

Estilizando Caixas de Texto

Você pode estilizar caixas de texto usando CSS. Aqui estão alguns exemplos:

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

Este CSS adiciona largura, preenchimento, borda e cantos arredondados a todas as caixas de texto.

Conclusão

O JavaScript oferece controle poderoso sobre as caixas de texto, permitindo aplicativos web dinâmicos e responsivos. Combine isso com CSS para estilo e crie interfaces amigáveis. Lembre-se das melhores práticas de acessibilidade ao projetar formulários.