Formulários Inputs, Selects, Checks
- Formulário
- Inputs
- Selects
- Checkbox e Radio
Formulário de Exemplo
<form action="#" method="get" class="">
<div class="l">
<div class="co8-g">
<label for="exe1" class="label">Text</label>
<input type="text" class="" id="exe1" name="exe1" required>
</div>
<div class="co4-g">
<label for="exe2" class="label">Placeholder</label>
<input type="text" class="" id="exe2" name="exe2" placeholder="SandroWeb">
</div>
</div>
<div class="l">
<div class="co6-g">
<label for="exe3" class="label">Desabilitado</label>
<input type="text" class="" id="exe3" name="exe3" disabled placeholder="SandroWeb">
</div>
<div class="co6-g">
<label for="exe4" class="label">Só numeros</label>
<input type="number" class="" id="exe4" name="exe4">
</div>
</div>
<div class="l">
<div class="co7-g">
<label for="exe5" class="label">Email</label>
<input type="email" class="" id="exe5" name="exe5">
</div>
<div class="co5-g">
<label for="exe6" class="label">Select</label>
<select class="select" name="exe6" id="exe6">
<option selected value=''>valor 01</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
</div>
</div>
<div class="l">
<div class="co6-g">
<label for="exe7" class="label">Email <small>(login)</small></label>
<input type="email" class="" id="exe7" name="exe7">
</div>
<div class="co6-g posi-r">
<label for="exe8" class="label">Senha</label>
<input type="password" class="" id="senha" name="exe8">
</div>
</div>
<div class="l">
<fieldset class="ef1">
<legend>Check Block <small>[ .check-b ]</small></legend>
<div class="check-b">
<div class="bl-radio">
<input type="radio" class="f-check" id="html" name="exe9" value="HTML">
<label for="html">HTML</label>
</div>
<div class="bl-radio">
<input type="radio" class="f-check" id="css" name="exe9" value="CSS">
<label for="css">CSS</label>
</div>
<div class="bl-radio">
<input type="radio" class="f-check" id="javascript" name="exe9"
value="JavaScript">
<label for="javascript">JavaScript</label>
</div>
</div>
</fieldset>
</div>
<div class="l">
<fieldset class="ef1">
<legend>Check Inline <small>[ .check-i ]</small></legend>
<div class="check-i">
<div class="bl-checkbox">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Homem</label>
</div>
<div class="bl-checkbox">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Mulher</label>
</div>
<div class="bl-checkbox">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Outros</label>
</div>
</div>
</fieldset>
</div>
<div class="l">
<div class="co4-g">
<label for="exe10" class="label">CPF <small>(com mascara)</small></label>
<input type="text" class="cpf" id="exe10" name="exe10">
</div>
<div class="co4-g">
<label for="exe11" class="label">Tel <small>(com mascara)</small></label>
<input type="tel" class="tel" id="exe11" name="exe11">
</div>
<div class="co4-g">
<label for="exe12" class="label">R$ <small>(com mascara)</small></label>
<input type="text" class="moeda" id="exe12" name="exe12">
</div>
</div>
<div class="l">
<div class="co6-g">
<label for="myfile" class="label">Arquivo:</label>
<input type="file" id="myfile" name="myfile">
</div>
<div class="co6-g">
<label for="zzz" class="label">Arquivos:</label>
<input type="file" id="zzz" name="zzz" multiple>
</div>
</div>
<div class="l">
<div class="co12-g">
<label for="example" class="label">Datalist</label>
<input list="datalist" id="example" placeholder="Pesquise...">
<datalist id="datalist">
<option value="Programador">
<option value="Bombeiro">
<option value="Policial">
<option value="Pedreiro">
<option value="Carpinteiro">
<option value="Outros">
</datalist>
</div>
</div>
<div class="l et1">
<div class="co6-g"><a type="submit" class="btn btn-perigo wp100 anime-t">Fechar</a>
</div>
<div class="co6-g">
<button id="AddBtn" type="submit" class="btn btn-principal wp100 anime-t">Cadastrar</button>
</div>
</div>
</form>
Inputs text
Para controla os tamanhos você pode modificar apenas na class form:
.form-p para pequeno,.form-m para medio,.form-g para grande,.form-gg para extra grande,.form-xg para extra extra grande,
<input type="text" class="" placeholder="SandroWeb">
<br />
<input type="text" class="form-p" placeholder="Formulário P">
<input type="text" class="form-m" placeholder="Formulário M">
<input type="text" class="form-g" placeholder="Formulário G">
<input type="text" class="form-gg" placeholder="Formulário GG">
<input type="text" class="form-xg" placeholder="Formulário XG">
<br />
<input type="text" class="" placeholder="Desabilitado" disabled>
<input type="text" class="form-p" placeholder="Desabilitado Tamanho P" disabled>
<br />
<label for="exe1" class="label">Text</label>
<input type="text" class="form-p" placeholder="Formulário P com label">
<label for="exe1" class="label">Text</label>
<input type="text" class="form-m" placeholder="Formulário M com label">
<label for="exe1" class="label">Text</label>
<input type="text" class="form-g" placeholder="Formulário G com label">
<label for="exe1" class="label">Text</label>
<input type="text" class="form-gg" placeholder="Formulário GG com label">
<label for="exe1" class="label">Text</label>
<input type="text" class="form-xg" placeholder="Formulário XG com label">
Inputs datetime-local
<label for="" class="label">Data</label>
<input type="datetime-local" class="" id="" name="">
Inputs email
<label for="" class="label">Email</label>
<input type="email" class="" id="" name="">
Inputs password
<label for="senha" class="label">Senha</label>
<input type="password" class="" name="">
Inputs mascaras
CPF - inclua no input a class "cpf".
<label for="" class="label">CPF</label>
<input type="text" class="cpf" name="">
CNPJ - inclua no input a class "cnpj".
<label for="" class="label">CNPJ</label>
<input type="text" class="cnpj" name="">
R$ - inclua no input a class "moeda".
<label for="" class="label">R$</label>
<input type="text" class="moeda" name="">
Inputs datalist
<input list="datalist" id="example" placeholder="Pesquise...">
<datalist id="datalist">
<option value="Programador">
<option value="Bombeiro">
<option value="Policial">
<option value="Pedreiro">
<option value="Carpinteiro">
<option value="Outros">
</datalist>
Select
Para controla os tamanhos você pode modificar apenas na class form:
.form-p para pequeno,.form-m para medio,.form-g para grande,.form-gg para extra grande,.form-xg para extra extra grande,
<label for="" class="label">Text</label>
<select class="select" name="" id="">
<option selected value=''>Padrão</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
<br />
<label for="" class="label">Text</label>
<select class="select form-p" name="" id="">
<option selected value=''>valor P</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
<label for="" class="label">Text</label>
<select class="select form-m" name="" id="">
<option selected value=''>valor M</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
<label for="" class="label">Text</label>
<select class="select form-g" name="" id="">
<option selected value=''>valor G</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
<label for="" class="label">Text</label>
<select class="select form-gg" name="" id="">
<option selected value=''>valor GG</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
<label for="" class="label">Text</label>
<select class="select form-xg" name="" id="">
<option selected value=''>valor XG</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
<label for="" class="label">Text</label>
<select class="select" name="" id="" disabled>
<option selected value=''>Desabilitado</option>
<option value="">valor 02</option>
<option value="">valor 03</option>
<option value="">valor 04</option>
</select>
Radio
Para modificar a cor do radio, modifique apenas o --form-checked-borda
no arquivo swcss.css.
.check-i - bloco inline;
.check-b - bloco block;
<div class="check-b">
<div class="bl-radio">
<input type="radio" class="f-check" id="html" name="exe9" value="HTML">
<label for="html">HTML</label>
</div>
<div class="bl-radio">
<input type="radio" class="f-check" id="css" name="exe9" value="CSS">
<label for="css">CSS</label>
</div>
<div class="bl-radio">
<input type="radio" class="f-check" id="javascript" name="exe9"
value="JavaScript">
<label for="javascript">JavaScript</label>
</div>
</div>
Checkbox
Para modificar a cor do radio, modifique apenas o --form-checked-borda
no arquivo swcss.css.
.check-i - bloco inline;
.check-b - bloco block;
<div class="check-i">
<div class="bl-checkbox">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Homem</label>
</div>
<div class="bl-checkbox">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Mulher</label>
</div>
<div class="bl-checkbox">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Outros</label>
</div>
</div>