Formularze: zbieranie danych od użytkownika
Tworzenie prostych formularzy z polami tekstowymi, przyciskami i nie tylko
Formularze: zbieranie danych od użytkownika to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Formularze: zbieranie danych od użytkownika
Witamy w następnej lekcji! Dziś nauczymy się tworzyć formularze w HTML. Formularze umożliwiają użytkownikom wprowadzanie danych, takich jak imię i nazwisko czy adres e-mail, na stronie internetowej.
Czym są formularze?
Formularze służą do zbierania informacji od użytkowników. Na przykład podczas zakładania konta wypełnia się formularz zawierający pola takie jak imię i nazwisko oraz adres e-mail.
Formularze w HTML tworzy się za pomocą znacznika <form>.
Tworzenie podstawowego formularza
Formularz tworzy się za pomocą znacznika <form>. Wewnątrz tego znacznika można umieścić pola tekstowe, przyciski i inne elementy.
Przykład:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
Typy pól formularza
Formularze HTML obsługują różne typy pól. Oto kilka często używanych:
text: Do wprowadzania krótkiego tekstuemail: Do adresów e-mailpassword: Do hasełnumber: Do liczb
Przykład:
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</form>
Dodawanie przycisków opcji i pól wyboru
Przycisków opcji można używać do wyboru jednej możliwości, a pól wyboru do wyboru wielu możliwości.
Przykład:
<form>
<p>Favorite Color:</p>
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
<br />
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading" />
<label for="reading">Reading</label>
<br />
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label>
</form>
Dodawanie menu rozwijanych
Za pomocą znacznika <select> można tworzyć menu rozwijane, z których użytkownicy wybierają opcje z listy.
Przykład:
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>
Przyciski formularza
Przyciski umożliwiają użytkownikom wysłanie formularza lub wyczyszczenie jego zawartości. Najczęściej używa się do tego znacznika <button>.
Przykład:
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Stylizowanie formularza
Formularz można stylizować za pomocą CSS, aby wyglądał atrakcyjniej. Można na przykład zmienić rozmiar pól lub ich kolory.
Przykład:
<style>
form {
width: 300px;
margin: 20px auto;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>
Świetna robota!
Gratulacje! Wiesz już, jak tworzyć formularze, używać różnych typów pól i je stylizować. Formularze są niezbędne do zbierania danych użytkowników i tworzenia interaktywnych stron internetowych. W następnej lekcji poznamy multimedia, takie jak filmy i dźwięki, aby nadać stronom większą dynamikę. Przygotuj się na jeszcze więcej kreatywności!
Często zadawane pytania
Czy lekcja „Formularze: zbieranie danych od użytkownika” jest bezpłatna?
Tak — pełny tekst „Formularze: zbieranie danych od użytkownika” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Co nauczysz się w „Formularze: zbieranie danych od użytkownika”?
Tworzenie prostych formularzy z polami tekstowymi, przyciskami i nie tylko Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Formularze: zbieranie danych od użytkownika”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Tabele: organizowanie danych
- Formularze: zbieranie danych od użytkownika
- Atrybuty HTML
- Multimedia: dodawanie filmów i dźwięku