Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

HTML: Atrybut pattern

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 ^abc oznacza, że ciąg musi zaczynać się od "abc".
  • $ - Oznacza koniec ciągu znaków. Użycie xyz$ oznacza, że ciąg musi kończyć się na "xyz".
  • . - Reprezentuje dowolny pojedynczy znak (z wyjątkiem znaku nowej linii). Na przykład a.c może dopasować "abc", "arc", "a3c" itp.
  • | - Oznacza alternatywę (logiczne OR). Na przykład abc|def oznacza "abc" lub "def".

Kwantyfikatory

  • * - Oznacza zero lub więcej wystąpień poprzedzającego elementu. Na przykład a* oznacza zero lub więcej liter "a".
  • + - Oznacza jedno lub więcej wystąpień poprzedzającego elementu. Na przykład a+ oznacza jedną lub więcej liter "a".
  • ? - Oznacza zero lub jedno wystąpienie poprzedzającego elementu. Na przykład a? oznacza zero lub jedno wystąpienie litery "a".
  • {n} - Określa dokładnie n wystąpień poprzedzającego elementu. Na przykład a{3} oznacza dokładnie trzy litery "a".
  • {n,} - Oznacza n lub więcej wystąpień. Na przykład a{2,} oznacza dwie lub więcej "a".
  • {n,m} - Oznacza od n do m wystąpień. Na przykład a{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ę.

Artykuł: Marc Andreessen

Marc Andreessen

Artykuł: Zakończenie staży

Zakończenie staży

Artykuł: Brendan Eich

Brendan Eich

Artykuł: Nvidia GeForce 200

Nvidia GeForce 200

Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły