Nowe formularze i atrybuty
Nowe formularze i atrybuty w HTML5 ułatwiają tworzenie interaktywnych i funkcjonalnych formularzy na stronach internetowych. Ulepszenia obejmują nowe typy pól wejściowych, atrybuty walidacji oraz dodatkowe funkcje, które zwiększają użyteczność i dostępność formularzy. Prawidłowe wykorzystanie atrybutów w HTML5 pozwala na dostosowanie strony WWW do najnowszych standardów.
Nowe typy pól wejściowych
HTML5 posiada nowe typy pól wejściowych, które pozwalają na lepsze dopasowanie kontrolek do potrzeb użytkownika i wymagań projektowych.
Przykłady nowych typów to:
- email — dla adresów e-mail
- url — dla adresów URL
- tel — dla numerów telefonów
- number — dla wartości liczbowych
- range — dla zakresów wartości
- date — dla dat
- time — dla czasu
- datetime-local — dla daty i czasu
Przykład użycia nowych typów pól wejściowych:
<form>
<input type="email" placeholder="Adres e-mail">
<input type="url" placeholder="Adres URL">
<input type="tel" placeholder="Numer telefonu">
</form>Atrybuty walidacji
HTML5 posiada również wbudowaną walidację formularzy, dzięki czemu można sprawdzić poprawność danych wprowadzonych przez użytkownika bez konieczności pisania dodatkowego kodu JavaScript.
Przykłady atrybutów walidacji to:
- required — oznacza, że pole jest wymagane
- pattern — definiuje wzorzec dla dopuszczalnych wartości (np. wyrażenie regularne)
- minlength, maxlength — określa minimalną i maksymalną długość wprowadzonego tekstu
- min, max — określa minimalną i maksymalną wartość dla pól numerycznych
Przykład użycia atrybutów walidacji:
<form>
<input type="email" required placeholder="Adres e-mail">
<input type="password" minlength="8" required placeholder="Hasło">
<input type="number" min="0" max="100" required placeholder="Wartość od 0 do 100">
</form>Dodatkowe funkcje
HTML5 ma również wiele dodatkowych funkcji i atrybutów, które zwiększają użyteczność i dostępność formularzy.
Inne przykłady dodatkowych funkcji:
- placeholder — wyświetla wskazówkę dotyczącą wprowadzanych danych w polu wejściowym
- autofocus — automatycznie ustawia fokus na danym polu wejściowym po załadowaniu strony
- autocomplete — pozwala na kontrolowanie funkcji autouzupełniania przeglądarki
Przykład użycia dodatkowych funkcji i atrybutów:
<form>
<input type="email" placeholder="Adres e-mail" autofocus>
<input type="password" minlength="8" required placeholder="Hasło" autocomplete="off">
</form>Warto zapamiętać
Nowe formularze i atrybuty w HTML5 przyczyniają się do tworzenia bardziej zaawansowanych, użytecznych i dostępnych formularzy na stronach internetowych. Wprowadzenie nowych typów pól wejściowych, atrybutów walidacji oraz dodatkowych funkcji sprawia, że tworzenie formularzy jest szybsze, łatwiejsze i efektywniejsze. Dzięki tym ulepszeniom, twórcy stron mogą dostarczyć bardziej profesjonalne i przyjazne dla użytkownika doświadczenia związane z formularzami, a jednocześnie zwiększyć bezpieczeństwo i jakość danych zbieranych od użytkowników.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
