Walidacja danych wejściowych

6.1 Atrybut required

Walidacja danych w formularzach to ważny aspekt web developmentu, który pomaga zapewnić poprawność i integralność wprowadzanych informacji. HTML oferuje wiele wbudowanych atrybutów do sprawdzania danych wejściowych, takich jak required, pattern, min, max, a także atrybuty placeholder i value, które poprawiają interakcję użytkownika z formularzem.

Atrybut required wskazuje, że pole musi być wypełnione. Przeglądarka nie pozwoli na wysłanie formularza, jeśli pole oznaczone jako required nie jest wypełnione.

Składnia

    
      <input type="text" name="username" required>
    
  

Przykład użycia

    
      <form action="/" method="post">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Wyślij</button>
      </form>
    
  

Wyjaśnienie

Jeśli określony jest atrybut required, użytkownik musi wypełnić pole przed wysłaniem formularza. Jeśli pole jest puste, przeglądarka wyświetli komunikat o błędzie i nie wyśle formularza.

6.2 Atrybut pattern

Atrybut pattern pozwala określić wyrażenie regularne do sprawdzania danych wejściowych. Jeśli wprowadzone dane nie pasują do określonego wzoru, przeglądarka wyświetli komunikat o błędzie i nie wyśle formularza.

Składnia

    
      <input type="text" name="username" pattern="[A-Za-z]{3,}">
    
  

Przykład użycia

Atrybut pattern ustawia wyrażenie regularne, do którego muszą pasować wprowadzone dane. W tym przykładzie nazwa użytkownika musi zawierać tylko litery i mieć co najmniej trzy znaki.

    
      <form action="/" method="post">
        <label for="username">Nazwa użytkownika (tylko litery, minimum 3 znaki):</label>
        <input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
        <button type="submit">Wyślij</button>
      </form>
    
  

6.3 Atrybuty min i max

Atrybuty min i max są używane do ustawiania minimalnych i maksymalnych wartości dla pól numerycznych i dat.

Składnia

    
      <input type="number" name="age" min="18" max="99">
    
  

Przykład użycia

Pole numeryczne

• min: ustawia minimalną dopuszczalną wartość. W tym przykładzie minimalny wiek to 18 lat
• max: ustawia maksymalną dopuszczalną wartość. W tym przykładzie maksymalny wiek to 99 lat

    
      <form action="/" method="post">
        <label for="birthday">Data urodzenia (od 1900-01-01 do 2024-12-31):</label>
        <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
        <button type="submit">Wyślij</button>
      </form>
    
  

6.4 Atrybut placeholder

Atrybut placeholder ustawia tekst-wypełniacz, który jest wyświetlany wewnątrz pola wejściowego, dopóki użytkownik nie zacznie wprowadzać danych. Ten atrybut pomaga użytkownikom zrozumieć, jakie dane są oczekiwane w tym polu.

Składnia

    
      <input type="text" name="username" placeholder="Wpisz nazwę użytkownika">
    
  

Przykład użycia

Atrybut placeholder wyświetla tekst wewnątrz pola wejściowego dopóki użytkownik nie zacznie wprowadzać danych. W tym przykładzie tekst-wypełniacz to "Wpisz nazwę użytkownika".

    
      <form action="/" method="post">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" placeholder="Wpisz nazwę użytkownika" required>
        <button type="submit">Wyślij</button>
      </form>
    
  

6.5 Atrybut value

Atrybut value ustawia początkową wartość dla elementu wejściowego. Ta wartość będzie wyświetlana w polu przy załadowaniu strony lub resetowaniu formularza.

Składnia

    
      <input type="text" name="username" value="default user">
    
  

Przykład użycia

Atrybut value ustawia początkową wartość pola wejściowego. W tym przykładzie domyślna nazwa użytkownika to "default user".

    
      <form action="/" method="post">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" value="default user" required>
        <button type="submit">Wyślij</button>
      </form>
    
  

1

Опрос

Formularze w HTML,  8 уровень,  6 лекция

недоступен

Formularze w HTML

Formularze w HTML

Открыть