Zdarza się, że stworzyliśmy ekstra formularz ankiety i chcemy poinformować użytkownika korzystającego z niego o ilości zaznaczonych odpowiedzi czy też o ilości prawidłowych odpowiedzi. A to wszystko na bieżąco. Możemy to zrobić bez użycia JavaScript. Nie będzie trzeba dodawać obsługi zdarzeń, liczyć zaznaczonych, ustawiać w jakimś elemencie obliczonej wartości.

Wykorzystamy do tego CSS-owy licznik, a dokładnie zmienną, której wartością możemy sterować przy pomocy kombinacji HTML+CSS.

Zacznijmy od przykładu wykorzystania licznika do numerowania elementów listy. Co prawda można wykorzystać natywną numerację, ale ma on jednak mniejsze możliwości stylowania. Czyli na razie checkbox'y odkładamy na bok.

Konstruując formularz HTML zawsze mamy do dyspozycji niezliczoną pulę....pól, list, ptaszków, guzików, nawet przycisków. Co jednak z tego, że dodamy kilka przycisków skoro i tak każdy z nich kieruje formularz po zatwierdzeniu na ten sam adres. Adres oczywiście w atrybucie action formularza.

Można kombinować z ustawianiem wartości dla pól hidden podczas klikania w przycisk submit. Można co gorsza próbować ustawiać inny parametr action formularza przed zatwierdzeniem.

Stworzyłeś wspaniałą stronę typu one-page. Nagłówek jest przyklejony do górnej krawędzi, a nawigacja oparta o hashe bez użycia JavaScript. Wygląda fajnie i nowocześnie, ale kliknięcie w link nawigacji powoduje przesunięcie na samą górę, a więc header skutecznie przykrywa fragment tej sekcji strony.

Jak zmusić stronę, aby ustawiała się pod nagłówkiem, czyli z przesunięciem o zadaną ilość pikseli?

Jest kilka rozwiązań tego problemu. Tu przedstawię jedną, nie wiem czy najprostszą, ale prostą.

Tak jak współżycie bajkowego Pawła i Gawła było burzliwe, tak problematyczne może być ustawienie dwóch wycentrowanych elementów jeden pod drugim.

Niech za przykład posłuży poniższa struktura. Mamy tu element HEADER, a w nim nawigację (NAV) oraz zdjęcie (IMG), np. logo.

<header>
  <nav>
    <a href="#">menu 1</a>
    <a href="#">menu 2</a>
    <a href="#">menu 3</a>
    <a href="#">menu 4</a>
  </nav>

  <img src="http://kawalekkodu.pl/bl-themes/skeleton/img/kawalek_kodu.png" />
</header>

+

header {
  text-align: center;
}

nav {
  background: #ff0;
}

Ku, być może smutkowi niekórych, dziś będziemy się zajmować checkbox'ami znanymi z formularzy HTML. Niestety nie żywymi ptaszkami. Cel do osiągnięcia jest następujący: dla grupy checkbox'ów mamy zablokować możliwość ich kliknięcia powyżej wybranej liczby. Np. mając 10 ptaszków chcemy umożliwić zaznaczenie tylko trzech.

Jeśli lubisz czasem zaszpanować, to dziś coś dla Ciebie. Suwak z blichtrem prawie od pstryknięcia palcem.
Zapewne zauważyłeś, że suwaki elementów na stronie HTML są umieszczone po prawej stronie. A czy jest możliwe umieszczenie scrollbara po lewej stronie?