LOCAWEB STYLE

Documentação Locaweb Style

Campos de Formulário

Tipos de campos de formulários.

Nós sabemos que utilizar formulários e principalmente organizá-los visualmente é muito chato. Nós seguimos alguns pequenos padrões herdados do Bootstrap com algumas modificações para se adequar às nossas necessidades. Veja os exemplos abaixo:

Criar nova lista 
<div class="simpleFilter sideBySide formInline">
	<a href="#" class="btn btn-primary ico-plus fLeft">Criar nova lista</a>
	<form class="fRight">
		<div class="period control-group fRight">
			<label for="period">Período:</label>
			<input type="text" name="list[period_start]" id="list_period_start" class="input-small datemask datepicker">

			<input type="text" name="list[period_end]" id="list_period_end" class="input-small datepicker datemask ">
			<input type="submit" class="btn" value="Filtrar" name="">
		</div>
	</form>
</div>
Classes usadas Descrição
simpleFilter Prepara uma barra com campos, botoes e ações.
sideBySide Faz elementos control-group ficarem lado a lado.
formInline Faz labels dos inputs ficarem ao lado dos campos de formulário.
control-group Classe padrão do Bootstrap. Agrupa elemento de formulários: labels, campos, botões.
@
.00 
<div class="input-prepend">
	<span class="add-on">@</span>
	<input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
	<input class="span2" id="appendedInput" type="text">
	<span class="add-on">.00</span>
</div>

Insere uma classe .add-on no elemento, formatando-o de forma que ele fique acomplado ao campo.

OBS: O último elemento fecha todos e não exibe nada, pra isso basta inserir a classe .closeAllCollapse, o elemento não pode possuir o atributo data-toggle="collapse", isso é usado apenas em algumas exceções.

<div class="control-group collapsedRadios">
	<label>Tipo de autenticação:</label>
	<div class="controls">
		<label class="control-label">
			<input type="radio" data-target="#authOpt" name="control" data-toggle="collapse" checked="checked"> Tipo checados
		</label>
		<label class="control-label">
			<input type="radio" data-target="#authOpt2" name="control" data-toggle="collapse"> Tipo texto
		</label>
		<label class="control-label">
					<input type="radio" data-target="#authOpt3" class="closeAllCollapse" name="control"> Nenhum tipo
				</label>
		<div id="authOpt" class="collapse in">
			<div class="boxGrayOpt formInline">
				<label><input type="checkbox" value="1"> CPF</label>
				<label><input type="checkbox" value="1"> Endereço</label>
				<label><input type="checkbox" value="1"> CEP</label>
			</div>
		</div>
		<div id="authOpt2" class="collapse">
			<div class="boxGrayOpt formInline">
				<input type="text" class="span5">
			</div>
		</div>
		<div id="authOpt3" class="collapse">
		</div>
	</div>
</div>

Para ver o padrão de como os campos ficam com validação de erro ou sucesso, clique aqui.