Formularze HTML – Część II
W tej części przyjrzymy się bardziej zaawansowanym elementom formularzy HTML, które pozwalają tworzyć jeszcze bardziej interaktywne i intuicyjne pola dla użytkowników. Omówimy listy rozwijane, przyciski wyboru, pola liczby oraz techniki walidacji formularzy w HTML5.
Listy rozwijane (Select)
Lista rozwijana, tworzona za pomocą znacznika <select>, umożliwia użytkownikowi wybór jednej z kilku dostępnych opcji. Opcje umieszczamy wewnątrz znacznika <select>, korzystając z tagu <option>. Listy rozwijane są szczególnie przydatne, gdy użytkownik ma do wyboru kilka zdefiniowanych opcji.
Przykład listy rozwijanej:
<label for="country">Wybierz kraj:</label>
<select id="country" name="country">
<option value="polska">Polska</option>
<option value="niemcy">Niemcy</option>
<option value="francja">Francja</option>
</select>
Przycisk wyboru (Radio Button)
Przyciski wyboru, znane także jako radio buttony, umożliwiają użytkownikowi wybór jednej opcji z grupy możliwości. Wszystkie przyciski, które mają mieć wzajemnie wykluczający się wybór, muszą mieć taką samą wartość atrybutu name, co sprawia, że można wybrać tylko jedną opcję.
Przykład przycisków wyboru:
<p>Wybierz płeć:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Mężczyzna</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Kobieta</label>
Pola liczby i zakresu (Number, Range)
HTML5 wprowadza typy pól number i range, które pozwalają użytkownikowi na łatwiejsze wprowadzenie wartości liczbowych.
- Pole liczby –
<input type="number">umożliwia wprowadzenie liczby w określonym zakresie lub przy użyciu strzałek. - Pole zakresu –
<input type="range">wyświetla suwak, na którym można wybrać wartość z określonego przedziału.
Przykład pola liczby i zakresu:
<label for="age">Wiek:</label>
<input type="number" id="age" name="age" min="0" max="100"><br><br>
<label for="volume">Głośność:</label>
<input type="range" id="volume" name="volume" min="0" max="10">
Walidacja formularzy w HTML5
HTML5 umożliwia walidację formularzy za pomocą różnych wbudowanych atrybutów, bez konieczności stosowania JavaScriptu. Dzięki temu można lepiej kontrolować wprowadzane dane, co minimalizuje błędy i ułatwia ich poprawność.
Przykładowe atrybuty walidacji:
- required – Wymusza, aby pole zostało wypełnione.
- min i max – Ustawiają minimalną i maksymalną wartość dla pól liczbowych.
- maxlength – Określa maksymalną liczbę znaków, które można wpisać.
- pattern – Umożliwia zastosowanie wyrażenia regularnego do sprawdzania poprawności wprowadzonego tekstu.
Przykład walidacji:
<form action="/submit" method="POST">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username" required maxlength="15"><br><br>
<label for="phone">Numer telefonu:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{9}" required><br><br>
<input type="submit" value="Wyślij">
</form>
Ćwiczenia
Ćwiczenie 1: Tworzenie listy rozwijanej
Stwórz formularz, który zawiera listę rozwijaną umożliwiającą wybór ulubionego języka programowania (np. JavaScript, Python, HTML, CSS). Upewnij się, że lista ma przypisany odpowiedni opis (label) oraz że wybrana wartość jest przesyłana po zatwierdzeniu formularza.
Ćwiczenie 2: Dodanie przycisków wyboru
Utwórz formularz rejestracyjny z sekcją wyboru płci, w której użytkownik musi wybrać jedną z opcji: „Mężczyzna”, „Kobieta” lub „Inne”. Użyj przycisków wyboru (radio button) i zadbaj o czytelność formularza.
Ćwiczenie 3: Użycie pól liczby i zakresu
Stwórz formularz, który pozwala użytkownikowi podać liczbę godzin spędzonych na programowaniu w ciągu tygodnia oraz preferowaną głośność muzyki podczas pracy na skali od 0 do 10. Upewnij się, że oba pola są odpowiednio opisane i mają określony zakres wartości.
Ćwiczenie 4: Wprowadzenie walidacji w formularzu
Rozbuduj formularz o pola do wprowadzenia imienia i numeru telefonu. Dodaj walidację tak, aby imię było wymagane i miało maksymalnie 20 znaków, a numer telefonu był 9-cyfrowym numerem. Przetestuj, jak działa walidacja dla poprawnych i błędnych danych.