Formularz HTML - atrybut "pattern"

Spójrzmy na następujący kod HTML:

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Podaj czterocyfrową liczbę:
      <input type="text" name="liczba">
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Nasz przykładowy kod HTML reprezentuje formularz HTML, który z kolei reprezentowany jest przez element form.

W zawartości naszego przykładowego formularza HTML występuje jeden element HTML, który może przechowywać informację wprowadzoną przez użytkownika.

Wspomnianym elementem HTML jest element input.

Jeżeli z jakiejś przyczyny chcemy określić wzorzec, jaki powinna mieć niepusta wartość posiadana przez daną, która reprezentowana jest przez interesujący nas element HTML (w tym wypadku interesujący nas element input), wtedy do wspomnianego interesującego nas elementu HTML należy dodać atrybut pattern wraz z interesującą nas wartością w formie wyrażenia regularnego języka programowania JavaScript.

Przykład:

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Podaj czterocyfrową liczbę:
      <input type="text" name="liczba" pattern="[0-9]{4}">
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Od tej pory, gdy wartość posiadana przez daną, która reprezentowana jest przez nasz przykładowy element input posiadający atrybut name o wartości liczba nie jest wartością pustą przed próbą zatwierdzenia formularza HTML, z którym to formularzem HTML został powiązany wspomniany element input, wspomniana wartość musi składać się dokładnie z czterech znaków, którymi muszą być wyłącznie cyfry z zakresu od 0 do 9, ponieważ do wspomnianego elementu input został dodany atrybut pattern wraz z wartością [0-9]{4}.