HTML oferuje szeroki wachlarz typów pól (<input>), które są kluczowe dla tworzenia interaktywnych formularzy. W tym artykule przyjrzymy się wszystkie dostępne opcje, takie jak pola tekstowe, wyboru, kombi, numeryczne i daty, a także udzielimy wskazówek SEO dotyczących ich użycia.
Oto wszystkie dostępne typy pól (<input>) w HTML:
1. Pola tekstowe
text– zwykłe pole tekstowe, np.:<input type="text" name="nazwa_pola" value="Przykładowa wartość...">password– pole hasła (ukryte znaki), np.:<input type="password" name="haslo_pola" value="Przykładowe hasło...">tel– pole dla numeru telefonu (zgodnie z ), np.:<input type="tel" name="telefon" value="+48123456789">email– pole dla adresu e-mail, np.:<input type="email" name="email_pola" value="przykładowy@example.com">
2. Pola wyboru
checkbox– pole wyboru (może być zaznaczone lub nie), np.:<input type="checkbox" name="akceptacja" value="tak"> Akceptuję warunki...radio– pole wyboru (może być wybrane tylko jedno z wielu), np.:<input type="radio" name="poziom_zaawansowania" value="podstawowy"> Podstawowy <input type="radio" name="poziom_zaawansowania" value="średni"> Średni <input type="radio" name="poziom_zaawansowania" value="zaawansowany" checked> Zaawansowany
3. Pola kombi
select– pole wyboru z listą rozwijaną, np.:<select name="poziom_zaawansowania"> <option value="podstawowy">Podstawowy</option> <option value="średni">Średni</option> <option value="zaawansowany" selected>Zaawansowany</option> </select>multiselect– pole wyboru z możliwością zaznaczenia wielu elementów, np.:<input type="multiselect" name="programy_ucznia" value="matematyka"> Matematyka <input type="multiselect" name="programy_ucznia" value="język-polski"> Język polski ...
4. Pola numeryczne
number– pole dla liczby (np. liczba całkowita lub zmiennoprzecinkowa), np.:<input type="number" name="liczba_uczniow" min="10" max="50" step="2" value="34">range– pole wyboru z suwakiem (np. regulacja głośności), np.:<input type="range" min="0" max="100" value="50">
5. Pola daty
date– pole dla wyboru daty (w formacie RRRR-MM-DD), np.:<input type="date" name="data_urodzenia" value="2000-01-01">datetime– pole dla wyboru daty i godziny (w formacie RRRR-MM-DD HH:mm), np.:<input type="datetime" name="data_umowy" value="2023-12-31T19:59:59">
6. Pola URL i email
url– pole dla adresu URL, np.:<input type="url" name="adres_strony" value="https://przykladowa-strona.pl">email– pole dla adresu e-mail (zgodnie z ), np.:<input type="email" name="adres-email" value="przykladowy@example.com">
7. Pola ukryte
hidden– pole niewidoczne dla użytkownika, np.:<input type="hidden" name="identyfikator_posta" value="12345">
8. Pola daty i czasu
datetime-local– pole dla daty (w formacie HH:mm), np.:<input type="datetime-local" name="czas_spotkania" value="12:30">time– pole dla czasu (w formacie HH:mm), np.:<input type="time" name="czas_pracy" value="14:30:00">
Wskazówki SEO:
- Opisywanie pól (
<input>): Dodaj odpowiednie etykiety i opisy dla każdego pola za pomocą atrybutulabel, aby ułatwić użytkownikom zrozumienie, do czego służy dane pole. - Alternatywne teksty (
aria-label/aria-describedby): Używaj alternatywnych opisów dla pól niewidocznych lub niedostępnych, aby poprawić dostępność i SEO. - Optymalizacja danych wejściowych: Staraj się, aby pola były jak najbardziej opisowe (np.
nazwa_polazamiastname) oraz unikaj nadmiaru znaków specjalnych w atrybutachvalue. - Semantyczne użycie pól: Stosuj odpowiednie tagi HTML5 (np.
<select>zamiast<option>), aby ułatwić wyszukiwarkom lepsze zrozumienie struktury formularza i zwiększyć jego SEO. - Optymalizacja linków: Włącz odpowiednie słowa kluczowe w atrybucie
namepól, ale unikaj nadmiernego upychania (keyword stuffing). - Szybkość ładowania: Unikaj zbyt wielu pól w formularzu i minimalizuj ich rozmiar, aby poprawić czas wczytywania strony oraz zwiększyć jej SEO.
Podsumowanie
Poznanie wszystkich typów pól w HTML jest niezbędne dla efektywnego projektowania formularzy. Dzięki odpowiedniemu wykorzystaniu różnych opcji można zapewnić użytkownikom przyjemne doświadczenie, a jednocześnie zwiększyć dostępność i zgodność z SEO. Pamiętaj o stosowaniu atrybutów name, unikania powielania nazw oraz odpowiedniego formatowania danych wejściowych!
