jQuery Academy · Aula

Manipulação Dinâmica de Campos de Formulário

Aprenda a adicionar, remover e modificar dinamicamente campos de formulário com base na entrada do usuário, criando interfaces de formulário adaptáveis e interativas usando jQuery.

Manipulação Dinâmica de Campos de Formulário é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Formulários dinâmicos: por quê e como

Os formulários geralmente são estáticos, mas as aplicações web modernas dependem da interatividade. A manipulação dinâmica de campos de formulário permite alterar a estrutura de um formulário em tempo real.

Isso significa que você pode adicionar, remover ou modificar campos de entrada conforme o usuário interage com sua página. O resultado é uma experiência do usuário muito melhor e formulários mais adaptáveis!

Adicionando campos: conceitos básicos

A ideia central por trás da adição de campos é criar novos elementos HTML e inseri-los no Document Object Model (DOM).

Use jQuery para criar elementos (por exemplo, $('')).
Use métodos como .append(), .prepend(), .after() ou .before() para posicioná-los precisamente no formulário.
Lembre-se de fornecer atributos name apropriados aos novos campos, especialmente para o processamento no servidor.

Adicionar novo campo de entrada de e-mail

Vamos adicionar um botão que, quando clicado, gera um novo campo de entrada de e-mail. Observe como criamos a string HTML e, depois, a anexamos.

<div id="email-fields">
  <input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;
  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailField = `
      <input type="email" name="email[]" 
             placeholder="Email ${emailCount}">
    `;
    $('#email-fields').append(newEmailField);
  });
});
</script>

Removendo campos: limpeza

Assim como os usuários podem precisar adicionar campos, muitas vezes também precisam removê-los. Isso mantém o formulário limpo e relevante para suas necessidades.

O método .remove() do jQuery é perfeito para isso. Ele remove completamente do DOM o elemento ou os elementos selecionados, juntamente com quaisquer dados associados e manipuladores de eventos.

Remover entrada específica

Agora, vamos ampliar nosso exemplo anterior. Adicionaremos um botão «Remover» ao lado de cada campo de e-mail. Clicar nele excluirá esse campo específico.

Importante: preste atenção à forma como tratamos os eventos dos botões «Remover» adicionados dinamicamente!

<div id="email-fields">
  <div class="email-group">
    <input type="email" name="email[]" placeholder="Email 1">
    <button class="remove-email">Remove</button>
  </div>
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;

  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailGroup = `
      <div class="email-group">
        <input type="email" name="email[]" 
               placeholder="Email ${emailCount}">
        <button class="remove-email">Remove</button>
      </div>
    `;
    $('#email-fields').append(newEmailGroup);
  });

  // Event delegation for remove buttons
  $('#email-fields').on('click', '.remove-email', function() {
    $(this).parent('.email-group').remove();
  });
});
</script>

Modificando campos: ajustando atributos

Às vezes, você não precisa adicionar nem remover um campo, mas apenas alterar suas propriedades. Pode ser o value, o placeholder, o estado disabled ou até mesmo o name ou o id.

O jQuery fornece .attr() para atributos HTML e .prop() para propriedades do DOM. Frequentemente, .prop() é preferível para atributos booleanos como checked, disabled ou selected.

Alternar estado do campo

Aqui está um exemplo em que uma caixa de seleção controla se um campo de entrada de texto está habilitado ou desabilitado. Usamos .prop() para alterar a propriedade disabled.

<label>
  <input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>

<script>
$(document).ready(function() {
  $('#enable-input').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
  });
});
</script>

Eventos em elementos dinâmicos

Uma armadilha comum: manipuladores de eventos diretos (como $('#myButton').on('click', ...)) são associados apenas aos elementos presentes quando a página é carregada.

Para elementos adicionados dinamicamente, você precisa usar a delegação de eventos. Isso significa associar o ouvinte de eventos a um elemento pai estático e, depois, especificar um seletor para os elementos filhos dinâmicos. O método .on() do jQuery lida muito bem com isso.

Exemplo prático «Adicionar mais»

Combinando o que aprendemos, este é um padrão comum: um botão «Adicionar habilidade» que permite aos usuários listar várias habilidades, cada uma com seu próprio botão «Remover».

Observe o uso de data-id para identificação exclusiva e de .closest() para encontrar o elemento pai a ser removido.

<div id="skill-list">
  <div class="skill-item" data-id="1">
    <input type="text" name="skill[]" placeholder="Skill 1">
    <button class="remove-skill">Remove</button>
  </div>
</div>
<button id="add-skill">Add Skill</button>

<script>
$(document).ready(function() {
  let skillId = 1; // Unique ID for each skill item

  $('#add-skill').on('click', function() {
    skillId++;
    const newSkillItem = `
      <div class="skill-item" data-id="${skillId}">
        <input type="text" name="skill[]" 
               placeholder="Skill ${skillId}">
        <button class="remove-skill">Remove</button>
      </div>
    `;
    $('#skill-list').append(newSkillItem);
  });

  // Event delegation for remove buttons
  $('#skill-list').on('click', '.remove-skill', function() {
    // Prevent removing the very first skill if desired
    if ($('.skill-item').length > 1) {
      $(this).closest('.skill-item').remove();
    } else {
      alert("You need at least one skill!");
    }
  });
});
</script>

Verificação: formulários dinâmicos

Teste sua compreensão sobre a manipulação dinâmica de formulários.

Recapitulação: formulários dinâmicos

Nesta lição, você aprendeu a tornar os formulários mais interativos e fáceis de usar adicionando, removendo e modificando campos dinamicamente com jQuery.

Use .append(), .prepend(), .after() e .before() para adicionar elementos.
Use .remove() para excluir elementos.
Use .attr() e .prop() para modificar os atributos e as propriedades dos elementos.
É fundamental usar a delegação de eventos com .on() para eventos em elementos adicionados ao DOM após o carregamento inicial da página.

Em seguida, vamos explorar a validação de formulários no lado do cliente!

Perguntas Frequentes

A aula “Manipulação Dinâmica de Campos de Formulário” é grátis?

Sim — o texto completo de “Manipulação Dinâmica de Campos de Formulário” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Manipulação Dinâmica de Campos de Formulário”?

Aprenda a adicionar, remover e modificar dinamicamente campos de formulário com base na entrada do usuário, criando interfaces de formulário adaptáveis e interativas usando jQuery. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Manipulação Dinâmica de Campos de Formulário”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Manipulação Dinâmica de Campos de Formulário
Lógica de Validação de Formulários no Cliente
Envio e Feedback de Formulários via AJAX

← Voltar para jQuery Academy