Hostdime Core - Documentação

Campos de formulário

Campos de formulário textuais como input, select e textarea são estilizados com a class .form-control. Ela possui estilos para aparência e estado de focus, por isso seu uso é obrigatório.
A largura dos inputs deverá ser feita com o uso da classe .col-xl-*. em dispositivos menores use as classes .col-lg-*, .col-md-*e .col-sm-*.
Todas as classes referente ao input, deverão estar envolvidas pela class .form-group

Aqui está um rápido exemplo para demonstrar o estilo básico de formulário do Core. Continue lendo a documentação para descobrir sobre classes obrigatórias e outros estilos de inputs.

<form>
   <div class="col-xl-6 col-md-10">
      <div class="form-group">
         <input type="text" placeholder="Nome" class="form-control">
      </div>
   </div>
   <div class="col-xl-6 col-md-10">
      <div class="form-group">
         <input type="email" placeholder="E-mail" class="form-control">
      </div>
   </div>
</form>

Exemplo usando o label

Exemplo básico usando o label, nesse caso não esqueça de adicionar um ID ao input, lembrando que esse identificar único deve estar no atributo for do label.

<form>
   <div class="col-xl-6 col-md-10">
      <div class="form-group">
         <label for="cnome">Nome</label>
         <input type="text" placeholder="Nome completo" class="form-control" id="cnome">
      </div>
   </div>
   <div class="col-xl-6 col-md-10">
      <div class="form-group">
         <label for="cemail">E-Mail</label>
         <input type="email" placeholder="Digite seu melhor email" class="form-control" id="cemail">
      </div>
   </div>
</form>

Exemplo usando ícone

Se você quiser usar um ícone para transmitir um significado dentro de um input, deverá adotar a estrutura que se encontra logo abaixo. Essa mesma estrutura que deverá ser usada quando se dejesar fazer validações nos campos.

<form>
   <div class="col-xl-6 col-md-10">
      <div class="form-group is-icom">
        <div class="input-group">
           <div class="input">  
              <i class="icon-svg ic-smile"></i>    
              <input type="text" class="form-control" placeholder="Nome">
           </div>
        </div>
      </div>
   </div>
   <div class="col-xl-6 col-md-10">
      <div class="form-group is-icom">
        <div class="input-group">
           <div class="input">  
              <i class="icon-svg ic-email"></i>    
              <input type="email" class="form-control" placeholder="E-mail">
           </div>
        </div>
      </div>
   </div>
</form>

Exemplo usando ícone e label

<form>
   <div class="col-xl-6 col-md-10">
      <div class="form-group is-icom">
        <label for="cnome2">Nome</label>
        <div class="input-group">
           <div class="input">  
              <i class="icon-svg ic-smile"></i>    
              <input type="text" class="form-control" placeholder="Nome completo" id="cnome2">
           </div>
        </div>
      </div>
   </div>
   <div class="col-xl-6 col-md-10">
      <div class="form-group is-icom">
        <label for="cemail2">E-mail</label>
        <div class="input-group">
           <div class="input">  
              <i class="icon-svg ic-email"></i>    
              <input type="email" class="form-control" placeholder="Digite seu e-mail" id="cemail2">
           </div>
        </div>
      </div>
   </div>
</form>

Validação

Para adicionar aparência de validação nos campos, é obrigatório seguir a estruturura abaixo. A class .feedback onde fica a mensagem é opcional.

A Valição em tempo real foi desenvolvida usando a biblioteca jQuery Validation Plugin. Você pode conferir a configuração de todos os formulários que fazem o seu uso, no arquivo validate-forms.js que se encontra na pasta assets > js.

<form>
   <div class="col-xl-7 col-md-10">
      <div class="form-group is-icom is-valid">
        <label for="cnome3">Nome</label>
        <div class="input-group">
           <div class="input">  
              <i class="icon-svg ic-smile"></i>    
              <input type="text" class="form-control" placeholder="Nome completo" id="cnome3">
           </div>
        </div>
      </div>
   </div>
   <div class="col-xl-7 col-md-10">
      <div class="form-group is-icom is-invalid">
        <label for="cemail3">E-mail</label>
        <div class="input-group">
           <div class="input">  
              <i class="icon-svg ic-email"></i>    
              <input type="email" class="form-control" placeholder="Digite seu e-mail" id="cemail3">
           </div>
           <div class="feedback"><span class="text">Informe um e-mail válido.</span></div>
        </div>
      </div>
   </div>
</form>

Campo inativo

Se quiser adicionar um campo inativo, basta adicionar a class .readonly e também o atributo readonly

<form>
   <div class="col-xl-6 col-md-10">
      <div class="form-group">
         <div class="input-group">
            <div class="input">
               <input type="text" readonly value="Suporte" class="form-control readonly">
            </div>
         </div>
      </div>
   </div>
</form>

Campo de seleção

O Core por padrão usar uma caixa de seleção personalizada, como pode ver seu funcionamento no exemplo abaixo. E para usar você precisar adicionar a class .select-custom na tag select.

<form>
   <div class="col-xl-6 col-md-10">
      <select class="select-custom">
         <option value="0">Selecionar</option>
         <option>Opção 1</option>
         <option>Opção 2</option>
         <option>Opção 3</option>
      </select>
   </div>
</form>

Caixa de texto

A caixa de texto do Core foi desenhada para se ajustar a altura do conteúdo interno, você também pode também configurar uma altura inicial através do atribudo rows. E para desativar a altura automatica de acordo com o conteúdo, você precisa remover o atributo data-autoresize.

<form>
   <div class="col-xl-12">
      <div class="form-group">
         <label for="fdescproblema">Descrição detalhada do problema</label>
         <div class="input-group">
            <div class="input">
               <textarea data-autoresize class="form-control textarea" id="fdescproblema" rows="2"></textarea>
            </div>
         </div>
      </div>
   </div>
</form>

Checkbox

Opção 1 Opção 2 Opção 3

<div class="col-xl-12">
   <div class="custom-checkbox">
      <label>Opção 1   
         <input type="checkbox">
         <span class="checkbox"></span>
      </label>
      <label>Opção 2   
         <input type="checkbox">
         <span class="checkbox"></span>
      </label>
      <label>Opção 3   
         <input type="checkbox">
         <span class="checkbox"></span>
      </label>    
   </div>
</div>

Checkbox 2

Para deixar uma opção selecionada é preciso adicionar ao input o atributo checked

Habilitar assinatura mensal do Boletim de Informações

Desabilitar recebimento de Fatura Digital

<div class="col-xl-12">
   <div class="switch-checkbox">
      <div class="switch">
         <label>
             <input type="checkbox">
             <span></span>
         </label> 
         Habilitar assinatura mensal do Boletim de Informações 
      </div>
      <div class="switch">
         <label>
            <input type="checkbox" checked>
             <span></span>
         </label> 
         Desabilitar recebimento de Fatura Digital
      </div>
   </div>
</div>

Campo de anexar arquivo

Anexar Arquivo

<div class="col-xl-12">
   <div class="attach-files">
      <div class="btnInputFile">Anexar Arquivo</div>
      <input type="file" name="files[]" class="inputFile"/>
      <ul class="selected-files"></ul>
   </div>
</div>

Bloco com selects de datas

Até

<div class="box-report">
   <form class="box">
      <div class="form-group">
         <label>De</label>
         <div class="input-group">
            <div class="input">
               <div class="custom-select">
                  <select class="form-control select-custom">
                     <option value="2016" selected>2016</option>
                     <option value="2017">2017</option>
                     <option value="2018">2018</option>
                  </select>
               </div>
            </div>
         </div>
      </div>
      <div class="form-group">
         <label>Até</label>
         <div class="input-group">
            <div class="input">
               <div class="custom-select">
                  <select class="form-control select-custom">
                     <option value="2016">2016</option>
                     <option value="2017">2017</option>
                     <option value="2018" selected>2018</option>
                  </select>
               </div>
            </div>
         </div>
      </div>
      <button type="submit" class="btn btn-orange btn-submit" title="Baixar">Baixar</button>
   </form>
</div>