wtorek,
HTML: Atrybut pattern
Atrybut pattern w HTML jest używany wraz z elementem <input> do określenia wzorca, którego użytkownik musi przestrzegać przy wpisywaniu danych. Atrybut ten jest szczególnie przydatny w przypadku pól, gdzie oczekiwany jest konkretny format danych, na przykład kod pocztowy, numer telefonu, adres e-mail itp.
Wartość atrybutu pattern to wyrażenie regularne, które definiuje wzorzec tekstu, jaki użytkownik musi wprowadzić. Jeśli wartość wprowadzona w pole <input> nie zgadza się ze wzorcem zdefiniowanym w atrybucie pattern, formularz nie zostanie przesłany, a użytkownik zobaczy komunikat o błędzie.
Przykład użycia atrybutu pattern
<form action="/przykladowy-adres">
<label for="numer-telefonu">Wpisz swój numer telefonu:</label>
<input type="tel" id="numer-telefonu" name="numer-telefonu"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
title="Numer telefonu powinien być w formacie 123-456-7890.">
<input type="submit" value="Wyślij">
</form>
W tym przykładzie użytkownik musi wpisać swój numer telefonu w specyficznym formacie: trzy cyfry, myślnik, kolejne trzy cyfry, myślnik i na końcu cztery cyfry. Jeśli format się nie zgadza, formularz nie zostanie przesłany.
Atrybut title jest często używany razem z pattern, aby dostarczyć użytkownikowi bardziej szczegółowe informacje o wymaganym formacie, szczególnie gdy wprowadzone dane nie zgadzają się ze wzorcem. Po nieudanej próbie przesłania formularza, przeglądarka może wyświetlić zawartość atrybutu title jako podpowiedź, co pozwala użytkownikowi na poprawienie błędów.
Wyrażenia regularne wykorzystywane w atrybucie pattern
Wyrażenia regularne (regex) wykorzystywane w atrybucie pattern to potężne narzędzie do walidacji danych wprowadzanych przez użytkownika. Pozwalają one definiować złożone kryteria, które muszą być spełnione przez ciąg znaków w polu formularza. Poniżej znajdziesz objaśnienie podstawowej składni i najczęściej używanych symboli w wyrażeniach regularnych.
Podstawowe symbole
^- Oznacza początek ciągu znaków. Użycie^abcoznacza, że ciąg musi zaczynać się od "abc".$- Oznacza koniec ciągu znaków. Użyciexyz$oznacza, że ciąg musi kończyć się na "xyz"..- Reprezentuje dowolny pojedynczy znak (z wyjątkiem znaku nowej linii). Na przykłada.cmoże dopasować "abc", "arc", "a3c" itp.|- Oznacza alternatywę (logiczne OR). Na przykładabc|defoznacza "abc" lub "def".
Kwantyfikatory
*- Oznacza zero lub więcej wystąpień poprzedzającego elementu. Na przykłada*oznacza zero lub więcej liter "a".+- Oznacza jedno lub więcej wystąpień poprzedzającego elementu. Na przykłada+oznacza jedną lub więcej liter "a".?- Oznacza zero lub jedno wystąpienie poprzedzającego elementu. Na przykłada?oznacza zero lub jedno wystąpienie litery "a".{n}- Określa dokładnie n wystąpień poprzedzającego elementu. Na przykłada{3}oznacza dokładnie trzy litery "a".{n,}- Oznacza n lub więcej wystąpień. Na przykłada{2,}oznacza dwie lub więcej "a".{n,m}- Oznacza od n do m wystąpień. Na przykłada{2,4}oznacza od dwóch do czterech liter "a".
Zestawy znaków
[abc]- Dopasowuje jeden znak z podanych w nawiasach. Na przykład[abc]dopasuje "a", "b" lub "c".[^abc]- Dopasowuje dowolny znak, który nie jest wymieniony w nawiasach. Na przykład[^abc]dopasuje jakikolwiek znak oprócz "a", "b", i "c".[a-z]- Dopasowuje jeden znak z zakresu (w tym przypadku literę od "a" do "z").[A-Z]- Dopasowuje jedną wielką literę (od "A" do "Z").[0-9]- Dopasowuje jedną cyfrę (od "0" do "9").
Sekwencje specjalne
\d- Oznacza dowolną cyfrę (odpowiednik[0-9]).\D- Oznacza dowolny znak, który nie jest cyfrą.\w- Oznacza dowolny znak alfanumeryczny (litery, cyfry oraz podkreślenie).\W- Oznacza dowolny znak, który nie jest znakiem alfanumerycznym.\s- Oznacza dowolny znak biały (spacja, tabulator, nowa linia).\S- Oznacza dowolny znak, który nie jest znakiem białym.
Przykłady
Atrybut pattern jest użyteczny w formularzach HTML, ponieważ pozwala na szybką i efektywną walidację danych na poziomie przeglądarki, bez potrzeby przesyłania danych na serwer. Jest to szczególnie przydatne w przypadkach, gdy chcemy zapewnić użytkownikowi natychmiastową informację zwrotną o poprawności wprowadzonych danych.
Adres email
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
To wyrażenie dopasowuje większość standardowych adresów email, wymagając obecności znaku @, jak również dopuszczając litery, cyfry, kropki, znaki plus, minus oraz podkreślenia w różnych częściach adresu.
Kod pocztowy (przykład dla Polski)
pattern="\d{2}-\d{3}"
Ten wzorzec jest stosowany do dopasowania polskich kodów pocztowych, które składają się z dwóch cyfr, myślnika i trzech cyfr.
Data (format RRRR-MM-DD)
pattern="\d{4}-\d{2}-\d{2}"
Wymaga, aby data była wprowadzona w konkretnym formacie: cztery cyfry roku, dwie cyfry miesiąca i dwie cyfry dnia, rozdzielone myślnikami.
Strona internetowa (URL)
pattern="https?://.+"
To wyrażenie regularne dopasowuje adresy URL, które zaczynają się od http:// lub https://, po których musi wystąpić co najmniej jeden znak.
Hasło (przykład z wymaganiami)
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
Wymaga, aby hasło miało co najmniej 8 znaków oraz zawierało przynajmniej jedną cyfrę, jedną małą literę i jedną wielką literę.
