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: sistema de grid do Bootstrap
Conteúdo de apoio
O Bootstrap utiliza uma técnica de layout chamada sistema de grid. Nela a página é dividida em um número fixo de colunas virtuais, usadas para determinar a largura dos componentes. Sendo assim, conseguimos determinar qual será a largura de um componente declarando quantas colunas ele irá ocupar.
Na Figura 1 a seguir podemos conferir como esse sistema auxilia a dispor cada componente na página. Explicando o que essas classes significam, col é o prefixo para uma coluna. Ela é seguida a largura do dispositivo, podendo ser xs, menor que 768px, sm, a partir de 768px, md, a partir de 992px, e lg, a partir de 1200px. Logo em seguida vemos o número de colunas que o componente deve ocupar. Uma vez que o sistema de grid do Bootstrap é baseado em 12 colunas, esses valores vão de 1 a 12.
No código abaixo podemos conferir a estrutura necessária para a utilização desse recurso:
<div class="container-fluid">
<div class="row">
<main>
<div class="col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4" id="form-cadastro">
...
</div>
</main>
</div>
</div>
- Linha 1: A classe conteiner-fluid cria um contêiner, um elemento no qual podemos adicionar outros elementos, cujo tamanho é 100% do espaço horizontal disponível.
- Linha 2: A classe row cria uma linha dentro da qual podemos adicionar colunas. Esta é a primeira classe a ser adicionada para que tenhamos acesso ao sistema de colunas.
- Linha 4: Declaramos com as classes col-lg-4 e col-md-4 que esse elemento ocupa quatro das doze colunas disponíveis. Em seguida, com col-lg-offset-4 e col-md-offset-4 indicamos que ele deve se afastar da lateral esquerda da página o espaço equivalente a quatro colunas. Isso causa a centralização do formulário.
Se um elemento é declarado para usar quatro colunas em dispositivos com telas de largura média (col-md-4, a partir de 992px), em qualquer outra tela ele ocupará doze colunas, a não ser que seja especificado o contrário. Por isso frequentemente utilizamos mais de uma classe, como col-md-4 e col-lg-4.