Como criar: formulário de registro

Como criar um formulário de registro

Primeiro passo - Adicionar HTML:

Use o elemento <form> para lidar com entradas. Saiba mais em nosso tutorial PHP.

Então, adicione controles de entrada para cada campo (com rótulos correspondentes):

<form action="action_page.php">
  <div class="container">
    <h1>Registrar</h1>
    <p>Por favor, preencha este formulário para criar uma conta.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Inserir Email" name="email" id="email" required>
    <label for="psw"><b>Senha</b></label>
    <input type="password" placeholder="Inserir Senha" name="psw" id="psw" required>
    <label for="psw-repeat"><b>Repetir Senha</b></label>
    <input type="password" placeholder="Repetir Senha" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p> Ao criar uma conta, você concorda com nossos <a href="#">Termos & Privacidade</a>.</p>
    <button type="submit" class="registerbtn">Registrar</button>
  </div>
  <div class="container signin">
    <p>Já tem uma conta? <a href="#">Entre</a>.</p>
  </div>
</form>

Segundo passo - Adicionar CSS:

* {box-sizing: border-box}
/* Adicionar margem interna à caixa */
.container {
  padding: 16px;
}
/* Campo de entrada de largura total */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* Substituir estilo padrão do hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Definir estilo do botão de submit/registro */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.registerbtn:hover {
  opacity:1;
}
/* Adicionar cor de texto azul para os links */
a {
  color: dodgerblue;
}
/* Definir cor de fundo cinza para a seção "login" e alinhar o texto no centro */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Formulário HTML

Tutorial:Formulário CSS