Walidacja pól wejściowych e-maili i URLi w formularzach HTML

W tym samouczku dowiesz się wszystkich istotnych aspektów pól wejściowych dla adresów e-mail i adresów URL w formularzach HTML. Celem jest pokazanie, jak skutecznie stosować walidację tych wpisów i dostosowywać stylowanie dla różnych stanów wprowadzania. Nie tylko poprawi to doświadczenie użytkownika, ale także jakość danych, które zbierasz.

Najważniejsze wnioski

• Dowiedz się podstawowej struktury i walidacji dla e-mail i URL za pomocą HTML.
• Ponadto dowiesz się, jak za pomocą CSS zapewnić wizualne informacje zwrotne dla użytkownika w przypadku nieprawidłowego wprowadzenia.
• Omówiona jest korzystność wzorców do dalszej walidacji adresów e-mail i URL.

Instrukcja krok po kroku

1. Tworzenie podstawowego pola wejściowego dla e-maila

Rozpocznij od utworzenia standardowego elementu wejściowego dla e-maila. Musisz ustawić typ na „email”, aby przeglądarka automatycznie walidowała wprowadzenie.

Pole wejściowe jest teraz przez HTML traktowane jako oczekujące adresu e-mail i daje wizualne informacje zwrotne w przypadku błędnego wprowadzenia. Gdy użytkownik zaczyna wprowadzać dane, tło zmienia się na różowe, sygnalizując błąd.

2. Walidacja adresu e-mail

Walidacja e-maila odbywa się na podstawie prostych zasad. Musi zawierać co najmniej jeden znak „@”, po którym musi występować co najmniej jeden dodatkowy znak. Jest to podstawowa walidacja NLP. Niemniej jednak ta zasada walidacji nie jest wystarczająca, aby zagwarantować istnienie adresu e-mail.

Przykładem nieprawidłowego adresu e-mail jest „bla@”. W takim przypadku wysłanie formularza zostanie zablokowane, a użytkownik zobaczy komunikat o błędzie.

3. Korzystanie z wzorców dla precyzyjnej walidacji

Aby osiągnąć precyzyjniejszą walidację, można użyć atrybutu „pattern”. Za pomocą wyrażenia regularnego (Regex) można określić, że adres e-mail musi spełniać określone wymagania, np. dotyczyć określonej domeny.

Dzięki tej dodatkowej walidacji upewnisz się, że są akceptowane tylko prawidłowe adresy e-mail, na przykład tylko adresy Gmaila lub GMX.

4. Wymagane wprowadzenie i stylowanie

Aby zapewnić, że pole e-maila jest wypełnione, możesz dodać atrybut „required”. Gdy użytkownik spróbuje wysłać formularz bez wprowadzenia danych, natychmiast otrzyma informację zwrotną wizualnie.

Do stylizacji nieprawidłowych wpisów możesz użyć w CSS selektora „:invalid”. W ten sposób tło pola stanie się czerwone, aby ostrzec użytkownika, że wpis jest niepoprawny.

5. Tworzenie pola wejściowego dla adresów URL

Podobnie jak w przypadku e-maili, ważne jest również stworzenie odpowiedniego pola wejściowego dla adresów URL. Ustaw typ na „url”, aby przeglądarka również tutaj walidowała wprowadzenie.

6. Walidacja URL

Podstawowym wymogiem dla poprawnego URL-a jest rozpoczęcie od „http://” lub „https://” i posiadanie co najmniej jednego następnego znaku. Jeśli użytkownik wprowadzi tylko „https”, to nie jest wystarczające.

To samo dotyczy innych protokołów, takich jak „ftp”. Jeśli wprowadzone dane nie spełniają warunków, przeglądarka zapewnia informacje zwrotne i nie zezwala na przesłanie formularza.

7. Rozszerzona walidacja z użyciem wzorców dla adresów URL

Aby bardziej precyzyjnie zweryfikować określone wzorce, takie jak „https://www.example.com”, należy również użyć atrybutu „pattern”, aby pomóc użytkownikom wprowadzać poprawne adresy URL.

8. Wygodność użytkowania na urządzeniach mobilnych

Dużą zaletą stosowania typów "email" i "url" w formularzach jest poprawiona wygoda użytkowania na urządzeniach mobilnych. Klawiatura jest optymalnie dostosowana, aby ułatwić użytkownikom wprowadzanie adresów e-mail i adresów URL.

Podsumowanie

W tym samouczku omówiliśmy najważniejsze kryteria walidacji adresów e-mail i adresów URL w formularzach internetowych. Nauczyłeś się, jak przeprowadzać zarówno proste, jak i zaawansowane walidacje oraz dostosowywać informacje zwrotne dla użytkownika za pomocą CSS, aby stworzyć lepsze doświadczenie użytkownika.