Ir ao conteúdo
  • Cadastre-se

Vários inputs da mesma tela


Posts recomendados

Olá amigos gostaria de uma dica pois sou novato no ramo web ainda, tenho que criar um formulário com no mínimo 25 inputs, qual seria a melhor maneira para fazer isso ficando uma tela mais organizada e sem aquela barra gigante descendo.

Seria mesmo vários inputs em uma mesma tela pra usuário preencher.
Obrigado desde de já.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Olá,

 

Bom isso  depende do tamanho que você seta os campos inputs e a resolução do usuário ...

se o usuário  vai acessar numa resolução alta, os inputs podem ficar tudo na mesma "tela"... senão vai mesmo criar a barra de rolagem.

 

Uma ótima dica é utilizar um plugin jQuery que transforma seu longo formulário em etapas. 

Parecido com aqueles formulários de cadastro que quando a pessoa preenche os primeiros, clica em "próximo" e mostra novos campos sem ter perdido os dados dos anteriores.. e depois submeter todos.

 

http://www.jquery-steps.com/Examples

Link para o comentário
Compartilhar em outros sites

Caro amigo dif, estou tentando fazer esse jquery desde quando me deu essa ideia, que acaso muito agradecido, porém não consigo deixar o jquery executando como no exemplo desse site.

Ele fica sem formatação não funciona mesmo, tentei várias maneiras, fiz refiz talvez seja porqu sou novato ainda.

Poderia me dar uma ajuda nesses exemplos, estou tentando fazer o "Advanced Form Example", baixei o pacote "Compiled & Minified", mas até agora sem sucesso.

 

Obrigado.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Olá,

 

Recomendo que dê uma lida também no site do Github do plugin. ele contem a documentação para iniciar.

Adaptei o exemplo do site no JSFiddle, use ele para estudar como foi feito.

 

http://jsfiddle.net/kL1spkja/

 

Basicamente você importa o arquivo JS do steps, cria o formulário e a estilização...  e chama o formuilário no jquery.

 

Abraço e bom 2015.

Link para o comentário
Compartilhar em outros sites

Amigo dif tentei lendo o conteúdo mas ainda sem sucesso, teria como me dar uma ajudinha com esse plugin, digo uma ajudinha não querendo que você faça pra mim não, eu preciso aprender. Algo tipo olha começe por aqui depois por ali.

Porque pra mim ainda é meio complicado, isso se não for lhe atrapalhar.

Muito obrigado.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Bom, entendi que não quer algo pronto, e se quisesse não faria pois estraga o espirito do fórum de ajudar.

Então vou explicar o básico do básico.

 

Não sei até onde vai seu conhecimento sobre utilização de plugins jQuery, mas vou ser o mais breve possível nessa primeira impressão.

 

O jQuery permite o uso de N plugins, alguns deles até foram feitos para usar em conjunto.

Antes de importar um plugin, precisa importar o jQuery em si. Para isso podes usar o CDN do próprio jQuery.. ou baixar o arquivo e importar no projeto. 

Depois precisa importar o arquivo do plugin da mesma form que o arquivo anterior. desta maneira:

<!DOCTYPE html><html>    <head>        <title>Demo</title>        <meta charset="utf-8">        <script src="jquery.js"></script>         <script src="jquery.steps.js"></script>    </head>    <body>           </body></html>

Veja as linhas 6 e 7. Respectivamente o Jquery e o plugin steps.

 

OK, importamos para o projeto.. e agora?

 

Agora você cria o container onde será aplicado o plugin dentro do <body>

<div id="exemplo"></div>

Com isso estamos apto para chamar a função que executa o plugin dentro de <head>

$(document).ready(function(){    $("#exemplo").steps();});

Com isso o exemplo em tese já esta funcionando.. mas como pode ver, a função steps() está vazia.

É necessário que você defina algumas opções da função.. para isso você dê uma lida neste site: https://github.com/rstaib/jquery-steps/wiki/Settings

Onde contém todas as opções possíveis do plugin.

 

exemplo:

$("#exemplo").steps({    headerTag: "h3",   //define o elemento que servirá de "aba"    bodyTag: "section", //define o elemento que servirá de container do conteudo    transitionEffect: "slideLeft", //define o tipo de transição    autoFocus: true //define o auto focus});

Agora vamos implementar o exemplo básico para que ele funcione alterando os conteúdos com um slide.

<!DOCTYPE html><html>    <head>        <title>Demo</title>        <meta charset="utf-8">        <script src="jquery.js"></script>         <script src="jquery.steps.js"></script>        <script type="javascript">              $("#exemplo").steps({                     headerTag: "h3",                     bodyTag: "section",                     transitionEffect: "slideLeft",                     autoFocus: true              });        </script>     </head>    <body>       <div id="exemplo">             <h3>Aba 1</h3>    <section>        <p>Conteúdo da primeira aba</p>    </section>    <h3>Aba 2</h3>    <section>        <p>Conteúdo da aba 2.</p>    </section>    <h3>Aba 3</h3>    <section>        <p>Conteúdo da aba 3.</p>    </section></div> </body> </html> 

Resultado:  http://jsfiddle.net/86zg3nxp/

 

ps: a estilização do CSS é com você, ou seja, não é preciso que seja exatamente igual ao exemplo... só utilizei o do exemplo original para não perder tempo.

Link para o comentário
Compartilhar em outros sites

Amigo olha como está ficando o meu, usei essas suas dicas, já fiz várias tentativas e nada até agora.
<!DOCTYPE html><html>    <head>        <title>Demo</title>        <meta charset="utf-8">        <!--<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> JQUERY CDN 1.7-->        <link rel="stylesheet" type="text/css" href="../abas/style.css"> <!--CSS-->        <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <!--JQUERY CDN 1.11-->        <script src="../abas/jquery.steps.min.js"></script>        <script type="javascript">              $("#exemplo").steps({                     headerTag: "h3",                     bodyTag: "section",                     transitionEffect: "slideLeft",                     autoFocus: true              });        </script>     </head>    <body>        <div id="exemplo">            <h3>Aba 1</h3>                <section>                    <p>Conteúdo da primeira aba</p>                </section>                     <h3>Aba 2</h3>                <section>                    <p>Conteúdo da aba 2.</p>                </section>                     <h3>Aba 3</h3>                <section>                    <p>Conteúdo da aba 3.</p>                </section>                 </div>     </body> </html>  

Onde será que estou errando?

Link para o comentário
Compartilhar em outros sites

  • Moderador

Efetuei a molificação e nada ainda, o que sugere que eu faça?

Cara, cometi um erro no meu post #06 na linha 8

 

onde coloquei: 

<script type="javascript">

Altere para:

<script type="text/javascript">

Isso deve fazer funcionar o código.  Até coloquei no meu servidor para testar..  veja: http://coderdif.esy.es/cdh/steps/

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...