Powtórzenie — formularze nr 2
Część sekcji Podstawy ścieżki HTML w Coddy. Lekcja 47 z 60.
Wyzwanie
ŁatwyZbudujmy prosty formularz rejestracyjny, taki jak na poniższym obrazku!
Oto, co należy uwzględnić:
- Tag
<form>, który obejmie wszystkie elementy. - Pole Username z etykietą i polem tekstowym. Etykieta powinna zawierać tekst
"Username:"i używać for="username". Pole powinno mieć atrybutyid="username",name="username",type="text"oraz placeholder"Enter your username". - Pole Email z etykietą i polem na adres e-mail. Etykieta powinna zawierać tekst
"Email:"i używaćfor="email". Pole powinno mieć atrybutyid="email",name="email",type="email" oraz placeholder"Enter your email". - Pole Password z etykietą i polem na hasło. Etykieta powinna zawierać tekst
"Password:"i używaćfor="userpassword". Pole powinno mieć atrybutyid="userpassword",name="userpassword",type="password"oraz placeholder"Enter your password". - Grupa przycisków opcji, które pozwolą użytkownikom wybrać typ:
"Student"lub"Teacher". Dodaj akapit lub nagłówek z tekstem"User Type:"nad przyciskami opcji. Przycisk opcji"Student"powinien mieć atrybutyid="student",name="usertype",value="student"oraz etykietę z tekstem"Student". Przycisk opcji"Teacher"powinien mieć atrybutyid="teacher",name="usertype",value="teacher"oraz etykietę z tekstem"Teacher". Pamiętaj: oba przyciski opcji muszą mieć ten sam atrybut name ("usertype"), aby można było zaznaczyć tylko jeden z nich naraz. - Grupa pól wyboru, które pozwolą użytkownikom wybrać zainteresowania:
"Sports","Music"i"Technology". Dodaj akapit lub nagłówek z tekstem"Interests:"nad polami wyboru. Pole wyboru"Sports"powinno mieć atrybutyid="sports",name="interests",value="sports"oraz etykietę z tekstem"Sports". Pole wyboru"Music"powinno mieć atrybutyid="music",name="interests",value="music"oraz etykietę z tekstem"Music". Pole wyboru"Technology"powinno mieć atrybutyid="technology",name="interests",value="technology"oraz etykietę z tekstem"Technology". Pamiętaj: wszystkie pola wyboru powinny mieć ten sam atrybut name ("interests"), ponieważ należą do tej samej grupy. - Przycisk Sign Up i przycisk Clear na końcu formularza. Przycisk Sign Up powinien mieć
type="submit", a przycisk Clear powinien miećtype="reset". Przycisk Sign Up powinien wyświetlać tekst "Sign Up", a przycisk Clear — tekst “Clear”.
Pamiętaj, aby dodać odpowiednie etykiety i tytuły, dzięki którym formularz będzie przyjazny dla użytkownika!
Pamiętaj, że pola powinny zawierać te ważne atrybuty:
type,id,nameivalue.
Spróbuj swoich sił
<!DOCTYPE html>
<html>
<body>
<!-- Wpisz kod tutaj -->
</body>
</html>Wszystkie lekcje w sekcji Podstawy
1Podstawy HTML
Czym jest HTML?Podstawowa struktura dokumentu HTMLTagi i elementyZagnieżdżanie i zamykanie tagówKomentarze w HTML7Strona profilu osobistego
Omówienie projektuSekcja nagłówka
Zdjęcie profiloweSekcja „O mnie”Linki do mediów społecznościowych2Tekst i formatowanie
NagłówkiAkapityPodziały wierszaTekst pogrubiony i pochylonyPonownie: tekst pogrubiony i pochylonyPodsumowanie — formatowanie8Formularze i pola wejściowe, część 1
Podstawy formularzyPola tekstoweAtrybuty pólPole hasłaEtykiety pólPodsumowanie – podstawowy formularz11Strona rejestracji na wydarzenie
Przegląd projektuSekcja nagłówkaSekcja szczegółów wydarzeniaFormularz rejestracyjnySekcja stopki6Układ strony
Elementy blokoweElementy linioweZnaczniki semantyczneSekcje i artykułyPodsumowanie — układ9Formularze i pola wejściowe, część 2
Przyciski opcjiPola wyboruListy rozwijanePrzyciskiPrzyciski w formularzachPowtórzenie — formularze nr 1Powtórzenie — formularze nr 2Poćwicz samodzielnie: Edytor online Web