Kurs HTML

Kontrolowanie zachowania i walidacji formularzy

Oprócz podstawowych atrybutów definiujących strukturę i typy pól, HTML oferuje szereg atrybutów, które pozwalają kontrolować zachowanie formularzy i ich elementów, w tym autouzupełnianie, walidację oraz stan pól.

Autouzupełnianie: atrybut `autocomplete`

Atrybut autocomplete kontroluje, czy przeglądarka może automatycznie uzupełniać pola formularza na podstawie wcześniej wprowadzonych przez użytkownika danych.

• Może być zastosowany do całego znacznika <form> lub do poszczególnych pól <input>, <select>, <textarea>.
• Możliwe wartości:
  • on (domyślna): Przeglądarka może autouzupełniać pola.
  • off: Przeglądarka nie powinna autouzupełniać pola. Jest to często używane dla pól wrażliwych (np. jednorazowe kody, pola CAPTCHA) lub gdy autouzupełnianie mogłoby wprowadzać w błąd.
  • Szczegółowe wartości (np. name, email, street-address, cc-number): Można podać bardziej szczegółowe wskazówki dla przeglądarki, jakiego rodzaju dane są oczekiwane w danym polu, co pomaga w precyzyjniejszym autouzupełnianiu (np. adresu, danych karty kredytowej). Pełna lista wartości jest dostępna w specyfikacji HTML.

<!-- Wyłączenie autouzupełniania dla całego formularza -->
<form action="/login" method="post" autocomplete="off">
  <!-- ... pola ... -->
</form>

<!-- Włączenie dla formularza, ale wyłączenie dla konkretnego pola -->
<form action="/register" method="post" autocomplete="on">
  <label for="username">Nazwa użytkownika:</label>
  <input type="text" id="username" name="username" autocomplete="username"> <!-- Sugestia typu danych -->
  
  <label for="otp">Kod jednorazowy:</label>
  <input type="text" id="otp" name="otp" autocomplete="off"> <!-- Wyłączenie dla tego pola -->
</form>Kopiuj

Wyłączenie wbudowanej walidacji: atrybut `novalidate`

HTML5 wprowadził wbudowaną walidację formularzy (np. sprawdzanie formatu type="email", atrybutu required, pattern). Domyślnie przeglądarka przeprowadza tę walidację przed wysłaniem formularza i wyświetla komunikaty o błędach.

Atrybut novalidate, dodany do znacznika <form>, całkowicie wyłącza wbudowaną walidację przeglądarki dla tego formularza.

• Jest to atrybut logiczny (nie wymaga wartości).
• Używa się go głównie wtedy, gdy chcemy zaimplementować własną, niestandardową walidację za pomocą JavaScriptu i nie chcemy, aby wbudowane mechanizmy przeglądarki kolidowały z naszym kodem lub wyświetlały własne komunikaty.

<form action="/submit" method="post" novalidate>
  <label for="email-novalidate">E-mail:</label>
  <input type="email" id="email-novalidate" name="email" required> 
  <!-- Mimo required i type=email, przeglądarka nie zablokuje wysłania -->
  
  <button type="submit">Wyślij</button>
</form>Kopiuj

Atrybuty stanu pól: `readonly` i `disabled`

Te atrybuty logiczne kontrolują możliwość interakcji użytkownika z elementem formularza. Były już wspomniane przy omawianiu pól tekstowych, ale dotyczą również innych elementów (select, button, checkbox, radio).

• readonly: Użytkownik nie może zmienić wartości pola, ale może je zaznaczyć i skopiować jego zawartość. Wartość pola jest wysyłana z formularzem. Dotyczy głównie pól tekstowych (input, textarea).
• disabled: Użytkownik nie może wchodzić w interakcję z polem (nie można go kliknąć, zaznaczyć, zmienić wartości). Wartość pola nie jest wysyłana z formularzem. Dotyczy większości elementów formularza.

<label for="readonly-field">Tylko do odczytu:</label>
<input type="text" id="readonly-field" name="readonly_data" value="Tej wartości nie zmienisz" readonly>

<label for="disabled-field">Wyłączone pole:</label>
<input type="text" id="disabled-field" name="disabled_data" value="To pole jest nieaktywne" disabled>

<button type="submit" disabled>Wyłączony przycisk</button>Kopiuj

Wymagane pola: atrybut `required`

Atrybut logiczny required wskazuje, że użytkownik musi wypełnić dane pole (lub dokonać wyboru w przypadku select, radio, checkbox, file) przed wysłaniem formularza. Jeśli pole jest puste (lub nie dokonano wyboru), wbudowana walidacja przeglądarki (o ile nie jest wyłączona przez novalidate) uniemożliwi wysłanie formularza i zazwyczaj wskaże użytkownikowi, które pole jest wymagane.

<label for="required-field">Pole wymagane:</label>
<input type="text" id="required-field" name="must_fill" required>Kopiuj

Walidacja wzorca: atrybut `pattern`

Atrybut pattern pozwala zdefiniować wyrażenie regularne (RegExp), z którym musi zgadzać się wartość wprowadzona do pola <input> (głównie typu text, tel, email, url, password, search), aby pole zostało uznane za prawidłowo wypełnione przez wbudowaną walidację przeglądarki.

• Wyrażenie regularne musi pasować do całej wartości wprowadzonej do pola.
• Jest to potężne narzędzie do walidacji specyficznych formatów, np. kodów pocztowych, numerów NIP, własnych formatów identyfikatorów itp.
• Warto dodać atrybut title do pola z atrybutem pattern, aby wyjaśnić użytkownikowi oczekiwany format. Tekst z title jest często wyświetlany przez przeglądarkę jako część komunikatu o błędzie walidacji.

<!-- Przykład: Polski kod pocztowy (dwie cyfry, myślnik, trzy cyfry) -->
<label for="zip-code">Kod pocztowy:</label>
<input type="text" id="zip-code" name="zip" 
       pattern="[0-9]{2}-[0-9]{3}" 
       title="Podaj kod pocztowy w formacie XX-XXX" 
       required>

<!-- Przykład: Hasło musi zawierać co najmniej 8 znaków, w tym cyfrę i wielką literę -->
<label for="password-pattern">Hasło:</label>
<input type="password" id="password-pattern" name="pwd" 
       pattern="(?=.*\d)(?=.*[A-Z]).{8,}" 
       title="Hasło musi mieć min. 8 znaków, zawierać cyfrę i wielką literę." 
       required>Kopiuj

Zadanie praktyczne (z rozwiązaniem)

Zadanie: W formularzu kontaktowym:

1. Wyłącz autouzupełnianie dla pola wiadomości (<textarea>).
2. Dodaj atrybut required do pola wyboru działu (<select>), aby upewnić się, że użytkownik wybierze dział inny niż opcja pusta.
3. Dodaj pole na numer telefonu (type="tel") i użyj atrybutu pattern, aby wymagać podania 9 cyfr (mogą być rozdzielone myślnikami lub spacjami, ale łącznie ma być 9 cyfr - uproszczony wzorzec). Dodaj title z opisem formatu.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy - Atrybuty</title>
    <style>
        /* Style z poprzednich lekcji */
        label { display: block; margin-top: 10px; }
        input, textarea, select, button { width: 90%; max-width: 300px; padding: 8px; margin-top: 5px; border: 1px solid #ccc; box-sizing: border-box; }
        button, input[type="submit"], input[type="reset"], input[type="button"] { width: auto; margin-top: 15px; padding: 10px 15px; margin-right: 10px; cursor: pointer; }
        fieldset { border: 1px dashed #aaa; padding: 15px; margin-bottom: 20px; }
        legend { font-weight: bold; color: navy; padding: 0 5px; }
        fieldset div { margin-bottom: 8px; }
        input[type="radio"], input[type="checkbox"], input[type="range"], input[type="color"], input[type="file"] { width: auto; margin-right: 5px; vertical-align: middle; }
        fieldset > div > label { display: block; margin-top: 10px; } 
        fieldset > div > input + label, output { display: inline-block; margin-top: 0; } 
    </style>
</head>
<body>
    <h1>Kontakt</h1>
    
    <form action="/wyslij-wiadomosc" method="POST" enctype="multipart/form-data">
        <fieldset>
            <legend>Dane kontaktowe i wiadomość</legend>
            <div>
                <label for="contact-imie">Imię:</label>
                <input type="text" id="contact-imie" name="imie_uzytkownika" required>
            </div>
            <div>
                <label for="contact-email">Adres e-mail:</label>
                <input type="email" id="contact-email" name="email_uzytkownika" required>
            </div>
            <!-- Dodane pole tel z pattern -->
            <div>
                <label for="contact-phone">Telefon:</label>
                <input type="tel" id="contact-phone" name="telefon" 
                       pattern="[\d\s-]{9,}" 
                       title="Podaj 9 cyfr numeru telefonu (mogą być spacje lub myślniki)">
            </div>
            <div>
                <label for="contact-dzial">Dział:</label>
                <!-- Dodano required do select -->
                <select id="contact-dzial" name="dzial" required>
                    <option value="">-- Wybierz dział --</option>
                    <option value="sprzedaz">Sprzedaż</option>
                    <option value="pomoc">Pomoc techniczna</option>
                    <option value="reklamacje">Reklamacje</option>
                </select>
            </div>
            <div>
                <label for="contact-wiadomosc">Wiadomość:</label>
                <!-- Dodano autocomplete="off" -->
                <textarea id="contact-wiadomosc" name="tresc_wiadomosci" rows="4" required autocomplete="off"></textarea>
            </div>
            <div>
                <label for="contact-attachment">Załącznik (obrazek):</label>
                <input type="file" id="contact-attachment" name="zalacznik" accept="image/*">
            </div>
        </fieldset>

        <button type="submit">Wyślij wiadomość</button>
        <button type="reset">Wyczyść formularz</button>
        
    </form>

</body>
</html>Kopiuj

Uwaga: Wzorzec [\d\s-]{9,} jest uproszczeniem - pozwala na 9 lub więcej cyfr, spacji lub myślników. Precyzyjniejszy wzorzec wymagałby bardziej zaawansowanego wyrażenia regularnego.