Jak zrobić efekt pływającego pola w HTML i CSS

przez

Czy zdarzyło Ci się przeglądać nowoczesne strony internetowe, na których formularze albo pola tekstowe wyglądają tak, jakby „pływały” po ekranie? Wiesz, te eleganckie animacje, w których etykieta (label) unosi się delikatnie nad polem, gdy użytkownik zaczyna coś wpisywać? Ten efekt nazywa się floating label albo po polsku efekt pływającego pola.

Dobra wiadomość? Zrobienie czegoś takiego wcale nie jest trudne. Nie potrzebujesz do tego żadnego frameworka ani skomplikowanego JavaScriptu. Wystarczy trochę HTML i CSS (ewentualnie odrobina transition magic).

W tym artykule pokażę Ci krok po kroku, jak stworzyć efekt pływającego pola, który wygląda profesjonalnie, a jednocześnie jest lekki, responsywny i działa we wszystkich popularnych przeglądarkach.

Co to jest efekt pływającego pola?

Zanim przejdziemy do kodu, warto chwilę zrozumieć, na czym polega ten efekt.

Kiedy użytkownik widzi zwykłe pole tekstowe, często ma ono etykietę (np. „E-mail”) umieszczoną nad lub obok pola. Jednak w nowoczesnych interfejsach — jak np. w aplikacjach Google czy Material Design — etykieta początkowo znajduje się w środku pola.

Kiedy klikniesz w pole lub zaczniesz wpisywać tekst, etykieta delikatnie unosi się do góry, zmniejsza rozmiar i zajmuje miejsce nad polem. Dzięki temu:

  • formularz wygląda czysto i nowocześnie,
  • użytkownik ma jasność, co wpisał w dane pole,
  • całość sprawia wrażenie bardziej interaktywnej.

Brzmi dobrze? To teraz zobaczmy, jak to zbudować od podstaw.

Krok 1: Podstawowy szkielet HTML

Na początek potrzebujemy prostego formularza z polem tekstowym i etykietą. Zrobimy to w najbardziej klasyczny sposób.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Efekt pływającego pola w HTML i CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="form-container">
    <form>
      <div class="floating-label">
        <input type="text" id="name" name="name" placeholder=" " required>
        <label for="name">Imię i nazwisko</label>
      </div>
    </form>
  </div>
</body>
</html>

Zauważ, że placeholder jest pusty (placeholder=" "). Robimy tak, żeby etykieta mogła „siedzieć” w polu, dopóki nie zaczniemy pisać.

Etykieta (label) jest przypisana do konkretnego pola przez for="name", co jest dobre dla dostępności (czytniki ekranu i UX).

Krok 2: Stylizacja CSS

Teraz zaczyna się zabawa! Stworzymy prosty styl, który sprawi, że etykieta będzie pływać.

Podstawowy styl formularza

Najpierw zadbajmy o wygląd całej strony i formularza, żeby nie wyglądały jak surowy HTML.

/* style.css */
body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #74ABE2, #5563DE);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container {
  background-color: #fff;
  padding: 40px 50px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

Już samo to sprawi, że nasz formularz będzie wyglądał elegancko i centralnie ustawiony na stronie.

Stylizacja pływającego pola

Teraz przejdźmy do sedna — czyli efektu pływającego labela.

.floating-label {
  position: relative;
  margin-bottom: 25px;
}

.floating-label input {
  width: 100%;
  padding: 12px 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s ease;
}

.floating-label input:focus {
  border-color: #5563DE;
}

.floating-label label {
  position: absolute;
  top: 12px;
  left: 10px;
  color: #777;
  font-size: 16px;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}

Na razie etykieta leży „na” polu. Teraz musimy sprawić, żeby się uniosła.

Tworzymy efekt unoszenia

Kluczowym trikiem jest użycie pseudoklas:

  • :focus — kiedy użytkownik kliknie w pole,
  • :not(:placeholder-shown) — kiedy pole nie jest puste (czyli ktoś coś wpisał).

Dodajmy to:

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
  top: -10px;
  left: 8px;
  font-size: 12px;
  background-color: #fff;
  padding: 0 4px;
  color: #5563DE;
}

Jak to działa:

  • input + label oznacza, że styl dotyczy etykiety, która znajduje się zaraz po inputcie w kodzie.
  • Gdy pole jest aktywne (focus) lub niepuste (not(:placeholder-shown)), etykieta zmienia pozycję i kolor.
  • Dzięki transition ruch wygląda płynnie i naturalnie.

Efekt? Kiedy klikniesz w pole lub zaczniesz pisać — etykieta płynnie przesunie się do góry.

Dodatkowe ulepszenia

To już działa, ale możemy pójść o krok dalej. Oto kilka pomysłów, jak ulepszyć nasz efekt.

1. Animacja cieńszej ramki

Dodajmy cień lub efekt podświetlenia przy aktywnym polu.

.floating-label input:focus {
  border-color: #5563DE;
  box-shadow: 0 0 5px rgba(85, 99, 222, 0.4);
}

2. Obsługa pól typu e-mail i hasło

Efekt działa też dla innych typów pól. Wystarczy dodać kolejne pola:

<div class="floating-label">
  <input type="email" id="email" name="email" placeholder=" " required>
  <label for="email">Adres e-mail</label>
</div>

<div class="floating-label">
  <input type="password" id="password" name="password" placeholder=" " required>
  <label for="password">Hasło</label>
</div>

Nie musisz zmieniać CSS — efekt działa automatycznie dla wszystkich input wewnątrz .floating-label.

3. Wersja „ciemna” (dark mode)

W dobie nowoczesnych interfejsów warto pomyśleć o trybie ciemnym.
Dodajmy prostą wersję dark mode za pomocą media query:

@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
  }

  .form-container {
    background-color: #222;
    color: #fff;
  }

  .floating-label input {
    background-color: #333;
    color: #fff;
    border-color: #555;
  }

  .floating-label label {
    color: #aaa;
  }

  .floating-label input:focus + label,
  .floating-label input:not(:placeholder-shown) + label {
    background-color: #222;
  }
}

Teraz formularz automatycznie dopasuje się do ustawień systemowych użytkownika.

Jak to działa od strony technicznej?

Ten efekt wygląda magicznie, ale jego mechanizm jest prosty:

  1. Etykieta (label) znajduje się w tym samym kontenerze co pole (input).
  2. Dzięki pozycjonowaniu absolutnemu etykieta jest początkowo nałożona na pole.
  3. CSS reaguje na stan pola (:focus i :not(:placeholder-shown)), zmieniając pozycję i rozmiar etykiety.
  4. transition sprawia, że zmiana odbywa się płynnie.

Zero JavaScriptu. 100% CSS.

Kod pełnej strony (kopiuj i testuj!)

Poniżej znajdziesz kompletny kod HTML i CSS, który możesz od razu wkleić do swojego edytora i uruchomić w przeglądarce:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Efekt pływającego pola w HTML i CSS</title>
  <style>
    body {
      font-family: "Poppins", sans-serif;
      background: linear-gradient(135deg, #74ABE2, #5563DE);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .form-container {
      background-color: #fff;
      padding: 40px 50px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      width: 300px;
    }

    .floating-label {
      position: relative;
      margin-bottom: 25px;
    }

    .floating-label input {
      width: 100%;
      padding: 12px 10px;
      font-size: 16px;
      border: 2px solid #ccc;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .floating-label input:focus {
      border-color: #5563DE;
      box-shadow: 0 0 5px rgba(85, 99, 222, 0.4);
    }

    .floating-label label {
      position: absolute;
      top: 12px;
      left: 10px;
      color: #777;
      font-size: 16px;
      pointer-events: none;
      transition: all 0.2s ease-in-out;
      background-color: transparent;
    }

    .floating-label input:focus + label,
    .floating-label input:not(:placeholder-shown) + label {
      top: -10px;
      left: 8px;
      font-size: 12px;
      background-color: #fff;
      padding: 0 4px;
      color: #5563DE;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
      }

      .form-container {
        background-color: #222;
        color: #fff;
      }

      .floating-label input {
        background-color: #333;
        color: #fff;
        border-color: #555;
      }

      .floating-label label {
        color: #aaa;
      }

      .floating-label input:focus + label,
      .floating-label input:not(:placeholder-shown) + label {
        background-color: #222;
      }
    }
  </style>
</head>
<body>
  <div class="form-container">
    <form>
      <div class="floating-label">
        <input type="text" id="name" name="name" placeholder=" " required>
        <label for="name">Imię i nazwisko</label>
      </div>
      <div class="floating-label">
        <input type="email" id="email" name="email" placeholder=" " required>
        <label for="email">Adres e-mail</label>
      </div>
      <div class="floating-label">
        <input type="password" id="password" name="password" placeholder=" " required>
        <label for="password">Hasło</label>
      </div>
      <button type="submit" style="
        background-color:#5563DE;
        color:white;
        border:none;
        padding:10px 20px;
        border-radius:8px;
        cursor:pointer;
        width:100%;
      ">Zarejestruj się</button>
    </form>
  </div>
</body>
</html>

Efekt pływającego pola to jeden z tych drobiazgów, które potrafią zrobić ogromną różnicę w wyglądzie formularza.
Dzięki niemu:

  • formularze są bardziej nowoczesne i przejrzyste,
  • użytkownik od razu wie, co wpisał w każde pole,
  • interfejs wygląda „żywo” i profesjonalnie.

A co najważniejsze — cały efekt da się osiągnąć bez ani jednej linijki JavaScriptu!
Wystarczy czysty HTML i CSS.

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl