Obszar tekstowy <textarea>
Jak wprowadzić wieloliniowe pole tekstowe, w którym można wpisać dłuższy komentarz?
Obszar tekstowy <textarea>
<form action="..."> <textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea> </form>
Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które mogą się jednocześnie zmieścić w polu, bez jego przewijania.
Polecenie to wyświetla na ekranie wieloliniowe pole tekstowe (obszar tekstowy). Pozwala ono na wprowadzenie pewnego dłuższego komentarza przez użytkownika, który wypełnia formularz. Można także podać między znacznikami <textarea> a </textarea> treść domyślną, która pojawi się w tym polu (możliwe jest oczywiście jej późniejsze wymazanie przez użytkownika).
Wewnątrz <textarea>...</textarea> (w treści domyślnej) nie można wpisywać żadnych znaczników. Przejście do następnej linii następuje poprzez klawisz Enter. Uwzględniane są dodatkowe spacje oraz tabulacja.
Jeśli chcesz dowiedzieć się więcej na temat jeszcze bardziej zaawansowanych funkcji pola obszaru tekstowego, zobacz rozdział HTML5: Kapitalizacja tekstu, Blokada autouzupełniania, Zogniskowanie, Klawisz Enter, , Minimalna i Maksymalna liczba znaków, Podpowiedź pola formularza, Pole obowiązkowe, Sprawdzanie pisowni, Zawijanie tekstu w formularzu.
Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.
Przykład <textarea>
To jest przykład pola komentarza bez podania treści domyślnej:
Pole tylko do odczytu <textarea readonly>
<textarea name="nazwa" cols="x" rows="y" readonly>...</textarea>
Wstawienie atrybutu readonly powoduje, że tekstu zapisanego domyślnie w tym polu, nie będzie można modyfikować.
Przykład <textarea readonly>
Blokada pola <textarea disabled>
<textarea name="nazwa" cols="x" rows="y" disabled>...</textarea>
Wstawienie atrybutu disabled powoduje zablokowanie pola.
UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Przykład <textarea disabled>
Pytania i odpowiedzi <textarea>
Co definiuje tag TEXTAREA?
Znacznik TEXTAREA pozwala wstawić wieloliniowe pole tekstowe wewnątrz formularza. Pole takiego typu może być używane np. do wpisania komentarza bądź innej nieco dłuższej wiadomości.
Jak zmienić rozmiar pola tekstowego HTML?
Domyślnie każde wieloliniowe pole tekstowe ma ustaloną zarówno szerokość jak i wysokość, które mogą się różnić w zależności od przeglądarki. Aby ustawić szerokość takiego pola np. na 100 znaków, a wysokość na 10 linijek tekstu, można się posłużyć następującym kodem: <textarea name="..." cols="100" rows="10"></textarea>. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 100 znaków, nadal będzie mógł to zrobić. Wtedy tekst po prostu zostanie przeniesiony do kolejnej linijki. Natomiast jeśli zajmie już całe 10 linijek, przeglądarka wyświetli w tym polu pionowy suwak do przewijania, a cała jego zawartość przesunie się w górę.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
<textarea> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | ≤12.1 2012-11-20 | ≤4 2009-06-08 |
<textarea cols> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | ≤12.1 2012-11-20 | ≤4 2009-06-08 |
<textarea disabled> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | ≤12.1 2012-11-20 | ≤4 2009-06-08 |
<textarea form> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | ≤12.1 2012-11-20 | ≤4 2009-06-08 |
<textarea name> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | ≤12.1 2012-11-20 | ≤4 2009-06-08 |
<textarea readonly> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | ≤12.1 2012-11-20 | ≤4 2009-06-08 |
<textarea rows> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | ≤12.1 2012-11-20 | ≤4 2009-06-08 |