Mini Curso Formulários em Bootstrap

Escrito por

miniatura para video do youtube - Mini Curso Formulários em Bootstrap

Compartilhe este artigo

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email

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:

[li]As Colunas da Grid do Bootstrap com tamanhos diferentes e variáveis (xs, sm, md, lg)[/li] [li]Os Labels alinhados e com espaçamento[/li] [li]Formulário Horizontal[/li] [li]As classes (form-control, control-label, form-group)[/li] [li]Campos dentro de Painéis (destacando um formulário)[/li] [li]Addons do Bootstrap (adicionam informação para o usuário)[/li] [li]Títulos, subtítulos, selects e botões[/li]
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

Curso Elementor Grátis

Aprenda o construtor de sites mais usado atuamente

Explore mais artigos

Como personalizar as cores dos botões do Elementor

Você já precisou inserir vários botões em um site feito com o Elementor? Já notou que isso pode ser uma tarefa repetitiva e que te toma tempo? Sim, porque a cada botão inserido é preciso: Escolher a cor do texto Escolher a cor do fundo Escolher a cor do texto pro mouse hover Escolher a

Compartilhe

Tirar os números do menu hambúrguer no Elementor

Em algumas versões do Elementor tem aparecido 3 números ao lado das linhas do menu hamburger. Eu pesquisei na internet e encontrei uma solução no Reddit. Foi postada pelo usuário Kaddidle neste thread. Veja na imagem como está aparecendo com o bug Para corrigir este bug, você precisará inserir um código de CSS na área

Compartilhe

Quer dar um gás no seu site?

Vamos bater um papo que eu te ajudo

CTA post - Mini Curso Formulários em Bootstrap