Tagi HTML: textarea

<textarea> to znacznik HTML, który tworzy wielowierszowe pole tekstowe do wprowadzania dłuższych treści przez użytkowników. W przeciwieństwie do <input type="text">, który akceptuje jedną linię, textarea pozwala wprowadzać całe akapity, komentarze i wiadomości.

Najczęściej umieszczaj <textarea> wewnątrz elementu <form>, aby wysłać dane na serwer i je przetworzyć.

Podstawowa składnia

Najprostszy przykład pola textarea wygląda tak:

<textarea></textarea>

Aby dodać tekst domyślny, wpisz go między znacznikami otwierającym i zamykającym. Nie używaj atrybutu value w <textarea>.

<textarea>Domyślny tekst w polu</textarea>

Pełny przykład z podstawowymi atrybutami wymiarów:

<textarea name="message" rows="10" cols="30">
Tu wpisz swoją wiadomość...
</textarea>

Kluczowe atrybuty

Wymiary pola

rows definiuje liczbę widocznych wierszy, a cols — liczbę widocznych kolumn (przybliżoną szerokość znaku w monospacie). Przykład:

<textarea rows="5" cols="40"></textarea>

Atrybuty funkcjonalne

Najczęściej używane atrybuty wraz z krótkim opisem i przykładem:

Atrybut	Opis	Przykład
name	Nazwa pola przesyłana z formularzem	name="komentarz"
placeholder	Tekst podpowiedzi wyświetlany w pustym polu	placeholder="Napisz swój komentarz"
maxlength	Maksymalna liczba znaków wprowadzanych przez użytkownika	maxlength="500"
readonly	Pole tylko do odczytu (użytkownik nie może edytować)	readonly
disabled	Wyłącza element (nie wysyła się z formularzem)	disabled

Atrybuty dostępowe

Przykładowe użycie z atrybutami wpływającymi na dostępność i identyfikację:

<textarea id="feedback" class="form-textarea" title="Pole do wpisania opinii" lang="pl"></textarea>

Krótki opis kluczowych atrybutów:

• id – unikalny identyfikator powiązany z <label> przez for;
• class – nazwa(e) klas CSS do stylizacji i selektorów;
• title – dodatkowa podpowiedź w formie dymku przy najechaniu myszką;
• lang – deklaracja języka treści, pomocna dla czytników ekranu.

Praktyczne przykłady

Formularz z komentarzem

Oto prosty formularz z polem komentarza i limitami znaków:

<form action="send.php" method="POST">
<label for="comment">Twój komentarz:</label>
<textarea id="comment" name="user_comment" rows="6" cols="50" placeholder="Udostępnij swoją opinię..." maxlength="1000"></textarea>
<button type="submit">Wyślij</button>
<button type="reset">Wyczyść</button>
</form>

Pole biografii z ograniczeniami

Przykład pola tylko do odczytu z limitem znaków:

<textarea name="bio" rows="5" cols="40" placeholder="Opowiedz o sobie" maxlength="500" readonly>Jestem programistą z 10-letnim doświadczeniem...</textarea>

Stylizacja CSS

Domyślnie użytkownik może zmieniać rozmiary pola <textarea> przez przeciąganie jego rogu — kontrolujesz to właściwością CSS resize. Oto przykłady konfiguracji:

/* Zablokuj zmianę rozmiaru */
textarea { resize: none; }

/* Pozwól zmianę tylko w pionie */
textarea { resize: vertical; }

/* Pozwól zmianę tylko w poziomie */
textarea { resize: horizontal; }

Dodatkowe, czytelne stylizacje stanu domyślnego i focus:

textarea {
font-family: 'Courier New', monospace;
font-size: 14px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
line-height: 1.5;
}

textarea:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

Interakcja z JavaScriptem

Pobranie wartości

Tak pobierzesz aktualną zawartość pola:

// Bezpośrednio przez ID
const textarea = document.getElementById('comment');
const text = textarea.value;

// Lub przez name w formularzu
const form = document.querySelector('form');
const commentValue = form.elements['user_comment'].value;

Słuchanie zdarzeń

Obsługa najważniejszych zdarzeń pola tekstowego:

const textarea = document.getElementById('comment');

// Zdarzenie przy zmianie zawartości
textarea.addEventListener('change', function() {
console.log('Zawartość zmieniona:', this.value);
});

// Zdarzenie podczas pisania (real-time)
textarea.addEventListener('input', function() {
console.log('Ilość znaków:', this.value.length);
});

// Gdy pole uzyskuje focus
textarea.addEventListener('focus', function() {
this.style.borderColor = '#4CAF50';
});

Licznik znaków

Skrypt licznika, który pokazuje liczbę pozostałych znaków względem limitu:

const textarea = document.getElementById('comment');
const counter = document.getElementById('charCount');
const maxChars = 500;

textarea.addEventListener('input', function() {
const remaining = maxChars - this.value.length;
counter.textContent = `Pozostało znaków: ${remaining}`;

if (remaining < 0) {
counter.style.color = 'red';
} else {
counter.style.color = 'green';
}
});

HTML do licznika znaków z limitem ustawionym na 500:

<textarea id="comment" maxlength="500" rows="5" cols="50"></textarea>
<p id="charCount">Pozostało znaków: 500</p>

Walidacja przed wysłaniem

Przykład prostej walidacji treści w momencie wysyłki formularza:

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
const textarea = this.elements['user_comment'];

if (textarea.value.trim() === '') {
e.preventDefault();
alert('Pole komentarza nie może być puste!');
} else if (textarea.value.length < 10) {
e.preventDefault();
alert('Komentarz musi mieć co najmniej 10 znaków!');
}
});

Dobre praktyki

Aby zadbać o czytelność, dostępność i wygodę użytkownika, kieruj się poniższymi zasadami:

1. Zawsze używaj <label> – połącz je atrybutami for/id, by poprawić dostępność i UX;
2. Dodaj placeholder – podpowiedz użytkownikowi oczekiwany format lub zakres treści;
3. Ustaw rozsądne limity – kontroluj długość wpisu przez maxlength i informuj o limicie;
4. Stylizuj wyraźnie – wyróżnij pole od otaczającego tekstu i zadbaj o czytelny stan focus;
5. Obsługuj zdarzenia – reaguj w czasie rzeczywistym na input/change dla lepszego feedbacku;
6. Pamiętaj o responsywności – stosuj elastyczne jednostki (np. procenty) i testuj na urządzeniach mobilnych.