Cadastro completo em PHP com validações back-end e front-end
Neste exemplo veremos como criar um formulário de cadastro com HTML, CSS, JavaScript, jQuery e PHP. Essa página será o cenário utilizado para implementação de dupla validação, no front-end e no back-end. Exploraremos ainda recursos de usabilidade vinculados a segurança, como máscaras e pré-visualização de imagens.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
HTML do exemplo: navbar do Bootstrap
Conteúdo de apoio
Para a barra de navegação do topo utilizamos o componente navbar do Bootstrap. Assim como os demais componentes desse framework, a navbar possui uma estrutura pré-definida que pode ser conferida no código abaixo. Neste exemplo, esse componente é utilizado para exibir o ícone em SVG e links personalizáveis no topo da página:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="main-navbar" aria-expanded="false" class="collapsed navbar-toggle"
data-target="#main-navbar" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<svg>...</svg>
</a>
</div>
<div class="navbar-collapse collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>- Linha 1: Utilizamos o elemento <nav> com a classe navbar, para criar o componente navbar. Ainda nessa linha adicionamos a classe navbar-default para o tema padrão. Outro valor possível seria navbar-inverse, que aplica estilo inverso, com fundo escuro e fonte clara.
- Linha 12: Adicionamos o código SVG do logotipo. A utilização desse formato para a imagem requer alguns ajustes, que veremos em mais detalhes nos próximos vídeos.
- Linha 16: Criamos o menu responsivo com a classe navbar-collapse. Ela exibe seus elementos filhos na navbar e, quando em dispositivos de telas pequenas, os oculta em um menu que é expandido com um clique.
- Linha 17: Criamos uma lista de links. A classe nav serve como base de uma lista de links em uma barra de navegação e a classe navbar-nav define a aparência da lista na navbar. E por último, a classe navbar-right coloca o elemento na ponta direita da navbar.
- Linha 18: Os links dentro dessa lista ficarão ocultos em um menu dropdown. Em contrapartida, os itens nas linhas 31 a 33 permanecem expostos na navbar.