Walidacja formularza

Ten artykuł wyjaśnia walidację formularza.

Wyjaśnia walidację formularza w HTML-u.

YouTube Video

Walidacja formularza HTML

Przegląd walidacji formularza HTML

• Walidacja formularza HTML to mechanizm zapewniający, że dane spełniają określone warunki przed ich przesłaniem przez użytkownika. Zmniejsza to liczbę błędów po stronie serwera i poprawia doświadczenie użytkownika.

Atrybut required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Atrybut required określa, że pola wejściowe muszą zostać wypełnione przed wysłaniem formularza.

Atrybut pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• Atrybut pattern służy do sprawdzenia, czy dane wprowadzone w formularzu pasują do określonego wzorca regex. Na przykład, to sprawdza, czy nazwa użytkownika zawiera tylko znaki alfanumeryczne.

Atrybuty min i max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• Atrybuty <min> i <max> służą do określenia minimalnych i maksymalnych dopuszczalnych wartości dla elementu wejściowego. Są one często używane z typami danych wejściowych, takimi jak number, range i date.
• W tym przykładzie możesz wprowadzić liczbę od 18 do 99.

Atrybuty minlength i maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• Atrybut minlength określa minimalną liczbę znaków wymaganą dla pola wejściowego, podczas gdy maxlength definiuje maksymalną liczbę dozwolonych znaków.
• W tym przykładzie możesz wprowadzić tekst składający się z od 4 do 12 znaków.

Atrybut type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Atrybut type="email" jest używany, aby upewnić się, że wprowadzona wartość ma prawidłowy format adresu e-mail. Ten atrybut zapewnia wbudowaną funkcję walidacji dla pól wprowadzania adresu e-mail.

Atrybut type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> zapewnia pole wprowadzania, które wymaga prawidłowego formatu adresu URL. Przeglądarka automatycznie sprawdza, czy wprowadzone dane są prawidłowym adresem URL.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video