Textarea – Pole Tekstowe
<textarea>
Pola <input> służą zazwyczaj do wprowadzania niewielkiej ilości tekstu. Zazwyczaj jest to maksymalnie kilka wyrazów. A co jeśli będziemy chcieli komuś przesłać dłuższy tekst, np. wiadomość formularzem kontaktowym? Wtedy z pomocą przychodzi nam element <textarea> (ang. obszar tekstowy). Textarea jest to wieloliniowe pole, w którym możemy wpisywać nie tylko krótkie formy pisemne, ale jak ktoś sobie zażyczy całe referaty, czy felietony. Element textarea potrzebuje znacznika zamykającego, a pomiędzy znacznikami możemy (ale nie musimy) wprowadzić domyślny tekst, który może być edytowany przez użytkownika.
<textarea>Tekst, który możecie dowolnie edytować.</textarea>
Dla elementu <textarea> charakterystyczne jest to, że możemy dowolnie zmieniać jego wielkość chwytając za prawy dolny róg lewym klawiszem myszki.
No dobrze użytkownik może sam zmieniać wielkość pola tekstowego, zapewne przydatna funkcja. Jednak nie każdy użytkownik wie o tym, a czasem może to być trochę uciążliwe, żeby samemu, za każdym razem dostosowywać wielkość pola tekstowego. Z pomocą przychodzą nam atrybuty elementu <textarea>, cols oraz rows.
Textarea – kolumny
cols
Szerokość pola tekstowego <textarea> możemy modyfikować poprzez jego atrybut cols (ang. columns – kolumny). Atrybut ten przyjmuje wartości liczbowe. Szerokość tym razem nie jest wyrażana w pikselach (px), a w znakach (literach, cyfrach itd.)
<textarea cols="50"></textarea>
Atrybut cols działa na zasadzie nie mniejsze niż wpisana przez nas wartość. W dalszym ciągu możemy zmieniać wielkość obszaru tekstowego, jednak nie możemy pomniejszyć jego szerokości poniżej wprowadzonej wartości.
Textarea – rzędy
rows
Do zmiany wysokości elementu <textarea> stosujemy atrybut rows (ang. wiersze, rzędy). Atrybut ten również przyjmuje wartości liczbowe. Wysokość ta wyrażana jest w ilości wierszy.
<textarea rows="4"></textarea>
Rozmiar elementu <textarea> możemy zmieniać, jednak nie możemy pomniejszyć jego wysokości poniżej wprowadzonej wartości.
Możemy również używać razem atrybutów cols oraz rows.
<textarea cols="50" rows="4"></textarea>