Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

manolegal

Criar formulario de cadastro em abas

Por , em Desenvolvimento frontend

Recommended Posts

manolegal    12

manolegal
Postado

Olá amigos do forum.

Estou precisando criar um formulario de cadastro em 03 abas. Andei pesquisando, mas como sou iniciante nao consegui encontrar algum material que me auxiliasse a começar este trabalho. Se alguem tiver alguma dica de algum tópico, desde já agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Teteu Six    4

Teteu Six
Postado

você pode postar uma imagem de como esse formulario vai ficar ?

Queria ver antes de dar uma resposta.

 

Verdade eu tenho um sistema de abas de fácil aplicação, entendimento e desenvolvimento... é javascript simples, html e css...

Post imagens, aew fixa mais facil pra ajudar.

=D

 

Vou procurar aqui no meu Notebook, e daew eu posto aqui!!

 

=D

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Tá aí um exemplo:

CSS

 <style>
     #abas{
     margin:0;
     padding: 0;
     width: 500px;
     background:#000;
   }

   #abas li{
     display: inline;
   }
   #abas li a{
     display: block;
     width: auto;
     padding: 3px 8px;
     margin: 0 1px 0 0;
     width: 200px;
     float: left;
     background:#D1D1D1;
     color: #797979;
     text-decoration: none;
     text-indent: 5px;
   }
   #abas li a.selected{
     background: #888;
     color:#FFF;
     cursor: default;
     text-decoration: underline;
   }


   .contaba{
     clear: both;
   }
   #tab1, #tab2 {margin:0 1px 0 0; padding:0; width: 417px; 
     padding: 3px 8px; background:#888; }

   label {display:block;}
   input[type=text] {width:410px;}


 </style>

HTML

<body>
   <ul id="abas">
               <li><a href="#tab1">Cadastro Pessoa Física</a></li>
               <li><a href="#tab2">Cadastro Pessoa Jurídica</a></li>
   </ul>

<!-- conteudo das abas -->
   <div id="tab1" class="contaba">
   <a name="tab1" />
     <label>Nome: </label>
     <input type="text">
     <label>CPF: </label>
     <input type="text">
     <button>Enviar</button>
   </div>
   <div id="tab2" class="contaba">
   <a name="tab1" />
     <label>Razão social: </label>
     <input type="text">
     <label>CNPJ: </label>
     <input type="text">
     <button>Enviar</button>
   </div>
</body>

 

jQuery

   $(function(){
   // abas
   // oculta todas as abas
   $("div.contaba").hide();
   // mostra somente  a primeira aba
   $("div.contaba:first").show();
   // seta a primeira aba como selecionada (na lista de abas)
   $("#abas a:first").addClass("selected");

   // quando clicar no link de uma aba
   $("#abas a").click(function(){
   // oculta todas as abas
   $("div.contaba").hide();
   // tira a seleção da aba atual
   $("#abas a").removeClass("selected");

   // adiciona a classe selected na selecionada atualmente
   $(this).addClass("selected");
   // mostra a aba clicada
   $($(this).attr("href")).show();
   // pra nao ir para o link
   return false;
   });
   });

 

Tá bem mastigadinho. É só estudar ;)

 

Obs: o código HTML eu adaptei para criar um cadastro porém, o jQuery, tem como fonte: www.tuliofaria.net

Compartilhar este post

Link para o post
Compartilhar em outros sites

Teteu Six    4

Teteu Six
Postado

Felipe eu já usei esse em um site, cara não deu muito certo funcionou mas, não ficou muito boom.. sou novo na área mas... o que eu usei funcionou melhor que esse e o visual também...

Como já disse, sou novo na área posso me enganar, mas já usei esse e o que eu tenho salvo, e eu prefiro a segunda opção.

Só não postei ainda, por que eu acho que tenho ele só lá na agência.

Mas se for muita pressa use o que o Felipe postou

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dii    15

Dii
Postado

Teteu Six.

Você adicionou o biblioteca jQuery ao seu documento HTML?

 

<script type="text/javascript" src="url-do-jquery"></script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Teteu Six    4

Teteu Six
Postado

O sistema de abas que eu uso agora é o que está sendo usado nessa página (Yogoway - Loja), quando você clica nas cidades...

O efeito de transição aew você escolhe, mas a marcação das abas é +/- assim... vou volocar o codigo para você ver...

 

jQuery


<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#city1').click(function() {
		jQuery('#city2, #city3, #city4, #city5').removeClass("citySelected")
		jQuery('#city1').addClass('citySelected');
		jQuery('#contentShopCity2, #contentShopCity3, #contentShopCity4, #contentShopCity5').hide('slow');
		jQuery('#contentShopCity1').slideDown('slow');
	});
	jQuery('#city2').click(function() {
		jQuery('#city1, #city3, #city4, #city5').removeClass("citySelected")
		jQuery('#city2').addClass('citySelected');
		jQuery('#contentShopCity1, #contentShopCity3, #contentShopCity4, #contentShopCity5').hide('slow');
		jQuery('#contentShopCity2').slideDown('slow');
	});
	jQuery('#city3').click(function() {
		jQuery('#city1, #city2, #city4, #city5').removeClass("citySelected")
		jQuery('#city3').addClass('citySelected');
		jQuery('#contentShopCity1, #contentShopCity2, #contentShopCity4, #contentShopCity5').hide('slow');
		jQuery('#contentShopCity3').slideDown('slow');
	});
	jQuery('#city4').click(function() {
		jQuery('#city1, #city2, #city3, #city5').removeClass("citySelected")
		jQuery('#contentShopCity1, #contentShopCity2, #contentShopCity3, #contentShopCity5').hide('slow');
		jQuery('#city4').addClass('citySelected');
		jQuery('#contentShopCity4').slideDown('slow');
	});
	jQuery('#city5').click(function() {
		jQuery('#city1, #city2, #city3, #city4').removeClass("citySelected")
		jQuery('#contentShopCity1, #contentShopCity2, #contentShopCity3, #contentShopCity4').hide('slow');
		jQuery('#city5').addClass('citySelected');
		jQuery('#contentShopCity5').slideDown('slow');
	});

});
</script>

 

Html


	<ul id="menuCity">

		<li id="city" style="margin-left: 0px;">
			<a id="city1" class="citySelected" href="javascript: void(0)">
			Marechal Cândido Rondon - PR
			</a>
		</li>	

		<li id="city">
			<a id="city2" href="javascript: void(0)">
			Toledo - PR
			</a>
		</li>

		<li id="city">
			<a id="city3" href="javascript: void(0)">
			Guarapuava - PR
			</a>
		</li>	

		<li id="city">
			<a id="city4" href="javascript: void(0)">
			Cascavel - PR
			</a>
		</li>	

	</ul>

               <!-- Shop One -->
	<div id="contentShopCity1">

	</div>

               <!-- Shop Two -->
	<div id="contentShopCity2">

	</div>

               <!-- Shop Three -->
	<div id="contentShopCity3">

	</div>

               <!-- Shop Four -->
	<div id="contentShopCity4">

	</div>

 

CSS


#city {
   display: inline;
   float: left;
   height: 22px;
   margin-left: 35px;
   position: relative;
   text-align: center;
   width: auto;
}
#city1, #city2, #city3, #city4, #city5 {
   float: left;
   height: 22px;
   position: relative;
   text-align: center;
   width: auto;
}
#city1:hover , #city2:hover , #city3:hover , #city4:hover , #city5:hover {
background: url('YOURIMAGE') repeat-x scroll 0 0 transparent;
text-decoration: none;
}
.citySelected 
{
background: url('YOURIMAGE') repeat-x scroll 0 0 transparent;
}
#city1 .citySelected , #city2 .citySelected , #city3 .citySelected , #city4 .citySelected , #city5 .citySelected {
background: url('YOURIMAGE') repeat-x scroll 0 0 transparent;
text-decoration: none;
}

#contentShopCity1, #contentShopCity2, #contentShopCity3, #contentShopCity4, #contentShopCity5 {
clear: both;
       /** min-height IE+FF **/
       min-height: 300px;
       height: 300px;
       height: auto !important;
       /****/
       margin-left: 80px;
       margin-top: 20px;
overflow: hidden;
       position: relative;
       width: 805px;
}

 

 

Espero ter ajudado! =D

Compartilhar este post

Link para o post
Compartilhar em outros sites

manolegal    12

manolegal
Postado

Ola Amigos.

Utilizando o modelo do crf_h0m3r consegui criar o formulario em abas. Neste form irei cadastrar pessoas, sendo que todas as abas referem-se ao mesmo cadastro. Na ultima aba, inseri um botao para submeter o formulario, mas mesmo preenchendo os campos, me retorna como se os campos nao foram preenchidos. Ha alguma diferença em relação ao formulario normal?

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Você pode criar um campo invisível (hidden) e ir passando as informações até a hora que o botão for clicado.

Procure por "Passando valores entre páginas, campo hidden" e dê uma olhada nesse link que pode ajudar, aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

manolegal    12

manolegal
Postado

Obrigado pelo retorno. Muito bom o exemplo que voce indicou. Na verdade, estou utilizando apenas dois forms, sendo o primeiro que faço o cadastro e o segundo que valido os dados.

Form1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cadastro de Pessoas</title>

<script src="js/jquery-1.2.6.js" type="text/javascript" ></script>
<script src="js/abas.js" type="text/javascript" ></script>

<style>
     #abas{
     margin:0;
     padding: 0;
     width: 1000px;
     background:transparent;
   }

   #abas li{
     display: inline;
   }
   #abas li a{
     display: block;
   .............. (restante do style)
</style>

</head>

<BODY LANG="pt-BR" DIR="LTR"><br>
<body onload="document.getElementById('pessoa_nome').focus()">

<form id="pessoas_cadastro" name="pessoas_cadastro" method="post" action="pessoas_cadastrar.php" onsubmit="return validaCampo(); return false;">

<td><div align="center">
<p><font color="#0084d1"><span style="background: transparent"><font face="Courier New, monospace"><font size=4>
  <b>Cadastro Geral de Pessoas</b></font></font><font size=6></font></span></font></p>
<p> </p>
</div></td>


   <ul id="abas">
               <li><a href="#pessoal">PESSOAL</a></li>
               <li><a href="#residencial">RESIDENCIAL</a></li>
               <li><a href="#economico">ECONOMICO</a></li>
   </ul>


<!-- conteudo das abas -->
<div id="pessoal" class="contaba">
<a name="pessoal" />
<table width="100%" border="1">
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier">Nome:</font></div></td>
   <td width="54%"><INPUT TYPE=TEXT id="pessoa_nome" NAME="pessoa_nome" SIZE=50 MAXLENGTH=50 autocomplete="off" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)"><font color="#FF0000"> *</font></td>
</tr>
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier, mono">Data de Nascimento:</font><font color="#333333"></font></div></td>
   <td width="54%"><INPUT TYPE=TEXT id="data_nascimento" NAME="data_nascimento" SIZE=12 MAXLENGTH=10 onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)" onkeypress="formatar_mascara(this, '##/##/####')" onKeyUp="this.value=formateadata(this.value);"><font color="#FF0000" size=2> (Somente numeros) </font><font color="#FF0000"> *</font></td>
</tr>
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier">CI:</font><font color="#333333"></font></div></td>
   <td width="54%"><INPUT TYPE=TEXT style="text-transform: uppercase" id="carteira_identidade" NAME="carteira_identidade" SIZE=20 MAXLENGTH=10 onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="formatar_mascara(this, '§§§§§§§§§§')" autocomplete="off"><font color="#FF0000"> **</font></td>
</tr>
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier">CPF:</font><font color="#333333"></font></div></td>
   <td width="54%"><INPUT TYPE=TEXT style="text-transform: uppercase" NAME="cpf" id="cpf" SIZE=20 MAXLENGTH=14 onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="formatar_mascara(this, '§§§.§§§.§§§-§§')" onblur="return validacpf()" autocomplete="off"><font color="#FF0000" size=2> (Somente numeros) </font><font color="#FF0000"> **</font></td>
</tr>
<tr>
<td><div align="right"><font face="Courier New, Courier">Sexo:</font></div></td>
<td><select name="sexo" class="select" id="sexo" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')">
   <option value="">-- Selecione --</option>
   <option value="Masculino">Masculino</option>
   <option value="Feminino">Feminino</option>
   </select><font color="#FF0000"> *</font>
</td>
</table>
</div>

<div id="residencial" class="contaba">
<a name="residencial" />
<table width="100%" border="1">
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier">Nome2:</font></div></td>
   <td width="54%"><INPUT TYPE=TEXT id="pessoa_nome" NAME="pessoa_nome" SIZE=50 MAXLENGTH=50 autocomplete="off" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)"><font color="#FF0000"> *</font></td>
</tr>
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier, mono">Data de 2:</font><font color="#333333"></font></div></td>
   <td width="54%"><INPUT TYPE=TEXT id="data_nascimento" NAME="data_nascimento" SIZE=12 MAXLENGTH=10 onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)" onkeypress="formatar_mascara(this, '##/##/####')" onKeyUp="this.value=formateadata(this.value);"><font color="#FF0000" size=2> (Somente numeros) </font><font color="#FF0000"> *</font></td>
</tr>
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier">Nome Pai:</font><font color="#333333"></font></div></td>
   <td width="54%"><INPUT TYPE=TEXT NAME="nome_pai" id="nome_pai" SIZE=50 MAXLENGTH=50 autocomplete="off" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')"></td>
</tr>
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier">Nome Mae:</font><font color="#333333"></font></div></td>
   <td width="54%"><INPUT TYPE=TEXT NAME="nome_mae" id="nome_mae" SIZE=50 MAXLENGTH=50 autocomplete="off" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')"></td>
</tr>
</table>
</div>

<div id="economico" class="contaba">
<a name="economico" />
<table width="100%" border="1">
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier">Nome3:</font></div></td>
   <td width="54%"><INPUT TYPE=TEXT id="pessoa_nome" NAME="pessoa_nome" SIZE=50 MAXLENGTH=50 autocomplete="off" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)"><font color="#FF0000"> *</font></td>
</tr>
<tr>
   <td width="46%"><div align="right"><font color="#333333" face="Courier New, Courier, mono">Data de Nascimento3:</font><font color="#333333"></font></div></td>
   <td width="54%"><INPUT TYPE=TEXT id="data_nascimento" NAME="data_nascimento" SIZE=12 MAXLENGTH=10 onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')" onkeypress="return handleEnter(this, event)" onkeypress="formatar_mascara(this, '##/##/####')" onKeyUp="this.value=formateadata(this.value);"><font color="#FF0000" size=2> (Somente numeros) </font><font color="#FF0000"> *</font></td>
</tr>
</table>
</div>

<tr>
   <td> </td>
   <td><INPUT TYPE=SUBMIT NAME="cadastrar" VALUE="Gravar" STYLE="width: 2.68cm; height: 0.85cm"></td>
</tr>


</form>
</body>
</html>

 

E no Form2 (pessoas_cadastrar.php) faço a validaçao.

$nome = $_POST ["pessoa_nome"];
$data_nascimento = $_POST ["data_nascimento"];
..... demais campos do form1

 

Nesta situaçao como faria para que os dados passados via POST fossem validados?

OBS: Alguns campos estao com nomes repetidos, mas por enquanto estou somente fazendo testes, depois vou altera-los. No aguardo. Valeu.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito