Lekcja 8.2: 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>:
type="text"
: Definiuje typ pola jako jednoliniowe pole tekstowe.id
: Unikalny identyfikator pola. Jest ważny dla powiązania z etykietą (<label>
) za pomocą atrybutufor
.name
: Niezbędny atrybut! Określa nazwę, pod jaką wartość wprowadzona do tego pola zostanie wysłana na serwer. Bez atrybutuname
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żymaxlength
). 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">
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>:
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 jaksize
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 atrybutucols
).
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:
- 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:
- Pole tekstowe (
type="text"
) na imię (wymagane). - Pole hasła (
type="password"
) - choć w formularzu kontaktowym nie ma sensu, dodaj je dla ćwiczenia (niewymagane). - 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:
- Dodaj do pola "Imię" atrybut
placeholder
z podpowiedzią. - Ogranicz maksymalną długość wiadomości w polu
<textarea>
do 200 znaków za pomocąmaxlength
. - Dodaj kolejne pole tekstowe na nazwisko i uczyń je również wymaganym.
- 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).