Interaktywna Etykieta Formularza

CSS

<div class="input-container">
  <input type="text" id="name" name="name" placeholder="Wpisz swoje imię">
  <lable for="name" class="placeholder-label">Wpisz swoje imię</label>
</div>

HTML

body {
  display: flex;
  justify-content: center; /* Wyśrodkowanie poziome */
  align-items: center; /* Wyśrodkowanie pionowe */
  height: 100vh; /* Ustawiamy wysokość całego widoku przeglądarki */
  margin: 0; /* Usuwamy marginesy */
}

.input-container{
  position: relative;
  display:inline-block;
  width:200px;
}

input{
  width:100%;
  padding: 13px;
  border: 2px solid #262626;
  border-radius: 10px;
  font-size:14px;
  outline: none;
  position: relative;
}


input:focus{
  border-color:#00add9;
}

.placeholder-label{
  position: absolute;
  font-family:montserrat;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background:white;
  padding: 0px 5px;
  color: #262626;
  font-size:16px;
  transition: all 0.3s ease;
  pointer-events: none;
}



input:focus + .placeholder-label,
input:not(:placeholder-shown) + .placeholder-label 
 {
  top: -3px;
  font-size:14px;
  color:#00add9;
}

input::placeholder{
  color:transparent;
  
}


.input-container{
  position: relative;
  width:200px;
}

Wprowadzenie do Interaktywnej Etykiety Formularza

Kod przedstawia przykład zastosowania nowoczesnego rozwiązania, jakim jest Interaktywna Etykieta Formularza. To funkcjonalność, która znacząco poprawia użyteczność i estetykę pól formularzy. W tradycyjnych formularzach etykiety są statycznie umieszczone nad polami tekstowymi lub jako placeholder wewnątrz nich. Jednak podejście z interaktywną etykietą pozwala na dynamiczne zmiany jej pozycji, rozmiaru i koloru w zależności od interakcji użytkownika. Dzięki temu formularz staje się bardziej intuicyjny, nowoczesny i łatwiejszy w obsłudze.

Jak działa Interaktywna Etykieta Formularza?

Kluczowym elementem rozwiązania jest płynne przesuwanie się etykiety, gdy użytkownik klika w pole tekstowe lub zaczyna wpisywać dane. Interaktywna Etykieta Formularza unosi się ponad pole tekstowe, zmniejsza swoją czcionkę i zmienia kolor, aby nadal była widoczna, ale jednocześnie nie przeszkadzała wprowadzanym danym. Dzięki temu użytkownik nie ma wątpliwości, jakie informacje należy wprowadzić, a placeholder nie znika po rozpoczęciu pisania.

Stylizacja i Technologia

Stylizacja formularza opiera się na zastosowaniu CSS, który umożliwia dodanie takich efektów, jak transition i transform. Te właściwości zapewniają płynne przejścia między różnymi stanami formularza. Gdy pole tekstowe jest aktywne, etykieta zmienia swoje położenie i kolor, co czyni cały proces interakcji bardziej naturalnym i przyjemnym. To sprawia, że Interaktywna Etykieta Formularza wyróżnia się na tle tradycyjnych, statycznych formularzy.

Responsywność i Uniwersalność

Kolejną zaletą tego rozwiązania jest jego responsywność. Dzięki zastosowanym stylom formularz zachowuje swoje właściwości na urządzeniach mobilnych, tabletach i komputerach. Oznacza to, że Interaktywna Etykieta Formularza sprawdzi się w różnorodnych projektach, od stron internetowych po aplikacje mobilne.

Łatwość Dostosowania

Przejrzystość kodu i prostota jego implementacji sprawiają, że jest on łatwy w dostosowaniu do różnych potrzeb. Można zmieniać kolory, czcionki czy rozmiary etykiety, dostosowując je do stylu całej witryny. Wprowadzenie takich dynamicznych elementów podnosi jakość doświadczeń użytkowników i czyni formularz bardziej profesjonalnym.

Podsumowanie

Interaktywna Etykieta Formularza to praktyczne i estetyczne rozwiązanie, które nadaje nowoczesny charakter każdemu projektowi. To doskonały wybór dla deweloperów, którzy chcą stworzyć przyjazne i intuicyjne interfejsy dla użytkowników. Korzystając z tego kodu, można w prosty sposób wprowadzić nowoczesność i dynamikę do formularzy, co z pewnością zostanie docenione przez użytkowników.

Codepen

Zobacz również: Jak Stworzyć Śliski Nagłówek w Twojej Stronie WordPress za pomocą kodu CSS i Elementora?