Zero to Hero com Saturn V — Episódio II — Forms and Buttons
Formulários e botões são os principais elementos de interação de um usuário com sua aplicação. Eles estão por aí desde os primórdios da interface gráfica de usuário. Se você está desenvolvendo uma aplicação web, vai precisar de formulários e botões.
No Saturn-V os formulários são desenhados para serem clean e possibilitarem uma boa leitura pelo usuário a respeito da informação requerida por um determinado campo.
Existem basicamente 3 formas de dispor um formulário com Saturn-V: Simple Form, Grid Form, Inline Form. O primeiro, como o nome já diz, é a meneira mais convencional, ou seja, os campos são “empilhados” em uma única coluna.
Já o Grid Form oferece maior versatilidade, possibilitando arranjar os campos dividindo cada linha em várias colunas. Dessa forma, podemos otimizar o uso do espaço horizontal da tela e economizar o espaço vertical. Este formato é indicado quando existem muitos campos no formulário.
Além disso, campos que estão de alguma forma ligados entre si, como Nome e E-mail por exemplo, podem dividir a mesma linha criando contexto.
Por último, o Inline Form é indicado quando há poucos campos, de 2 a 4 no máximo.
Responsivo
Como já disse anteriormente, Saturn-V foi construído com responsiveness in mind. Portanto, estes layouts de formulário se adaptam ao tamanho da tela do usuário.
Show me the code!
Vamos criar um formulário usando o layout Simple Form.
<form class='sv-form'>
<label>
<span>Name</span>
<input type='text' name='name' />
</label>
<label>
<span>E-mail</span>
<input type='text' name='email' />
</label>
<label>
<span>Disabled Field</span>
<input type='text' name='login' disabled value='Disabled field' />
</label>
<label>
<span>Gender</span>
<select>
<option value=''>Please, select</option>
<option value='M'>Male</option>
<option value='F'>Female</option>
</select>
</label>
</form>Podemos notar que o código que escrevemos é muito semântico. Estamos usando as tags corretas e o resultado é um HTML bem limpo. Toda a mágica ocorre simplesmente ao utilizarmos uma classe sv-form na tag form.
Já o Grid Form utiliza o Grid System que estudamos no episódio passado:
<form class='sv-form'> <div class='sv-row--with-gutter'>
<div class='sv-column'>
<label>
<span>Name</span>
<input type='text' name='name' />
</label>
</div>
<div class='sv-column'>
<label>
<span>E-mail</span>
<input type='text' name='email' />
</label>
</div>
</div> <div class="sv-row--with-gutter">
<div class='sv-column'>
<label>
<span>Gender</span>
<select>
<option value=''>Please, select</option>
<option value='M'>Male</option>
<option value='F'>Female</option>
</select>
</label>
</div>
<div class='sv-column'>
<label>
<span>Password</span>
<input type='text' name='password' />
</label>
</div>
<div class='sv-column'>
<label>
<span>Confirm Password</span>
<input type='text' name='password' />
</label>
</div>
</div></form>
Neste caso não declaramos os elementos do formulário diretamente abaixo da tag form. Utilizamos o Grid System do Saturn-V para criar linhas e suas respectivas colunas. Portanto, estamos definindo um formulário composto por 5 elementos, dispostos em 2 linhas.
É tão simples quanto declarar divs para linhas e colunas!!
O Grid System irá distribuir o espaço disponível igualmente entre as colunas da mesma linha. Podemos notar que os campos Name e E-mail possuem o mesmo tamanho. Bem como os campos da segunda linha.
No entanto, podemos determinar que o campo Name tenha um tamanho um pouco menor que o campo E-mail. Para tanto, devemos definir a largura percentual que estes campos ocupam na linha.
<form class='sv-form'>
<div class='sv-row--with-gutter'>
<div class='sv-column _25'>
<label>
<span>Name</span>
<input type='text' name='name' />
</label>
</div>
<div class='sv-column _75'>
<label>
<span>E-mail</span>
<input type='text' name='email' />
</label>
</div>
</form>Na listagem acima, usando as classes _25 e _75, definimos que a primeira coluna deve ocupar 25% do tamanho total ta linha, e a segunda coluna, 75%. Eis o resultado:
Por último, o Inline Form é bem parecido com o Simple Form, resultando em um código extremamente semântico. A única diferença é que ao invés de usar a classe sv-form , utilizamos a classe sv-form--inline. Portanto se quisermos transformar um Simple Form em Inline Form, basta adicionar --inline.
<form class='sv-form--inline'>
<label>
<span>Name</span>
<input type='text' name='name' />
</label>
<label>
<span>E-mail</span>
<input type='text' name='email' />
</label>
<label>
<span>Gender</span>
<select>
<option value=''>Please, select</option>
<option value='M'>Male</option>
<option value='F'>Female</option>
</select>
</label>
<button class='sv-button default' type='button'>Send</button>
</form>O que seria dos formulários sem botões?
Botões com Saturn-V são extremamente simples, portanto não vou ficar enchendo linguiça sobre isso. Vamos direto ao ponto.
Standard Buttons
<button class='sv-button default'>Default button</button>
<button class='sv-button primary'>Primary button</button>
<button class='sv-button info'>Info button</button>
<button class='sv-button danger'>Danger button</button>
<button class='sv-button warning'>Warning button</button>
Small Buttons
<button class='sv-button primary small'>Small Bbtton</button><button class='sv-button info small'>Small Info button</button>
Link Buttons
<button class='sv-button link link-default '>Link Default</button>
<button class='sv-button link link-primary '>Link Primary</button>
<button class='sv-button link link-info '>Link Info</button>
<button class='sv-button link link-danger '>Link Danger</button>
<button class='sv-button link link-warning '>Link Warning</button>
Além disso, podemos ter botões “redondos” =)
<button class="sv-button default circle">Ok</button>
<button class="sv-button primary circle">Ok</button>
E desabilitados
<button class="sv-button default" disabled="">Button</button>
<button class="sv-button primary" disabled="">Button</button>
Bem semantico, não é?
Bom! É isso! Experimente criar seus formulários e botões com Saturn-V, e claro, comente e dê feedback. Participe do desenvolvimento contribuindo aqui no Medium e no Github!
Valeeeeu!
