Crie formulários com material design

Um dos aspectos mais fundamentais em qualquer aplicação são os formulários, pois permitem-nos captar a informação do utilizador relativamente ao modelo de negócio que gere a nossa aplicação.

Design material Combinando as melhores práticas de design clássico e a implementação de efeitos originais e inovadores, eles nos permitem criar formas que não só têm uma boa aparência, mas também fornecem uma funcionalidade adicional ao nosso aplicativo.

Vamos ver então como criar um formulário básico usando os princípios de Design material.

RequisitosAntes de iniciar este tutorial, recomendamos dar uma olhada na introdução do Material Design aqui. Contaremos com o framework denominado Materialize e é importante que entendamos como funciona o container de nossa aplicação.

O contêiner Materialize

O recipiente de Materializar funciona da mesma maneira que funciona BootstrapCaso já tenhamos tocado neste framework, não teremos problemas em entender como ele funciona, mas para aqueles que não o conhecem, é principalmente um contêiner de 12 colunas, no qual podemos dizer aos nossos elementos quantas colunas ele pode cobrir.

Tem uma hierarquia bastante semelhante, tem uma classe de contêiner, seguida por uma classe de linha e finalmente as classes aplicáveis ​​às colunas, vamos ver como seria a estrutura de uma linha completa, seguida por uma linha que conteria dois elementos.

Este é um div de 12 colunasEste é um div de 6 colunasEste é um div de 6 colunas

Como vemos é bastante simples, só temos que deixar claro que temos doze colunas para trabalhar e assim manter nosso conteúdo organizado e visualmente melhor apresentado. Já vendo como funciona o container, vamos prosseguir com a construção do nosso formulário básico.

Criação de formulário

Vamos criar um HTML com nossa estrutura padrão e a primeira coisa que faremos é incluir as bibliotecas de ambos CSS como de JavaScript do Materializar e desta forma aplicamos a funcionalidade que desejamos ao nosso formulário.

É importante incluirmos jQuery em sua última versão para o correto funcionamento do framework, além disso, devemos incluir uma linha especial que nos permitirá usar seus ícones.

Assim que tivermos as bibliotecas incluídas, fica a construção do nosso formulário, a maioria dos elementos terá uma estrutura semelhante a seguinte, onde teremos a aula fileira, seguido pela aula repolho e o número de colunas que o elemento ocupará.

NomeSobrenome

Materializar Também nos permite validar campos, no caso de e-mail indicando o tipo que podemos atribuir às mensagens caso a informação seja válida ou não, vejamos:

 E-mail

Também podemos incluir os famosos ícones, um recurso retirado do design plano que dá ao nosso aplicativo um maior nível de usabilidade. Para isso, usaremos a tag com a classe específica:

 o email

Finalmente, nenhum formulário básico está completo sem o famoso textarea, caixas de texto que nos permitem coletar muito mais informações, como o endereço de um usuário ou descrições de algum conteúdo.

 Área de Texto

Uma vez com nosso formulário preenchido, só temos que testar seu funcionamento, como Materializar Ele incorpora muitos efeitos à nossa forma e o torna altamente visual, vamos ver como fica no seguinte GIF.webp animado.

Como vemos a construção de um formulário básico usando a linguagem de design Design material e apoiado por uma estrutura como Materializar Pode ser uma tarefa que podemos realizar em minutos e obtendo um resultado de qualidade que não só proporciona um melhor visual, mas também funcionalidades que só os melhores aplicativos possuem.

O melhor é que você baixe e experimente, com certeza vai gostar.

form-material-design.html 2,75 K 647 downloads