Iniciando com formulários

Elementos padrão de formulários e disposição de campos

É possível fazer um formulário usando elementos verticais e horizontais, usando o grid padrão e a classe para formulários inline.

Classe	Layout	Resultado
.ls-form	Vertical	Classe padrão do formulário, exibe a label e conteúdo de formulários em bloco
.ls-form-horizontal	Horizontal	Exibe os elementos ao lado, mas a label continua sendo bloco
.ls-form-inline	Inline	Exibe todos os elementos ao lado, label e conteúdo de formulário

Formulários verticais

Este já é o comportamento padrão, você não precisa fazer praticamente nada para que o form funcione na vertical. Você pode definir a largura das áreas do formulário com as classes do GRID.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<form action="" class="ls-form row">
  <fieldset>
    <label class="ls-label col-md-3">
      <b class="ls-label-text">Nome</b>
      <p class="ls-label-info">Digite seu nome completo</p>
      <input type="text" name="nome" placeholder="Nome e sobrenome" required >
    </label>
    <label class="ls-label col-md-4">
      <b class="ls-label-text">E-mail</b>
      <p class="ls-label-info">Seu e-mail particular</p>
      <input type="text" name="email" placeholder="Escreva seu email" required >
    </label>
    <label class="ls-label col-md-5">
      <b class="ls-label-text">Rua</b>
      <input type="text" name="rua" placeholder="O nome da sua rua" required >
    </label>
  </fieldset>

  <hr>

  <fieldset>
    <!-- Exemplo com Checkbox -->
    <div class="ls-label col-md-5">
      <p>Selecione quais plataformas você tem:</p>
      <label class="ls-label-text">
        <input type="checkbox" name="dynacom">
        Dynacom
      </label>
      <label class="ls-label-text">
        <input type="checkbox" name="masterSystem">
        MasterSystem sem fio
      </label>
      <label class="ls-label-text">
        <input type="checkbox" name="nintendinho">
        Nintendinho
      </label>
      <label class="ls-label-text">
        <input type="checkbox" name="superNintendo">
        Super Nintendo
      </label>
    </div>
  </fieldset>

  <hr>

  <fieldset>
    <!-- Exemplo com Radio button -->
    <div class="ls-label col-md-5">
      <p>Escolha uma das plataformas:</p>
      <label class="ls-label-text">
        <input type="radio" name="plataforms">
        Dynacom
      </label>
      <label class="ls-label-text">
        <input type="radio" name="plataforms">
        MasterSystem sem fio
      </label>
      <label class="ls-label-text">
        <input type="radio" name="plataforms">
        Nintendinho
      </label>
      <label class="ls-label-text">
        <input type="radio" name="plataforms">
        Super Nintendo
      </label>
    </div>
  </fieldset>
  <div class="ls-actions-btn">
    <button class="ls-btn">Salvar</button>
    <button class="ls-btn-danger">Excluir</button>
  </div>
</form>

Formulários horizontais

Para colocar os campos um ao lado do outro, basta inserir a classe ls-form-horizontal na tag FORM.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<form action="" class="ls-form ls-form-horizontal row">
  <fieldset>
    <label class="ls-label col-md-4 col-xs-12">
      <b class="ls-label-text">Nome</b>
      <input type="text" name="nome" placeholder="Primeiro nome" class="ls-field" required>
    </label>
    <label class="ls-label col-md-4 col-xs-12">
      <b class="ls-label-text">Sobrenome</b>
      <input type="text" name="nome" placeholder="Sobrenome" class="ls-field" required>
    </label>  <label class="ls-label col-md-4 col-xs-12">
      <b class="ls-label-text">Nome</b>
      <input type="text" name="nome" placeholder="Primeiro nome" class="ls-field" required>
    </label>
    <label class="ls-label col-md-4 col-xs-12">
      <b class="ls-label-text">Sobrenome</b>
      <input type="text" name="nome" placeholder="Sobrenome" class="ls-field" required>
    </label>
  </fieldset>

    <hr>

  <fieldset>
    <!-- Exemplo com Checkbox -->
    <div class="ls-label col-md-12">
      <p>Selecione quais plataformas você tem:</p>
      <label class="ls-label-text">
        <input type="checkbox" name="dynacom" class="ls-field-checkbox">
        Dynacom
      </label>
      <label class="ls-label-text">
        <input type="checkbox" name="masterSystem" class="ls-field-checkbox">
        MasterSystem sem fio
      </label>
      <label class="ls-label-text">
        <input type="checkbox" name="nintendinho" class="ls-field-checkbox">
        Nintendinho
      </label>
      <label class="ls-label-text">
        <input type="checkbox" name="superNintendo" class="ls-field-checkbox">
        Super Nintendo
      </label>
    </div>
  </fieldset>

    <hr>
  <fieldset>
    <!-- Exemplo com Radio button -->
    <div class="ls-label col-md-12">
      <p>Escolha uma das plataformas:</p>
      <label class="ls-label-text">
        <input type="radio" name="plataforms" class="ls-field-radio">
        Dynacom
      </label>
      <label class="ls-label-text">
        <input type="radio" name="plataforms" class="ls-field-radio">
        MasterSystem sem fio
      </label>
      <label class="ls-label-text">
        <input type="radio" name="plataforms" class="ls-field-radio">
        Nintendinho
      </label>
      <label class="ls-label-text">
        <input type="radio" name="plataforms" class="ls-field-radio">
        Super Nintendo
      </label>
    </div>
  </fieldset>

  <div class="ls-actions-btn">
    <button class="ls-btn">Salvar</button>
    <button class="ls-btn-danger">Cancelar</button>
  </div>
</form>

Etiqueta ao lado do campo

Basta adicionar a classe ls-form-inline na tag FORM. Veja exemplos abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="" class="ls-form ls-form-inline row">
  <label class="ls-label col-md-5">
    <b class="ls-label-text">Nome</b>
    <input type="text" name="nome" placeholder="Nome e sobrenome" required >
  </label>
  <label class="ls-label col-md-4">
    <b class="ls-label-text">E-mail</b>
    <input type="text" name="email" placeholder="Escreva seu email" required >
  </label>
  <div class="ls-actions-btn">
    <button class="ls-btn">Salvar</button>
    <button class="ls-btn-danger">Cancelar</button>
  </div>
</form>

Com caixa de filtro:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="ls-box-filter">
  <form action="" class="ls-form ls-form-inline ls-float-left">
    <label class="ls-label col-md-8 col-sm-8">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select name="" class="ls-select">
          <option>Todos</option>
          <option>Ativos</option>
          <option>Desativados</option>
        </select>
      </div>
    </label>
  </form>

  <form  action="" class="ls-form ls-form-inline ls-float-right">
    <label class="ls-label" role="search">
      <b class="ls-label-text ls-hidden-accessible">Nome do cliente</b>
      <input type="text" id="q" name="q" aria-label="Faça sua busca por cliente" placeholder="Nome do cliente" required="" class="ls-field">
    </label>
    <div class="ls-actions-btn">
      <input type="submit" value="Buscar" class="ls-btn" title="Buscar">
    </div>
  </form>
</div>

Acessibilidade

Ao usar o atributo placeholder adicionamos a classe ls-hidden-accessible no ls-label-text, assim escondemos o elemento, porém os leitores de tela conseguem entender.
Faça isso e a Acessibilidade agradece =)

Locaweb Style

Documentação

Iniciando com formulários

Formulários verticais

Formulários horizontais

Etiqueta ao lado do campo

Acessibilidade