Formularze w HTML
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Wprowadzenie do formularzy w HTML
Formularze w HTML służą do zbierania danych od użytkowników i przesyłania ich do serwera w celu dalszego przetwarzania. To dzięki formularzom możliwe jest logowanie, rejestracja, wysyłanie wiadomości, składanie zamówień czy wyszukiwanie informacji. Stanowią one jeden z kluczowych elementów interakcji między użytkownikiem a aplikacją webową.
Podstawowa struktura formularza
Formularz tworzony jest za pomocą znacznika <form>:
<form>
<!– pola formularza –>
</form>
Elementy formularza
Wewnątrz formularza umieszcza się różne pola, za pomocą których użytkownik może wprowadzać dane.
Atrybut type w elemencie <input> określa rodzaj pola formularza, dzięki czemu przeglądarka wie, jakiego typu dane mają zostać wprowadzone. HTML oferuje wiele typów, takich jak text, password, email, number, checkbox, radio czy date, które umożliwiają tworzenie różnych form interakcji.
Odpowiedni dobór typu wpływa na wygodę użytkownika oraz poprawność danych, ponieważ przeglądarka może automatycznie weryfikować ich format. W HTML5 wprowadzono dodatkowe typy, które rozszerzają funkcjonalność formularzy i ułatwiają tworzenie nowoczesnych interfejsów.
Najczęściej używane elementy to:
1. Pole tekstowe
<input type=”text” name=”imie”>
2. Pole hasła
<input type=”password” name=”haslo”>
3. Pole wyboru (checkbox)
<input type=”checkbox” name=”zgoda”> Akceptuję regulamin
4. Przycisk opcji (radio)
<input type=”radio” name=”plec” value=”k”> Kobieta
<input type=”radio” name=”plec” value=”m”> Mężczyzna
5. Listy wyboru
<select name=”kraj”>
<option value=”pl”>Polska</option>
<option value=”de”>Niemcy</option>
</select>
6. Pole do wpisania większej ilości tekstu
<textarea name=”wiadomosc”></textarea>
7. Przycisk wysyłający formularz
<button type=”submit”>Wyślij</button>
Zadanie:
Stwórz formularz, który będzie zawierał:
pole na imię,
pole na nazwisko,
pole na ulubiony kolor,
przycisk
Wyślijoraz osobny przyciskbuttonz dowolnym tekstem.
