Jak zrobić test wyboru w HTML?

Aby przygotować test wyboru w HTML (popularnie zwany quizem jednokrotnego lub wielokrotnego wyboru), wykorzystuje się elementy formularza – przede wszystkim znaczniki <input type="radio"> oraz <input type="checkbox">. Test można rozbudować o opisy, nagłówki, obsługę przycisków i podstawową walidację. Poniżej znajdziesz obszerne wyjaśnienia oraz praktyczne przykłady zastosowań, które można natychmiast wykorzystać lub modyfikować w projekcie internetowym.

Podstawy – rodzaje testów wyboru

Test jednokrotnego wyboru – użytkownik może zaznaczyć tylko jedną odpowiedź (używamy <input type="radio">).
Test wielokrotnego wyboru – użytkownik może zaznaczyć dowolną liczbę odpowiedzi (stosujemy <input type="checkbox">).

Test jednokrotnego wyboru – przykład kodu HTML

<form>
  <h2>Co jest stolicą Polski?</h2>
  <label>
    <input type="radio" name="question1" value="warszawa"> Warszawa
  </label><br>
  <label>
    <input type="radio" name="question1" value="krakow"> Kraków
  </label><br>
  <label>
    <input type="radio" name="question1" value="poznan"> Poznań
  </label>
</form>

Wyjaśnienie –

• wszystkie odpowiedzi z tego samego pytania mają tę samą nazwę name="question1", co zapewnia, że można wybrać tylko jedną odpowiedź w ramach tego pytania,
• przy każdej opcji znajduje się znacznik <label>, dzięki czemu kliknięcie tekstu obok zaznaczy daną odpowiedź (to podnosi wygodę użytkownika).

Test wielokrotnego wyboru – przykład kodu HTML

<form>
  <h2>Które z poniższych to języki programowania?</h2>
  <label>
    <input type="checkbox" name="languages[]" value="python"> Python
  </label><br>
  <label>
    <input type="checkbox" name="languages[]" value="html"> HTML
  </label><br>
  <label>
    <input type="checkbox" name="languages[]" value="css"> CSS
  </label><br>
  <label>
    <input type="checkbox" name="languages[]" value="polski"> Polski
  </label>
</form>

Wyjaśnienie –

• Checkbox pozwala wybrać więcej niż jedną odpowiedź. Zauważ konwencję nazwy pola name="languages[]" – taki zapis ułatwia późniejsze przetwarzanie danych po stronie serwera.

Dodanie przycisku „wyślij” oraz walidacji

Typowe testy wyboru zakończone są przyciskiem do przesyłania danych. Minimalny kod:

<form>
  <!-- Pytania -->
  <input type="submit" value="Wyślij odpowiedzi">
</form>

Aby po stronie przeglądarki sprawdzić, czy wybrano przynajmniej jedną odpowiedź, można zastosować atrybut required (działa dla radio):

<input type="radio" name="pytanie1" value="a" required>

Dla checkboxów taka walidacja wymaga JavaScript.

Przykład rozbudowanego testu (kilka pytań, stylizacja)

<form>
  <fieldset>
    <legend>Pytanie 1 z 3</legend>
    <label>
      <input type="radio" name="q1" value="tak" required> Tak
    </label>
    <label>
      <input type="radio" name="q1" value="nie"> Nie
    </label>
  </fieldset>
  <fieldset>
    <legend>Pytanie 2 z 3</legend>
    <label>
      <input type="checkbox" name="q2[]" value="java"> Java
    </label>
    <label>
      <input type="checkbox" name="q2[]" value="csharp"> C#
    </label>
    <label>
      <input type="checkbox" name="q2[]" value="angielski"> Angielski
    </label>
  </fieldset>
  <fieldset>
    <legend>Pytanie 3 z 3</legend>
    <label>
      <input type="radio" name="q3" value="morze"> Morze
    </label>
    <label>
      <input type="radio" name="q3" value="góry"> Góry
    </label>
  </fieldset>
  <input type="submit" value="Wyślij">
</form>

Zastosowanie dodatkowych możliwości HTML

• Label – klikając w tekst, zaznaczysz opcję;
• Fieldset i legend – porządkują formularz wizualnie i semantycznie, poprawiając czytelność;
• Atrybuty accesskey – pozwalają przypisać skróty klawiszowe do opcji (pomocne dla osób korzystających z klawiatury);
• Atrybut disabled lub readonly – wyłączają opcję odpowiedzi, np. w testach rozgrzewkowych.

Wskazówki praktyczne

• Dobrze oznacz pytania i odpowiedzi – stosuj opisy i podpowiedzi dla użytkownika;
• Zapisuj odpowiedzi po stronie serwera lub obsługuj wyniki przez JavaScript – samo HTML nie analizuje poprawności odpowiedzi;
• Dbaj o responsywność i dostępność – prosta struktura label + input jest przyjazna również dla osób korzystających z czytników ekranu;
• Styluj formularz CSS, by podnieść czytelność i estetykę testu.

Przykłady zastosowania testów wyboru

• Quizy edukacyjne – podsumowanie lekcji, sprawdziany, nauka języków;
• Ankiety satysfakcji – szybkie badania opinii, formularze kontaktowe;
• Rejestracja usług – wybór preferencji klienta podczas zapisu.

Podsumowując – test wyboru w HTML opiera się na przemyślanym użyciu pól radio i checkbox, z opisami, grupowaniem pytań i opcjonalną walidacją. Tak przygotowany formularz sprawdzi się zarówno w prostych quizach, jak i bardziej rozbudowanych internetowych testach czy ankietach.