label i powiązanie pól — HTML

Etykieta <label> opisuje pole formularza.

Cel lekcji

Poznać zagadnienie „label i powiązanie pól”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Jej for musi wskazywać id pola, aby kliknięcie etykiety również ustawiało fokus i pomagało technologiom wspomagającym.

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 for="age">Wiek</label>
<input type="number" id="age" name="age" min="0">

Przeczytaj kod linijka po linijce

<label for="age">Wiek</label>Ten znacznik określa element lub strukturę dokumentu.
<input type="number" id="age" name="age" min="0">Tworzymy pole służące do wprowadzania danych.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Pole liczby z etykietą „Wiek”.

◉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

Dodaj pole nazwiska z osobnym label.