Przykłady użycia data-* w animacjach, walidacjach, interakcjach

Przykłady użycia `data-*` w animacjach, walidacjach, interakcjach

Atrybuty data-* doskonale sprawdzają się w dynamicznych elementach strony, takich jak animacje, formularze czy interakcje użytkownika. Dzięki nim możemy opisywać zachowanie komponentów w HTML i odczytywać je po stronie JavaScript – bez konieczności pisania osobnych klas czy ID dla każdej możliwej sytuacji.

Przykład 1: animacje z `data-delay`

Elementy mogą animować się z różnym opóźnieniem, określonym w HTML. Wystarczy zastosować atrybut data-delay i odczytać go w JS.

<div class="anim-box" data-delay="200">Box 1</div>
<div class="anim-box" data-delay="600">Box 2</div>
<div class="anim-box" data-delay="1000">Box 3</div>

document.querySelectorAll('.anim-box').forEach(box => {
  const delay = parseInt(box.dataset.delay);
  setTimeout(() => {
    box.classList.add('visible');
  }, delay);
});

Dzięki temu każde pudełko pojawia się z innym opóźnieniem, ale bez pisania 3 różnych funkcji JS.

Przykład 2: walidacja formularzy z `data-validation`

Możesz dodać do pól formularza informacje o wymaganiach walidacyjnych i komunikatach o błędach – bez hardcodowania reguł w JS.

<input type="email" name="email" 
  data-validation="required" 
  data-error="Podaj poprawny adres e-mail">

const input = document.querySelector('[name="email"]');
const isRequired = input.dataset.validation === "required";

if (isRequired && input.value.trim() === "") {
  alert(input.dataset.error);
}

Dzięki temu możesz napisać jeden uniwersalny skrypt walidujący wszystkie pola na stronie.

Przykład 3: interakcje użytkownika

Przycisk może mieć w HTML informację o tym, jaką akcję ma wykonać. Wystarczy np. data-action.

<button class="ui-action" data-action="scroll-top">Do góry</button>
<button class="ui-action" data-action="open-menu">Menu</button>

document.querySelectorAll('.ui-action').forEach(btn => {
  const action = btn.dataset.action;

  btn.addEventListener('click', () => {
    if (action === "scroll-top") {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else if (action === "open-menu") {
      document.body.classList.toggle('menu-open');
    }
  });
});

Jeden skrypt, wiele możliwych działań – elastycznie i bez nadmiarowego kodu.

Propozycje do przetestowania

Stwórz kilka przycisków z różnymi data-action i zaprogramuj im odpowiednie efekty
Dodaj data-delay do animacji obrazków w galerii
Rozbuduj formularz o data-maxlength, data-pattern i stwórz własny walidator JS

Dobre praktyki

Przechowuj w data-* tylko dane logiczne (nie style!)
Twórz komponenty oparte na danych – nie klasach wizualnych
Stosuj spójne nazewnictwo i zawsze waliduj dane z HTML po stronie JS

🔗 Gotowy przykład do rozwinięcia

<li class="task" 
    data-priority="high" 
    data-status="in-progress" 
    data-user="admin">
  Popraw błędy na stronie
</li>

Możesz stworzyć skrypt, który na podstawie tych danych ustala kolor zadania, widoczność, akcje dostępne dla danego użytkownika itp. Wszystko bez modyfikowania HTML – tylko na podstawie data-*.

💡 Wniosek

Użycie data-* w animacjach, walidacjach i interakcjach pozwala tworzyć komponenty naprawdę elastyczne i reużywalne. To most między strukturą a logiką. Im lepiej zorganizujesz dane, tym czystszy i łatwiejszy w rozwoju będzie Twój kod JS i CSS.

Previous Temat

Back to Zagadnienie

Next Quiz

Przykłady użycia data-* w animacjach, walidacjach, interakcjach