Kurs HTML

Lekcja 8.2: Pola tekstowe (<input>, <textarea>)

Strona główna > Rozdział 8: Formularze > Pola tekstowe (<input>, <textarea>)

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>

Kluczowe atrybuty dla <input>:

Przykład z dodatkowymi atrybutami:

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

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>

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>

Kluczowe atrybuty dla <textarea>:

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>

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:

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>

Dodatkowe zadania do samodzielnego wykonania:

  1. Dodaj do pola "Imię" atrybut placeholder z podpowiedzią.
  2. Ogranicz maksymalną długość wiadomości w polu <textarea> do 200 znaków za pomocą maxlength.
  3. Dodaj kolejne pole tekstowe na nazwisko i uczyń je również wymaganym.
  4. Spróbuj dodać domyślną wartość do pola <textarea>.

Najczęściej zadawane pytania

Jak stworzyć jednoliniowe pole tekstowe?

Użyj znacznika <input type="text">. Pamiętaj o dodaniu atrybutów id (dla etykiety) i name (do wysłania danych).

Jak stworzyć pole do wpisywania hasła?

Użyj znacznika <input type="password">. Wpisywane znaki będą maskowane w przeglądarce. Pamiętaj o atrybutach id i name.

Jak stworzyć wieloliniowe pole tekstowe?

Użyj znacznika <textarea>...</textarea>. Atrybuty rows i cols określają jego początkowy rozmiar (lepiej używać CSS). Pamiętaj o atrybutach id i name.

Do czego służy atrybut name w polach formularza?

Atrybut name jest kluczowy. Określa on nazwę, pod jaką wartość wprowadzona do pola zostanie wysłana na serwer. Bez atrybutu name dane z pola nie zostaną przesłane.

Dlaczego należy używać etykiet <label>?

Etykiety <label> powiązane z polami (przez for i id) opisują ich przeznaczenie. Poprawiają użyteczność (kliknięcie etykiety aktywuje pole) i są niezbędne dla dostępności (czytniki ekranu odczytują etykietę dla pola).