Formulários
<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">
<div class="co12-g">
<fieldset class="mf1">
<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>
<div class="l">
<div class="co12-g">
<fieldset class="mf1">
<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>
<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="co4-g">
<label for="exe14" class="label">Data <small></small></label>
<input type="date" id="exe14" name="exe14" value="2018-07-22" min="2025-01-01" max="2025-12-31">
</div>
<div class="co4-g">
<label for="exe15" class="label">Data e Hora <small></small></label>
<input type="datetime-local" id="exe15" name="exe15" value="2025-06-12T19:30" min="2025-06-07T00:00" max="2025-06-14T00:00">
</div>
<div class="co4-g">
<label for="exe16" class="label">Semana <small></small></label>
<input type="week" id="exe16" name="exe16" min="2025-W18" max="2025-W40">
</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 class="label">Avatar <small>(Quadrado PNG)</small></label>
<div class="swfile">
<input type="file" id="swFile" name="swFile">
<label for="swFile" class="swlabel">
<i class='bx bx-download'></i> Upload
</label>
<div class="swarquivo">
<b>Arquivo:</b>
<span id="swName">Arquivo...</span>
</div>
</div>
</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"><button type="submit" class="btn btn-peri wp100 move-t">Fechar</button>
</div>
<div class="co6-g">
<button id="AddBtn" type="submit" class="btn btn-prin wp100 move-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 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>