Jak utworzyć: formularz rejestracyjny

Jak utworzyć formularz rejestracyjny

Krok 1 - Dodaj HTML:

Użyj elementu <form> do przetwarzania wejścia. Możesz dowiedzieć się więcej na ten temat w naszych kursach PHP.

Następnie dodaj pola wejściowe (z odpowiednimi etykietami):

<form action="action_page.php">
  <div class="container">
    <h1>Rejestracja</h1>
    <p>Proszę wypełnij ten formularz, aby utworzyć konto.</p>
    <hr>
    <label for="email"><b>E-mail</b></label>
    <input type="text" placeholder="Wprowadź e-mail" name="email" id="email" required>
    <label for="psw"><b>Hasło</b></label>
    <input type="password" placeholder="Wprowadź hasło" name="psw" id="psw" required>
    <label for="psw-repeat"><b>Powtórz hasło</b></label>
    <input type="password" placeholder="Powtórz hasło" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>Tworząc konto zgadzasz się z naszymi <a href="#">Zasadami i Polityką Prywatności</a>.</p>
    <button type="submit" class="registerbtn">Zarejestruj się</button>
  </div>
  <div class="container signin">
    <p>Posiadasz już konto? <a href="#">Zaloguj się</a>.</p>
  </div>
</form>

Krok 2 - Dodaj CSS:

* {box-sizing: border-box}
/* Dodaje wewnętrzną margines do kontenera */
.container {
  padding: 16px;
}
/* Wprowadza pole tekstowe pełnej szerokości */
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;
}
/* Przekształca domyślny styl hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Ustawia styl przycisku wysyłania/ rejestracji */
.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;
}
/* Dodaje niebieski kolor tekstu do linków */
a {
  color: dodgerblue;
}
/* Ustawia kolor tła na szary dla sekcji "Zaloguj się", oraz centruje tekst */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

Spróbuj sam

Strony związane

Tutorial:Formularz HTML

Tutorial:Formularz CSS