# Uso

Nesta seção apresentaremos como usar os componentes de um formulario.

Formulario básico

Abaixo é apresentado um formulário básico. 


<form action="#">
  <div class="form-group">
    <label for="forNameExample">Nome</label>
    <input type="text" name="nome" placeholder="Insira seu nome">
  </div>
  <div class="form-group">
    <label for="forEmailExample">Email</label>
    <input type="email" name="email" placeholder="Insira um email">
  </div>
  <div class="form-group">
    <label for="forPasswordExample">Senha</label>
    <input type="password" name="senha" placeholder="Insira sua senha">
  </div>
</form>

Input desabilitado



  <div class="form-group">
    <label for="forNameExample">Nome</label>
    <input type="text" name="nome" value="Jardel Gonçalves" disabled>
  </div>

Select dropdown


<div class="select">
  <select>
    <option>--Select--</option>
    <option>Hello 1</option>
    <option>Hello 2</option>
    <option>Hello 3</option>
    <option>Hello 4</option>
  </select>
  <div class="select_arrow"></div>
</div>

Textarea


<div class="form-group">
  <label for="forDescribeExample">Descrição</label>
  <textarea name="descricao" id="" cols="30" rows="10"></textarea>
</div>

Input date


<div class="form-group">
  <label for="forDateExample">Data de Nascimento</label>
  <input type="date" name="dataNascimento">
</div>

Checkbox


<label class="form-checkbox">Checkbox 1
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="form-checkbox">Checkbox 1
  <input type="checkbox" checked>
  <span class="checkmark"></span>
</label>

Radio


<label class="form-checkbox">Radio 1
  <input type="radio" name="radio">
  <span class="checkradio"></span>
</label>
<label class="form-checkbox">Radio 2
  <input type="radio" name="radio" checked>
  <span class="checkradio"></span>
</label>

On/Off Switch


<div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>

Radio


  <input type="range" class="range" min="0" max="100">

Upload de arquivo


<div class="upload-file">
  <button class="selected-file">Escolher arquivo</button>
  <input type="file" name="meu_arquivo" />
</div>

Você pode alterar a cor do botão utilizando o nome da cor que deseja como classe do botão. 


<div class="upload-file">
  <button class="selected-file indigo">Escolher arquivo</button>
  <input type="file" name="meu_arquivo" />
</div>

Caso deseje exibir o nome do arquivo, é necessário utilizar javascript, veja um exemplo abaixo:

Nenhum arquivo selecionado 

<div class="upload-file">
  <button class="selected-file indigo">Escolher arquivo</button>
  <input type="file" id="myfile" name="meu_arquivo" />
  <span class="filename-upload" id="filename">Nenhum arquivo selecionado</span>
</div>
          

var file = document.getElementById("myfile");
file.onchange = function(){
  if(file.files.length > 0){
    document.getElementById('filename').innerHTML = file.files[0].name;
  }
};