Kurs HTML

Zbieranie tekstu od użytkownika

Najczęstszym zadaniem formularzy jest zbieranie danych tekstowych od użytkowników, takich jak imię, nazwisko, adres e-mail, hasło czy dłuższe wiadomości. HTML dostarcza do tego celu głównie znacznika <input> z odpowiednimi typami oraz znacznika <textarea>.

Jednoliniowe pole tekstowe: <input type="text">

Jest to najczęściej używany typ pola formularza. Tworzy standardowe, jednoliniowe pole do wprowadzania dowolnego tekstu.

<form action="/submit" method="post">
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="user_imie">
  
  <button type="submit">Wyślij</button>
</form>Kopiuj

Kluczowe atrybuty dla <input>:

• type="text": Definiuje typ pola jako jednoliniowe pole tekstowe.
• id: Unikalny identyfikator pola. Jest ważny dla powiązania z etykietą (<label>) za pomocą atrybutu for.
• name: Niezbędny atrybut! Określa nazwę, pod jaką wartość wprowadzona do tego pola zostanie wysłana na serwer. Bez atrybutu name dane z pola nie zostaną wysłane.
• value: Określa domyślną wartość pola, która będzie widoczna przy załadowaniu strony.
• placeholder: Wyświetla tekst podpowiedzi wewnątrz pola, który znika, gdy użytkownik zacznie pisać. Służy jako wskazówka, jakiego rodzaju dane są oczekiwane. Nie zastępuje etykiety!
• required: Atrybut logiczny (nie wymaga wartości), który oznacza, że wypełnienie tego pola jest obowiązkowe przed wysłaniem formularza.
• maxlength: Określa maksymalną liczbę znaków, jaką można wprowadzić do pola.
• size: Określa widoczną szerokość pola (w znakach), ale nie ogranicza liczby wprowadzanych znaków (do tego służy maxlength). Lepiej kontrolować szerokość za pomocą CSS.
• readonly: Atrybut logiczny; pole jest tylko do odczytu, nie można go modyfikować, ale jego wartość jest wysyłana z formularzem.
• disabled: Atrybut logiczny; pole jest wyłączone, nie można go modyfikować ani zaznaczyć, a jego wartość nie jest wysyłana z formularzem.

Przykład z dodatkowymi atrybutami:

<label for="nazwisko">Nazwisko:</label>
<input type="text" id="nazwisko" name="user_nazwisko" placeholder="np. Kowalski" required maxlength="50">Kopiuj

Pole hasła: <input type="password">

Działa bardzo podobnie do type="text", ale znaki wprowadzane przez użytkownika są maskowane (zazwyczaj jako kropki lub gwiazdki), co zapobiega podejrzeniu hasła przez osoby postronne.

<label for="haslo">Hasło:</label>
<input type="password" id="haslo" name="user_haslo" required>Kopiuj

Ważne: Maskowanie w type="password" jest tylko wizualne w przeglądarce. Dane są nadal przesyłane na serwer jako zwykły tekst (chyba że używany jest protokół HTTPS, który szyfruje całą komunikację). Bezpieczeństwo haseł zależy głównie od bezpiecznego połączenia (HTTPS) i odpowiedniego przetwarzania po stronie serwera (np. hashowanie).

Wieloliniowe pole tekstowe: <textarea>

Do wprowadzania dłuższych tekstów, takich jak wiadomości, komentarze czy opisy, służy znacznik <textarea>. Tworzy on wieloliniowe pole tekstowe, którego rozmiar można zazwyczaj zmieniać przez użytkownika (chwytając za róg pola).

<label for="wiadomosc">Twoja wiadomość:</label>
<textarea id="wiadomosc" name="user_wiadomosc" rows="5" cols="30" placeholder="Wpisz tutaj treść wiadomości..."></textarea>Kopiuj

Kluczowe atrybuty dla <textarea>:

• id: Unikalny identyfikator, do powiązania z <label>.
• name: Niezbędny do wysłania danych na serwer.
• rows: Określa widoczną wysokość pola (liczbę wierszy tekstu).
• cols: Określa widoczną szerokość pola (liczbę znaków w wierszu). Podobnie jak size w <input>, lepiej kontrolować wymiary za pomocą CSS.
• placeholder: Tekst podpowiedzi wewnątrz pola.
• required: Pole musi być wypełnione.
• maxlength: Maksymalna liczba znaków.
• readonly, disabled: Działają tak samo jak w <input>.
• wrap: Określa, jak ma być obsługiwane zawijanie tekstu (soft - domyślnie, zawija tylko wizualnie; hard - wysyła tekst z dodanymi znakami nowej linii; wymaga atrybutu cols).

Uwaga: W przeciwieństwie do <input>, domyślną wartość dla <textarea> umieszcza się pomiędzy znacznikami <textarea> a </textarea>, a nie w atrybucie value.

<textarea name="opis">To jest domyślna treść.</textarea>Kopiuj

Znaczenie etykiet <label>

Jak widać w przykładach, zawsze należy używać znacznika <label> do opisywania pól formularza. Atrybut for w etykiecie powinien wskazywać na id powiązanego pola (<input> lub <textarea>). Dzięki temu:

• Kliknięcie etykiety powoduje ustawienie fokusa na powiązanym polu, co ułatwia obsługę myszką.
• Czytniki ekranu poprawnie odczytują opis pola, gdy użytkownik na nie trafi, co jest kluczowe dla dostępności.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Rozbuduj formularz kontaktowy z poprzedniej lekcji. Dodaj do niego:

1. Pole tekstowe (type="text") na imię (wymagane).
2. Pole hasła (type="password") - choć w formularzu kontaktowym nie ma sensu, dodaj je dla ćwiczenia (niewymagane).
3. Wieloliniowe pole tekstowe (<textarea>) na wiadomość (wymagane, 4 wiersze wysokości).

Pamiętaj o dodaniu etykiet (<label>) dla każdego pola i powiązaniu ich za pomocą for i id. Nadaj polom odpowiednie atrybuty name.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy - Pola Tekstowe</title>
    <style>
        label {
            display: block; /* Etykiety w osobnych liniach */
            margin-top: 10px;
        }
        input[type="text"], input[type="password"], textarea {
            width: 90%;
            max-width: 300px;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
        }
        button {
            margin-top: 15px;
            padding: 10px 15px;
        }
    </style>
</head>
<body>
    <h1>Kontakt</h1>
    
    <form action="/wyslij-wiadomosc" method="POST">
        <div>
            <label for="contact-imie">Imię:</label>
            <input type="text" id="contact-imie" name="imie_uzytkownika" required>
        </div>
        
        <div>
            <label for="contact-haslo">Hasło (dla ćwiczenia):</label>
            <input type="password" id="contact-haslo" name="haslo_uzytkownika">
        </div>
        
        <div>
            <label for="contact-wiadomosc">Wiadomość:</label>
            <textarea id="contact-wiadomosc" name="tresc_wiadomosci" rows="4" required></textarea>
        </div>
        
        <button type="submit">Wyślij wiadomość</button>
    </form>

</body>
</html>Kopiuj