Jak utworzyć: wierszowy formularz

Poprzednia strona Formularz wyskakujący
Następna strona Wyczyść pole wejściowe

Naucz się, jak używać CSS do tworzenia reaktywnych wierszowych formularzy.

Reaktywny wierszowy formularz

Zmniejsz rozmiar okna przeglądarki, aby zobaczyć efekty (etykiety i pola wejściowe będą się układać, a nie będą równolegle na mniejszych ekranach):

Spróbuj sam

Jak utworzyć wierszowy formularz

Krok 1 - Dodaj HTML:

Używaj elementu <form> do przetwarzania wejścia. Dowiedz się więcej w naszej instrukcji PHP.

<form class="form-inline" action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Wprowadź email" name="email">
  <label for="pwd">Hasło:</label>
  <input type="password" id="pwd" placeholder="Wprowadź hasło" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Pamiętaj mnie
  </label>
  <button type="submit">Submit</button>
</form>

Krok 2 - Dodaj CSS:

/* Ustaw styl formularza - wyświetlaj elementy poziomo */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Dodaj pewną margines do każdego etykiety */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Ustaw styl pola wejściowego */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Ustaw styl przycisku submit */
.form-inline button {
  padding: 10px 20px;
  background-color: niebieski błękitny;
  border: 1px solid #ddd;
  color: biały;
}
.form-inline button:hover {
  background-color: błękitny królewski;
}
/* Dodaj responsywność - wyświetl formularz kontrolki pionowo zamiast poziomo na ekranach o szerokości mniejszej niż 800 pikseli */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: rozciągnięcie;
  }
}

Spróbuj sam