GainTime

Formulários

Procuramos facilitar algumas coisas na hora de inserir e validar dados. :D

GA IN TI ME

GT Form

O GainTime simplificou a estilização de formulários assumindo que, se o form é da classe .gt-form, todos os seus inputs devem ser estilizados. Aplica max-width: 500px.

Experimente adicionar as classes .small, .medium, .large ou .full.

<form class="gt-form" action="myAction" method="post"> ... </form>
Este campo é apenas leitura

GT Form Inline

Substituindo .gt-form por .gt-form-inline você vai conseguir formulários com todo o seu conteúdo alinhado à esquerda.

É aplicado display: inline-block; width: auto a todos (*) os elementos de .gt-form-inline.

<form class="gt-form-inline" action="myAction" method="post"> ... </form>

Status

Como desabilitamos a estilização outline padrão dos browsers, atribuimos características próprias a alguns status.

:focus, .has-focus

.has-error

.has-warning

disabled

readonly

Exemplos

Inputs livres

Caso você queira aplicar a estilização dada aos inputs do .gt-form a inputs livres, basta adicionar a eles a classe .field.

<input class="field" type="text">

Validações

Adicionamos alguns testes de validação ao gaintime. Para ativar, basta adicionar o atributo data-validate ao input com uma das seguintes opções:

Confira o nosso BR-validator. OBS: Se você já vai utilizar o GainTime, não precisa importar o BR-validator, pois ele já faz parte do GainTime.

As validações acontecem on blur.

CPF

Formata e valida CPF.

CNPJ

Formata e valida CNPJ.

brPhone

cep

date

num

Aceita apenas algarismos (0-9).

text

Aceita apenas letras, espaço e apóstrofo. Pensado para campos de 'nome completo' e afins.

<input type="text" data-validate="cpf">