Checkbox i radio — HTML

Checkbox przydaje się do niezależnej zgody lub opcji, a radio do wybrania jednej odpowiedzi z grupy.

Cel lekcji

Poznać zagadnienie „Checkbox i radio”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Pola radio jednej grupy mają wspólny name.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Widok w przeglądarce

<label><input type="checkbox" name="terms"> Akceptuję regulamin</label>
<label><input type="radio" name="size" value="s"> Mały</label>
<label><input type="radio" name="size" value="l"> Duży</label>

Przeczytaj kod linijka po linijce

<label><input type="checkbox" name="terms"> Akceptuję regulamin</label>Ten znacznik określa element lub strukturę dokumentu.
<label><input type="radio" name="size" value="s"> Mały</label>Ten znacznik określa element lub strukturę dokumentu.
<label><input type="radio" name="size" value="l"> Duży</label>Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Jeden checkbox i dwie wzajemnie wykluczające się opcje.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Utwórz radio z trzema poziomami kursu.