Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17513
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Formulário dividido em várias etapas, passos, partes ou steps

31-05-2015 21:58

Nesse post mostro como fazer um formulário dividido em diversos pedaços.
No caso de ter um formulário com muitos campos para serem preenchidos, pode ser necessário o uso de etapas para facilitar o preenchimento.
O script em jQuery usa o display none e o display block para ocultar blocos com alguns campos do formulário.

<script src="jquery.js"></script> <style> .passo2, .passo3{ display:none; } </style> <script> $(function() { $('.button_passo1').click(function() { $('.passo1').show(); $('.passo2, .passo3').hide(); }); $('.button_passo2').click(function() { $('.passo2').show(); $('.passo1, .passo3').hide(); }); $('.button_passo3').click(function() { $('.passo3').show(); $('.passo1, .passo2').hide(); }); }); </script> <form> <div class="passo1"> nome <input type="text" name="nome" value="" /> <br /> <input type="button" class="button_passo2" value="seguinte" /> </div> <div class="passo2"> email <input type="text" name="email" value="" /> <br /> <input type="button" class="button_passo1" value="voltar" /> <input type="button" class="button_passo3" value="seguinte" /> </div> <div class="passo3"> mensagem <textarea name="mensagem"></textarea> <br /> <input type="button" class="button_passo2" value="voltar" /> <input type="submit" /> </div> </form>

4
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]