Formularz HTML - element "input" typu "radio"

Element input ze względu na swoją wartość atrybutu type może przybrać różną formę.

Gdy element input posiada atrybut type o wartości text, wtedy wspomniany element input jest po prostu polem, do którego możemy wprowadzić dowolny jednowierszowy ciąg znaków (o czym mogliśmy przekonać się już wcześniej).

Przykład:

<input type="text">

Rezultat:

Gdy element input posiada atrybut type o wartości radio, wtedy wspomniany element input reprezentuje pole wyboru typu radio, które może zostać przez nas wybrane bądź też nie.

Przykład:

<input type="radio">

Rezultat:

Za pomocą kilku elementów input posiadających atrybut type o wartości radio możemy utworzyć jedną grupę pól wyboru typu radio.

Przykład:

<p>
  Który kolor wolisz?
</p>

<p>
  <label>
    <input type="radio"> Czerwony
  </label>
</p>

<p>
  <label>
    <input type="radio"> Zielony
  </label>
</p>

<p>
  <label>
    <input type="radio"> Niebieski
  </label>
</p>

Rezultat:

Który kolor wolisz?

Czerwony

Zielony

Niebieski

Jeżeli chcemy, aby każdy przykładowy element input posiadający atrybut type o wartości radio należał do tej samej grupy pól wyboru typu radio, wtedy do każdego wspomnianego elementu input należy dodać atrybut name wraz z tą samą wartością.

Przykład:

<p>
  Który kolor wolisz?
</p>

<p>
  <label>
    <input type="radio" name="kolor"> Czerwony
  </label>
</p>

<p>
  <label>
    <input type="radio" name="kolor"> Zielony
  </label>
</p>

<p>
  <label>
    <input type="radio" name="kolor"> Niebieski
  </label>
</p>

Rezultat:

Który kolor wolisz?

Czerwony

Zielony

Niebieski

Od tej pory z naszej przykładowej grupy pól wyboru typu radio możemy wybrać jedno pole.

Gdy zdecydujemy się wybrać, któreś pole z naszej przykładowej grupy pól wyboru typu radio, wtedy zawsze, któreś pole należące do naszej przykładowej grupy pól wyboru typu radio będzie polem wybranym.

Domyślnie żadne pole należące do grupy pól wyboru typu radio nie jest polem wybranym, lecz sytuację tę możemy zmienić za pomocą atrybutu logicznego checked.

Przykład:

<p>
  Który kolor wolisz?
</p>

<p>
  <label>
    <input type="radio" name="kolor"> Czerwony
  </label>
</p>

<p>
  <label>
    <input type="radio" name="kolor"> Zielony
  </label>
</p>

<p>
  <label>
    <input type="radio" name="kolor" checked> Niebieski
  </label>
</p>

Rezultat:

Który kolor wolisz?

Czerwony

Zielony

Niebieski

Gdy chcemy, aby dana reprezentowana przez interesujące nas pole wyboru typu radio posiadała określoną wartość w przypadku gdy wspomniane interesujące nas pole wyboru typu radio zostanie przez nas wybrane, wtedy do wspomnianego interesującego nas pola wyboru typu radio reprezentowanego przez element input, który posiada atrybut type o wartości radio należy dodać atrybut value wraz z interesującą nas wartością.

Przykład:

<p>
  Który kolor wolisz?
</p>

<p>
  <label>
    <input type="radio" name="kolor" value="red"> Czerwony
  </label>
</p>

<p>
  <label>
    <input type="radio" name="kolor" value="green"> Zielony
  </label>
</p>

<p>
  <label>
    <input type="radio" name="kolor" value="blue" checked> Niebieski
  </label>
</p>

W ten o to sposób utworzoną grupę pól wyboru typu radio możemy powiązać z interesującym nas formularzem HTML.

Przykład:

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    Który kolor wolisz?
  </p>

  <p>
    <label>
      <input type="radio" name="kolor" value="red"> Czerwony
    </label>
  </p>

  <p>
    <label>
      <input type="radio" name="kolor" value="green"> Zielony
    </label>
  </p>

  <p>
    <label>
      <input type="radio" name="kolor" value="blue" checked> Niebieski
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Który kolor wolisz?

Czerwony

Zielony

Niebieski

zatwierdź