Formularz HTML - element "input" typu "radio"
- Data publikacji
- Ostatnio edytowano
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?
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?
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?
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: