Kurs HTML

Nowe możliwości formularzy dzięki HTML5

HTML5 wprowadził szereg nowych typów dla znacznika <input>, które znacznie ułatwiają tworzenie bardziej użytecznych i semantycznych formularzy. Te nowe typy często oferują:

• Wbudowaną walidację po stronie przeglądarki: Przeglądarka może automatycznie sprawdzać, czy wprowadzone dane pasują do oczekiwanego formatu (np. czy to poprawny adres e-mail).
• Specjalistyczne interfejsy użytkownika: Szczególnie na urządzeniach mobilnych, przeglądarki mogą wyświetlać zoptymalizowane klawiatury (np. numeryczną dla type="number") lub dedykowane kontrolki (np. selektor daty dla type="date").

Jeśli przeglądarka nie rozpoznaje danego typu HTML5, zazwyczaj traktuje go jak type="text", co zapewnia podstawową funkcjonalność.

Typy związane z danymi kontaktowymi i URL

• <input type="email">: Przeznaczone do wprowadzania adresów e-mail. Przeglądarki mogą walidować format adresu (obecność znaku `@` i kropki w części domenowej) oraz wyświetlać klawiaturę z łatwo dostępnym znakiem `@`. Można podać atrybut multiple, aby pozwolić na wpisanie listy adresów e-mail oddzielonych przecinkami.
• <input type="url">: Przeznaczone do wprowadzania adresów URL. Przeglądarki mogą walidować, czy wprowadzony tekst wygląda jak URL (np. zaczyna się od protokołu jak `http://` lub `https://`) i dostosowywać klawiaturę.
• <input type="tel">: Przeznaczone do wprowadzania numerów telefonów. Uwaga: Ten typ zazwyczaj nie implementuje żadnej wbudowanej walidacji formatu numeru (ponieważ formaty różnią się globalnie), ale może wyświetlać klawiaturę numeryczną na urządzeniach mobilnych. Do walidacji formatu często używa się atrybutu pattern.

<label for="email-input">E-mail:</label>
<input type="email" id="email-input" name="user_email" required placeholder="np. jan@example.com">

<label for="website-input">Strona WWW:</label>
<input type="url" id="website-input" name="user_website" placeholder="np. https://example.com">

<label for="phone-input">Telefon:</label>
<input type="tel" id="phone-input" name="user_phone" placeholder="np. 123-456-789" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"> 
<!-- Atrybut pattern dla walidacji formatu (przykład) -->Kopiuj

Typy numeryczne

• <input type="number">: Do wprowadzania liczb. Przeglądarki często wyświetlają strzałki góra/dół do zmiany wartości i mogą walidować, czy wprowadzono liczbę. Kluczowe atrybuty:
  • min: Minimalna dopuszczalna wartość.
  • max: Maksymalna dopuszczalna wartość.
  • step: Krok zmiany wartości (np. step="0.1" dla liczb dziesiętnych, step="1" - domyślnie).
• <input type="range">: Do wyboru wartości z określonego zakresu za pomocą suwaka. Wartość nie jest precyzyjna, służy raczej do ustawiania np. poziomu głośności czy jasności. Używa tych samych atrybutów min, max, step co type="number". Wartość suwaka często warto wyświetlać obok za pomocą JavaScriptu.

<label for="age-input">Wiek:</label>
<input type="number" id="age-input" name="user_age" min="18" max="120" step="1" value="30">

<label for="volume-input">Głośność:</label>
<input type="range" id="volume-input" name="volume" min="0" max="100" step="1" value="50">
<output for="volume-input" id="volume-output">50</output> <!-- Wyświetlanie wartości (aktualizowane przez JS) -->

<script>
  const volumeInput = document.getElementById("volume-input");
  const volumeOutput = document.getElementById("volume-output");
  volumeInput.oninput = () => { volumeOutput.textContent = volumeInput.value; };
</script>Kopiuj

Typy związane z datą i czasem

Te typy powodują wyświetlenie przez przeglądarkę natywnych kontrolek do wyboru daty/czasu, co jest bardzo wygodne dla użytkownika.

• <input type="date">: Wybór daty (rok, miesiąc, dzień).
• <input type="month">: Wybór miesiąca i roku.
• <input type="week">: Wybór tygodnia i roku.
• <input type="time">: Wybór godziny (godzina, minuta, czasem sekundy, AM/PM).
• <input type="datetime-local">: Wybór daty i czasu (bez informacji o strefie czasowej).

Można używać atrybutów min i max do ograniczenia zakresu dat/czasu (w formacie YYYY-MM-DD dla daty, HH:MM dla czasu itd.).

<label for="birthdate-input">Data urodzenia:</label>
<input type="date" id="birthdate-input" name="birthdate" min="1900-01-01" max="2024-12-31">

<label for="meeting-time-input">Godzina spotkania:</label>
<input type="time" id="meeting-time-input" name="meeting_time" min="09:00" max="17:00">

<label for="event-datetime-input">Data i czas wydarzenia:</label>
<input type="datetime-local" id="event-datetime-input" name="event_datetime">Kopiuj

Inne przydatne typy

• <input type="search">: Przeznaczone dla pól wyszukiwania. Wizualnie może wyglądać jak type="text", ale przeglądarki mogą dodawać np. ikonkę "x" do szybkiego czyszczenia pola.
• <input type="color">: Wyświetla natywny selektor kolorów przeglądarki, pozwalając użytkownikowi wybrać kolor. Wartością jest kod heksadecymalny koloru (np. #ff0000).

<label for="search-input">Szukaj:</label>
<input type="search" id="search-input" name="query" placeholder="Wpisz szukaną frazę...">

<label for="color-picker">Wybierz kolor:</label>
<input type="color" id="color-picker" name="selected_color" value="#e66465">Kopiuj

Zadanie praktyczne (z rozwiązaniem)

Zadanie: W formularzu kontaktowym dodaj następujące pola, używając odpowiednich typów HTML5:

1. Pole do wprowadzenia adresu e-mail (type="email", wymagane).
2. Pole do wyboru daty kontaktu (type="date").
3. Pole suwaka (type="range") do oceny satysfakcji (zakres 1-5, krok 1).

Pamiętaj o etykietach.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy - Typy HTML5</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"] { 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>
            <!-- Dodane pole email -->
            <div>
                <label for="contact-email">Adres e-mail:</label>
                <input type="email" id="contact-email" name="email_uzytkownika" required>
            </div>
            <div>
                <label for="contact-dzial">Dział:</label>
                <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>
                <textarea id="contact-wiadomosc" name="tresc_wiadomosci" rows="4" required></textarea>
            </div>
            <div>
                <label for="contact-attachment">Załącznik (obrazek):</label>
                <input type="file" id="contact-attachment" name="zalacznik" accept="image/*">
            </div>
            <!-- Dodane pole date -->
            <div>
                <label for="contact-date">Preferowana data kontaktu:</label>
                <input type="date" id="contact-date" name="data_kontaktu">
            </div>
            <!-- Dodane pole range -->
            <div>
                <label for="contact-satisfaction">Ocena satysfakcji (1-5):</label>
                1 <input type="range" id="contact-satisfaction" name="satysfakcja" min="1" max="5" step="1" value="3"> 5
                <output for="contact-satisfaction" id="satisfaction-output">3</output>
            </div>
        </fieldset>

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

    <script>
      // Skrypt do aktualizacji wartości suwaka satysfakcji
      const satisfactionInput = document.getElementById("contact-satisfaction");
      const satisfactionOutput = document.getElementById("satisfaction-output");
      if (satisfactionInput && satisfactionOutput) {
          satisfactionInput.oninput = () => { satisfactionOutput.textContent = satisfactionInput.value; };
      }
    </script>

</body>
</html>Kopiuj