W formularzach HTML można dodać dwa podobne, ale działające inaczej pola:
- input type=”checkbox” (kwadraciki – mogę zaznaczyć wiele)
- input type=”radio” (kółeczka – mogę zaznaczyć jedno)
Dodaje się je podobnie, ale…
<input type="radio" name="promocja" id="kr">
<label for="kr">Krótkie</label>
<input type="radio" name="promocja" id="sr">
<label for="sr">Średnie</label>
<input type="radio" name="promocja" id="po">
<label for="po">Półdługie</label>
<input type="radio" name="promocja" id="dl">
<label for="dl">Długie</label><input type="checkbox" id="kot" name="kot">
<label for="kot">Koteczek</label>
<input type="checkbox" id="pies" name="pies">
<label for="pies">Pieseczek</label>
<input type="checkbox" id="osa" name="osa">
<label for="osa">Mała osa</label>
<input type="checkbox" id="slon" name="slon">
<label for="slon">SŁonik</label>Wszystkie radio mają to samo name, czyli tworzą jedną grupę (można wybrać tylko jeden).
Jeśli każdy checkbox ma inne name, wtedy każdy traktowany jest jako osobne pole true/false.
Gdyby wszystkie checkboxy miały by to samo name, to na serwer wysłały by listę zaznaczonych wartości
JavaScript
Checkboxy są potrzebne np. w zadaniu INF.03-05-24.01-SG. JS jest podobny do tego poniżej.
Radio są potrzebne w zadaniu z drill.1 Tu jest plik pdf z zadaniem. Poniżej kod gotowego rozwiązania:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="stylB.css">
</head>
<body>
<div>
<div id="kolumna_szeroka">
<section id="lewy1" >
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="lewy2" >
<h2>PROMOCJA</h2>
<form>
<input type="radio" name="promocja" id="kr"><label for="kr">Krótkie</label><br>
<input type="radio" name="promocja" id="sr"><label for="sr">Średnie</label><br>
<input type="radio" name="promocja" id="po"><label for="po">Półdługie</label><br>
<input type="radio" name="promocja" id="dl"><label for="dl">Długie</label><br>
<input type="button" value="Odkryj promocję" onclick="promo()"><br>
<p id="wynik">...</p>
</form>
</section>
<section id="lewy3" >
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
</div>
<div id="kolumna_waska">
<section id="prawy1" class="prawy">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr><th>Długość włosów</th><th>Cena</th></tr>
<tr><td>Krótkie</td><td>25</td></tr>
<tr><td>Średnie</td><td>30</td></tr>
<tr><td>Półdługie</td><td>40</td></tr>
<tr><td>Długie</td><td>50</td></tr>
</table>
</section>
<section id="prawy2" class="prawy">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
</div>
<section id="stopka">
<p>Autor:1234567890</p>
</section>
</div>
<script>
function promo() {
let wynik = document.getElementById("wynik");
let cena = "";
if (document.getElementById("kr").checked) {
cena = "Cena promocyjna: 15 zł";
} else if (document.getElementById("sr").checked) {
cena = "Cena promocyjna: 20 zł";
} else if (document.getElementById("po").checked) {
cena = "Cena promocyjna: 30 zł";
} else if (document.getElementById("dl").checked) {
cena = "Cena promocyjna: 40 zł";
} else {
cena = "Wybierz długość włosów!";
}
wynik.textContent = cena;
}
</script>
</body>
</html>
Twój komentarz