<textarea>

Wielowierszowe pole tekstowe na dłuższe wypowiedzi: wiadomości, opinie, opisy.

Wyświetlanie: inline-block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Tekst, który staje się wartością początkową pola

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<style>
  label { display: block; margin-bottom: 6px; }
  textarea { width: 100%; max-width: 420px; }
</style>
<label for="feedback">Co możemy poprawić w kursie?</label>
<textarea id="feedback" name="feedback" rows="4" maxlength="500" placeholder="Napisz kilka zdań…"></textarea>

Podgląd

Definicja i zastosowanie

Element <textarea> tworzy pole, w którym można pisać wiele linii tekstu: wiadomość w formularzu kontaktowym, komentarz, opis projektu czy fragment kodu. W przeciwieństwie do <input> ma znacznik zamykający, a wartość początkową wpisujesz między znacznikami, a nie w atrybucie value.

Tekst między znacznikami jest brany dosłownie, łącznie ze spacjami. Wcięcia z kodu źródłowego trafią więc do pola, dlatego </textarea> zamykaj zaraz po treści, bez dodatkowych odstępów.

Rozmiar ustawisz atrybutami rows i cols albo w CSS. Użytkownik może domyślnie zmieniać wielkość pola, przeciągając róg, a kontroluje to właściwość CSS resize. Od 2026 roku we wszystkich głównych przeglądarkach pole może też samo rosnąć razem z treścią dzięki field-sizing: content.

Składnia

<textarea name="nazwa" rows="4"></textarea>

Atrybuty

rows / cols
liczba
Wysokość pola w wierszach tekstu i szerokość w znakach, domyślnie 2 wiersze i 20 znaków. To tylko rozmiar początkowy, który możesz nadpisać w CSS.
placeholder
tekst
Podpowiedź widoczna w pustym polu. Podobnie jak w <input>, nie zastępuje etykiety.
minlength / maxlength
liczba znaków
Najkrótsza i najdłuższa dozwolona długość tekstu. maxlength blokuje dalsze pisanie, a minlength jest sprawdzany przy wysyłaniu formularza.
required
atrybut logiczny
Pole musi zostać wypełnione, zanim formularz się wyśle.
readonly / disabled
atrybut logiczny
readonly pozwala czytać i kopiować tekst, ale nie zmieniać go, a wartość zostanie wysłana. disabled całkowicie wyłącza pole i pomija je przy wysyłaniu.
wrap
soft | hard
Decyduje, czy długie linie łamane w polu mają zostać wysłane z dodatkowymi znakami nowej linii. soft (domyślnie) łamie tekst tylko na ekranie, a hard wstawia prawdziwe znaki nowej linii przy wysyłaniu i wymaga podania cols.

Atrybut	Wartości	Opis
rows / cols	liczba	Wysokość pola w wierszach tekstu i szerokość w znakach, domyślnie 2 wiersze i 20 znaków. To tylko rozmiar początkowy, który możesz nadpisać w CSS.
placeholder	tekst	Podpowiedź widoczna w pustym polu. Podobnie jak w `<input>`, nie zastępuje etykiety.
minlength / maxlength	liczba znaków	Najkrótsza i najdłuższa dozwolona długość tekstu. `maxlength` blokuje dalsze pisanie, a `minlength` jest sprawdzany przy wysyłaniu formularza.
required	atrybut logiczny	Pole musi zostać wypełnione, zanim formularz się wyśle.
readonly / disabled	atrybut logiczny	`readonly` pozwala czytać i kopiować tekst, ale nie zmieniać go, a wartość zostanie wysłana. `disabled` całkowicie wyłącza pole i pomija je przy wysyłaniu.
wrap	soft \| hard	Decyduje, czy długie linie łamane w polu mają zostać wysłane z dodatkowymi znakami nowej linii. `soft` (domyślnie) łamie tekst tylko na ekranie, a `hard` wstawia prawdziwe znaki nowej linii przy wysyłaniu i wymaga podania `cols`.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

rows / cols

liczba

Wysokość pola w wierszach tekstu i szerokość w znakach, domyślnie 2 wiersze i 20 znaków. To tylko rozmiar początkowy, który możesz nadpisać w CSS.

HTML

<textarea rows="5" cols="36" aria-label="Notatki">Lekcja 3: formularze
- label łączy się z polem przez for
- button bez type wysyła formularz</textarea>

Podgląd

placeholder

tekst

Podpowiedź widoczna w pustym polu. Podobnie jak w <input>, nie zastępuje etykiety.

HTML

<textarea rows="3" cols="36" aria-label="Opis projektu" placeholder="Czego nauczyłeś się, budując ten projekt?"></textarea>

Podgląd

minlength / maxlength

liczba znaków

Najkrótsza i najdłuższa dozwolona długość tekstu. maxlength blokuje dalsze pisanie, a minlength jest sprawdzany przy wysyłaniu formularza.

HTML

<form>
  <textarea name="bio" rows="3" cols="36" minlength="20" maxlength="160" required aria-label="O mnie"></textarea>
  <p><button>Zapisz bio</button></p>
</form>

Podgląd

required

atrybut logiczny

Pole musi zostać wypełnione, zanim formularz się wyśle.

HTML

<form>
  <textarea name="question" rows="2" cols="36" required aria-label="Pytanie do mentora"></textarea>
  <p><button>Zadaj pytanie</button></p>
</form>

Podgląd

readonly / disabled

atrybut logiczny

readonly pozwala czytać i kopiować tekst, ale nie zmieniać go, a wartość zostanie wysłana. disabled całkowicie wyłącza pole i pomija je przy wysyłaniu.

HTML

<p><textarea rows="2" cols="36" readonly aria-label="Treść zadania">Zbuduj stronę z trzema sekcjami i menu.</textarea></p>
<p><textarea rows="2" cols="36" disabled aria-label="Komentarz mentora">Mentor jeszcze nie ocenił zadania.</textarea></p>

Podgląd

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Nie ustawiaj treści atrybutem value, bo <textarea> go nie ma. Wartość początkową wpisz między znacznikami.
Jeśli użytkownik ma zmieniać tylko wysokość pola, ustaw w CSS resize: vertical.
Przy polach z limitem znaków pokaż licznik, na przykład „120/500”, żeby limit nie zaskoczył użytkownika w połowie zdania.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs