Mini Curso Formulários em Bootstrap

miniatura-para-video-do-youtube

Aprenda a criar formulários Responsivos, Bonitos, Funcionais e que facilitam o uso por parte dos Usuários.

 

 

PARA BAIXAR OS ARQUIVOS USADOS NESTA SÉRIE VÁ ATE O FIM DESTE ARTIGO

 

 

Nesta série de vídeos, eu explico vários aspectos necessários para que um formulário totalmente adaptável a diversos tamanhos de tela:

  • As Colunas da Grid do Bootstrap com tamanhos diferentes e variáveis (xs, sm, md, lg)
  • Os Labels alinhados e com espaçamento
  • Formulário Horizontal
  • As classes (form-control, control-label, form-group)
  • Campos dentro de Painéis (destacando um formulário)
  • Addons do Bootstrap (adicionam informação para o usuário)
  • Títulos, subtítulos, selects e botões
  • São mais de 90 minutos de aulas, cobrindo o que mais se usa para criar formulários com o Bootstrap. Eu explico tudo com detalhes, sem correr e sem deixar nada para trás. Quero realmente que você aprenda.

    Quem deve aprender a criar Formulários em Boostrap

    Se você é um Webdesigner, cria sites, sabe que sempre existem formulários de contato, onde o usuário envia dúvidas, sugestões, etc. Alguns site ainda possuem formulários de Cotação, como por exemplo, sites de Seguradoras. Os formulários também estão presentes em sites de lojas, onde o usuário pode pedir um Orçamento Online e em muitos outros casos. Se você é um Desenvolvedor Front End, trabalhando com aplicativos e soluções online. Neste caso, a presença de formulários é essencial, pois praticamente todos sistemas tem Cadastro de Usuários, Cadastro de Administradores, Relatórios, Campos de Edição, etc.

    Qual a importância de se saber como criar formulários em Bootstrap?

    É um fato conhecido que os formulários fazem parte do dia a dia de qualquer pessoa que trabalhe com desenvolvimento de sites e aplicações online. Também está claro que esta é uma das áreas mais delicadas na hora da criação. Formulários são mais complexos tanto para se criar o código, quanto para deixá-los com boa Usabilidade.

    Falando em Usabilidade, uma das tarefas mais chatas para um usuário final é preencher um formulário. Agora imagine se o formulário está desalinhado, com labels fora do lugar, ou pior ainda: que não seja responsivo. Isso gera abandono do site/sistema e você perde a chance de coletar dados do usuário, uma das tarefas mais importantes atualmente.

    Formulários também servem para enviar a informação coletada para um Banco de Dados, usando por exemplo, PHP. Agora mão na massa e conte comigo para te ajudar. Se tiver dúvidas, deixe seu comentário aí em baixo.

    Aula 01 – Apresentando o Layout

    Aula 02 – Os Primeiros Dados

    Aula 03 – Os Painéis

    Aula 04 – Input Addons

    Aula 05 – Finalizando

     

     

    Agora que você já sabe criar um formulario responsivo em Bootstrap, aplique este conhecimento que você adquiriu. Se quiser, pode até deixar um link para seus exercícios nos comentários abaixo. Nestas aulas não chegamos a enviar os dados. Entretanto você pode aprender PHP com uma série de vídeo aulas gratuitas que eu mesmo te enviarei por email.

     

     

    Baixando os arquivos

    Você pode baixar os arquivos destas aulas para estudar. Lembre-se sempre que é melhor praticar do que apenas copiar e colar. Use estes arquivos como ajuda para aprender a escrever seus próprios códigos.

    Baixar os Arquivos das Aulas

     

    Compartilhe

    Rodrigo Milano

    Trabalho há 14 anos com criação e desenvolvimento de sites e sistemas online.

    Você pode gostar...

    • Diego B.

      Show de bola!! Valeu, Rodrigo.

    • Wemerson

      Olá Milano, gostei demais de suas aulas de criação de formulários. Não estou conseguindo trabalhar com abas (Tab-pane), tem algum material ou uma ajuda para mim. Desde já grato.

      • Rodrigo Milano

        Wemerson, você já criou o código? Se sim, tem ele online para eu analisar? Pode usar o Codepen ou o JsBin. Ambos trabalham com Bootstrap e você pode mostrar.
        Se está com algum problema, pode ser que não esteja carregando o jQuery ou o bootstrap.js

        Procurei um exemplo e achei este: http://codepen.io/Finy/pen/PwzmmB
        Veja se serve.

    • Lourival Alcantara

      Olá Rodrigo Milano,

      Parabéns pelos vídeos, pois são claros e objetivos, está me ajudando muito!

      Sucesso!

      Lourival

      • Rodrigo Milano

        Obrigado, Lourival.
        Fico muito feliz que esteja te ajudando.

    • As suas aulas me inspiram a aprender um pouco mais a cada dia. São pessoas como você, que essa área precisa, pessoas que realmente se importam com os outros. Por favor, não pare de fazer vídeos. Um grande abraço e muito obrigado pelo seu tempo e dedicação nas aulas.

      • Rodrigo Milano

        Muitíssimo obrigado, Miquéias. Fico feliz que tenha te ajudado!

    • Mauricio Barros

      Parabéns pelo belo trabalho, me ajudou muito a entender e começar a utilizar o Bootstrap.

      • Rodrigo Milano

        Obrigado Mauricio Barros. Espero que ajude a todos que precisam entender melhor sobre o Bootstrap.