Tag etykiety HTML służy do definiowania podpisu elementu w formularzu HTML. Są one dostępne za pomocą tagu i są połączone z określonym modułem internetowym. Po kliknięciu umożliwiają użytkownikowi interakcję z formularzem.
Podczas tworzenia formularzy HTML możesz dodać podpis do pól formularza. Na przykład możesz chcieć, aby pole formularza, które wymaga imienia i nazwiska klienta, miało podpis Nazwa:.
Tutaj kod HTML pojawia się znacznik. Znacznik służy do definiowania podpisu dla elementu sterującego formularza w formularzu HTML. Każda etykieta jest powiązana z określonym elementem w formularzu.
Ten samouczek wyjaśni, odwołując się do przykładów, jak używać tagu etykiety HTML w celu dodania etykiety do formularza. Po przeczytaniu tego samouczka będziesz ekspertem w tworzeniu etykiet formularzy za pomocą HTML.
HTML Label
Tag dodaje `etykieta do określonego elementu formularza w formularzu. Każdy znacznik etykiety jest powiązany z elementem formularza za pomocą atrybutu HTML for.
Istnieje kilka powodów, dla których należy używać znacznika , który jest ważne. Po pierwsze, etykieta jest powiązana z konkretnym polem formularza na stronie internetowej. Oznacza to, że jeśli czytnik ekranu napotka pole formularza, zawartość określonej etykiety zostanie odczytana użytkownikowi. To z kolei czyni Twoją witrynę bardziej dostępną.
Dodatkowo, gdy tag jest powiązany z polem formularza, użytkownik może kliknąć tekst wewnątrz etykiety aby aktywować moduł. Ułatwia to użytkownikowi rozpoczęcie interakcji z polem formularza, ponieważ nie musi bezpośrednio klikać elementu.
Na przykład, jeśli element pola wyboru nie jest zaznaczony, użytkownik będzie musiał kliknąć bezpośrednio w polu wyboru, aby aktywować element. Jeśli określiłeś tag , użytkownik może również kliknąć tag, aby aktywować pole wyboru.
div class = `code-block code-block-13` style = `margin: 8px 0; clear: both; `>
Składnia tagów HTML
Składnia tagu HTML to:
Atrybut for umożliwia powiązanie etykiety z konkretnym element. Wartość atrybutu dla musi być taka sama, jak atrybut wejściowy id używany przez element .
Można również wstawić pole do etykiety, aby połączyć formularz wejściowy z etykietą, zamiast używać atrybutu dla . Składnia tego jest następująca:
Tag HTML obsługuje wszystkie globalne atrybuty w HTML. Dodatkowo tag jest obsługiwany we wszystkich głównych przeglądarkach.
Przykłady etykiet HTML
Załóżmy, że tworzysz pole formularza internetowego, które wymaga użytkownika na ich adres e-mail.
Chcemy, aby pole formularza wyświetlało się z podpisem Jaki jest Twój adres e-mail? Możemy to zrobić na dwa sposoby: użyj dla atrybutu lub użyj etykiety zagnieżdżonej.
dla atrybutu
Możemy użyć poniższego kodu, aby dodać ten tag do pola wejściowego za pomocą atrybutu for:
Nasz kod zwraca następujące informacje:
Rozłóżmy nasz kod.
W pierwszym wierszu użyliśmy tag, aby dodać etykietę Jaki jest Twój adres e-mail? do naszego formularza internetowego. Określiliśmy atrybut dla i przypisaliśmy mu wartość email_address, która łączy etykietę z naszym polem formularza o identyfikatorze email_address .
Na końcu wiersza użyliśmy tagu , aby wstawić pustą poziomą linię do naszego kodu.
W poniższym wierszu utworzyliśmy pole wprowadzania tekstu za pomocą znacznika . To pole wejściowe ma identyfikator email_address , którego używamy do powiązania pola wejściowego z tagiem.
Zagnieżdżony tag
Alternatywnie możemy użyć < tag code> zagnieżdżony w tagu w celu utworzenia naszej etykiety. Oto kod, którego użyjemy do utworzenia zagnieżdżonej etykiety dla naszego formularza internetowego powyżej:
Nasz kod zwraca:
Nasz formularz jest wizualnie taki sam jak nasz pierwszy przykład. Jednak w tym przykładzie nie używamy atrybutu for do powiązania naszej etykiety z naszym formularzem. Zamiast tego umieszczamy nasz tag wewnątrz tagu , który łączy ze sobą dwa tagi HTML.
Ułatwienia dostępu do etykiet HTML
Istnieje kilka uwag dotyczących ułatwień dostępu, o których należy pamiętać podczas projektowania etykiety przy użyciu tagu .
Po pierwsze, nie należy umieszczać nagłówków wewnątrz tag . Dzieje się tak, ponieważ elementy nagłówka w tagach mogą zakłócać technologie czytania ekranu i inne narzędzia używane do promowania dostępności sieci. Tak więc, jeśli chcesz dodać nagłówek do etykiety formularza, musisz to zrobić poza wszelkimi tagami .
Po drugie, nie należy umieszczać żadnych przycisków ani linki wewnątrz tagu . Dzieje się tak, ponieważ elementy interaktywne w tagu mogą być mylące dla użytkownika w zrozumieniu, jak działa formularz internetowy. Jeśli przycisk jest dostępny na przykład w , użytkownik może pomyśleć, że musi go kliknąć, aby wejść w interakcję z formularzem internetowym.
Wniosek
Tag HTML służy do tworzyć etykiety formularzy. Etykiety te są połączone z konkretnym formularzem internetowym i po kliknięciu umożliwiają użytkownikowi interakcję z formularzem.
W tym samouczku, odwołując się do przykładów, pokazano, jak używać kodu HTML , aby dodać etykiety do elementu formularza, a także problemy z dostępnością związane z tagiem . Masz teraz wiedzę, aby rozpocząć pracę z HTML tagi jak profesjonalista!
