Saf CSS ve HTML öğeleri ile yıldızlı değerlendirme formu

July 15, 2021

JavaScript kullanmadan sadece CSS ve HTML öğeleri ile yıldızlı puan (değerlendirme) formu oluşturmak.

“Böyle bir şeye neden ihtiyaç duyulur ki?” dediğinizi duyar gibiyim. JavaScript ile pekala bunu halledebiliriz, hatta ve hatta bunu yapan bir çok JavaScript / jQuery kütüphaneleri mevcut.

Fakat bazı durumlarda o kadar hassas olabiliyoruz ki, minimum düzeyde JS kullanımı önceliğimiz olabiliyor. Bunun yanı sıra JavaScript sonuçta istemci tarafında ve tarayıcı’ dan (Browser) bağımsız çalışır. Yani uzun lafın kısası, istemci tarafındaki makine Java’yı kaldırmış veya engellemiş olabilir. Bu durumda hangi tarayıcıdan erişmiş olursa olsun JavaScript kodlarımız hiç bir şekilde çalışmayacaktır. Ayrıca tarayıcıdan da JS’ i manuel olarak da kapatabilme olasılığını dikkate almak gerekiyor.

Böylesi durumlarda JS komutlarının hiç çalışmaması sitenin işlevselliğini yitirmesiyle sonuçlanabilir.

Tabi bu örnekleri say say bitmez. JavaScript ile çapraz uyumluluk da oldukça zor olacaktır. (Tabii bu hitap edilen kitleye, cihaza ve hatta dolaylı da olsa lokasyona göre görecelidir).

Native yollarla tasarlamak

CSS ve HTML5 sayasinde herhangi bir JavaScript kodu yazmaya gerek kalmadan, Slider, Carousel, LightBox (FancyBox), Collapse gibi JS ile hazırlanmış componentleri hazırlamak mümkün.

İşte bu yazının devamında da, bir çok alış-veriş (e-ticaret) sitelerinde olduğu gibi değerlendirme formunu herhangi bir JavaScript yazmadan hazırlayacağız.

HTML Yapısının hazırlanması

Öncelikle <div class="rating"> şeklinde bir ana öğemiz olacak ve diğer tüm elemanların ebeveyni olacak.
Bunun içine <input type="radio"> olacak şekilde kaç tane değer göstermek istiyorsak o kadar sayıda ekleyeceğiz.
Inputlarımıza name="rating" değerini atayarak ortak işleyen bir grup haline getirelim.
Her bir Inputumuza benzersiz bir id veriyoruz. Bu çok önemli çünkü az sonra CSS ile Inputlarımızı gizleyecek ve onun yerine işaret eden (verdiğimiz benzersiz ID’ler sayesinde) <label>’ ler görev alacak ve görünür olacaktır.
Her bir label’ e onun işaret ettiği input’ un id değerlerini for="..." olarak girelim.
Geri kalan kısım tamamen CSS3 ile birlikte gelen flexbox sayesinde stilize etmek ve gösterip gizlemekle ilgili…

Örnek kod

<html>
  <head>
    <style>
      .rating {
          display: flex;
          flex-direction: row-reverse;
          justify-content: center
      }

      .rating>input {
          display: none
      }

      .rating>label {
          position: relative;
          width: 1em;
          font-size: 6vw;
          color: #FFD600;
          cursor: pointer
      }

      .rating>label::before {
          content: "\2605";
          position: absolute;
          opacity: 0
      }

      .rating>label:hover:before,
      .rating>label:hover~label:before {
          opacity: 1 !important
      }

      .rating>input:checked~label:before {
          opacity: 1
      }

      .rating:hover>input:checked~label:before {
          opacity: 0.4
      }

      body {
          background: #222225;
          color: white
      }

      h1,
      p {
          text-align: center
      }

      h1 {
          margin-top: 150px
      }

      p {
          font-size: 1.2rem
      }

      @media only screen and (max-width: 600px) {
          h1 {
              font-size: 14px
          }

          p {
              font-size: 12px
          }
      }
    </style>
  </head>
  <body>
    <h1>Star rating </h1>
    <div class="rating"> <input type="radio" name="rating" value="5" id="5"><label for="5">☆</label> <input type="radio" name="rating" value="4" id="4"><label for="4">☆</label> <input type="radio" name="rating" value="3" id="3"><label for="3">☆</label> <input type="radio" name="rating" value="2" id="2"><label for="2">☆</label> <input type="radio" name="rating" value="1" id="1"><label for="1">☆</label>
    </div>  
  </body>
</html>