Cadastro e Login - #9 Design do Cadastro

Hoje trabalharemos com o design do formulário de cadastro. Para isso, utilizaremos o css, o html e o javascript.

Estilizando formulário de cadastro

Vamos criar primeiramente dentro da nossa página cadastro.php o formulário.

<?php \Classes\ClassLayout::setHead('Cadastro','Realize seu cadastro em nosso sistema.'); ?>

<div class="topFaixa float w100 center">
    Cadastro de Clientes
</div>

<form name="formCadastro" id="formCadastro" action="<?php echo DIRPAGE.'controllers/controllerCadastro'; ?>" method="post">
    <div class="cadastro float center">
        <input class="float w100 h40" type="text" id="nome" name="nome" placeholder="Nome:" required>
        <input class="float w100 h40" type="email" id="email" name="email" placeholder="Email:" required>
        <input class="float w100 h40" type="text" id="cpf" name="cpf" placeholder="CPF:" required>
        <input class="float w100 h40" type="text" id="dataNascimento" name="dataNascimento" placeholder="Data de Nascimento:" required>
        <input class="float w100 h40" type="password" id="senha" name="senha" placeholder="Senha:" required>
        <input class="float w100 h40" type="password" id="senhaConf" name="senhaConf" placeholder="Confirmação da Senha:" required>
        <input class="inlineBlock h40" type="submit" value="Cadastrar">
    </div>
</form>

<?php \Classes\ClassLayout::setFooter(); ?>

Repare no código acima o uso das classes auxiliares novamente como: float, w100...

Vamos estilizar o nosso css:

.cadastro{width: 60%; margin: 15px 20%;}

.topFaixa{height: 50px; background: #025158; font-weight: bold; color: #fff; line-height: 50px;}

/*Extra-small*/
.cadastro{width: 90%; margin: 15px 5%;}


/*Small*/
.cadastro{width: 80%; margin: 15px 10%;}

Para finalizar, vamos fazer máscaras nos campos de cpf e data de nascimento. Para isso utilizaremos o vanilla-masker. Baixe-o e salve em lib/js

Na pasta lib/js crie também um arquivo javascript.js

No arquivo javascript.js vamos chamar as funções de máscara:

//Máscaras do formulário de cadastro
VMasker(document.querySelector("#cpf")).maskPattern("999.999.999-99");
VMasker(document.querySelector("#dataNascimento")).maskPattern("99/99/9999");

Por fim, basta chamar os arquivos javascript na ClassLayout dentro do método setFooter():

$html="<script src='".DIRPAGE."lib/js/vanilla-masker.min.js'></script>\n";
$html.="<script src='".DIRPAGE."lib/js/javascript.min.js'></script>\n";