Element textarea w HTML-u. Stwórz pola dla długich tekstów

Ewa Klimowicz

25 stycznia, 2024

3 min

• Praca w IT
• Artykuły

Ostatnia aktualizacja 25 stycznia, 2024

Element HTML <textarea> odgrywa kluczową rolę w zbieraniu dłuższych fragmentów tekstu od użytkowników. Jest to nieodzowny komponent każdego formularza, w którym wymagane jest wprowadzenie komentarzy, opinii, lub innych rodzajów obszernych danych tekstowych. Jego elastyczność oraz łatwość dostosowania sprawiają, że jest szeroko stosowany w różnorodnych aplikacjach internetowych.

Podstawy wykorzystania <textarea> w HTML

Element <textarea> w HTML-u może zawierać wiele linii i służy do tworzenia pola tekstowego. W przeciwieństwie do <input type=”text”>, który jest przeznaczony dla krótkich odpowiedzi, <textarea> pozwala na wprowadzenie dłuższego tekstu.

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

Atrybuty <textarea>

<textarea> posiada kilka atrybutów, które umożliwiają dostosowanie jego wyglądu i funkcji:

1. rows i cols – określają odpowiednio wysokość i szerokość pola w liniach i kolumnach.
2. placeholder – wyświetla tekst pomocniczy wewnątrz pola, który znika po rozpoczęciu pisania.
3. maxlength – ogranicza liczbę znaków, które użytkownik może wprowadzić.
4. readonly – sprawia, że pole jest tylko do odczytu.
5. disabled – dezaktywuje pole tekstowe.

Przykładowy kod z wykorzystaniem atrybutów prezentuje się następująco:

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

Stylizacja <textarea> za pomocą CSS

Za pomocą CSS-a można łatwo zmieniać wygląd elementu <textarea>, włączając w to kolor tła, obramowanie, rozmiar czcionki i wiele innych. Stylizacja pozwala na lepsze dopasowanie elementu do ogólnego wyglądu strony.

textarea {
  background-color: lightgray;
  border: solid 1px black;
  font-size: 14px;
  padding: 10px;
}

Zastosowanie <textarea> w HTML przy tworzeniu formularzy

Element <textarea> wykorzystuje się często w formularzach do zbierania opinii, komentarzy lub innych rodzajów dłuższych odpowiedzi tekstowych. Jego zawartość łatwo przetwarza się po stronie serwera przy użyciu różnych technologii backendowych.

Przykładowy kod wygląda następująco:

<form action="/submit-comment" method="post">
  <label for="comment">Komentarz:</label><br>
  <textarea id="comment" name="comment" rows="5" cols="40"></textarea><br>
  <input type="submit" value="Wyślij">
</form>

Ten fragment kodu tworzy formularz HTML, który umożliwia użytkownikom przesłanie komentarza na serwer. Oto co dzieje się w poszczególnych elementach kodu:

1. <form action="/submit-comment" method="post">: Ten tag otwiera formularz. Atrybut action wskazuje, gdzie dane formularza mają być wysłane po naciśnięciu przycisku wysyłania – w tym przypadku do adresu URL /submit-comment. Atrybut method określa metodę HTTP używaną do wysyłania danych, tutaj post. Oznacza to, że dane formularza będą przekazywane bezpośrednio do serwera w sposób bezpieczny.
2. <label for="comment">Komentarz:</label><br>: To jest etykieta dla pola tekstowego <textarea>. Atrybut for oznacza, że etykieta jest powiązana z elementem textarea o id comment. <br> tworzy przerwę linii dla lepszej czytelności.
3. <textarea id="comment" name="comment" rows="5" cols="40"></textarea><br>: To jest pole tekstowe typu <textarea>, w którym użytkownicy mogą wpisać swój komentarz. Atrybut id służy do identyfikacji elementu, natomiast name jest nazwą, która będzie używana, gdy dane zostaną wysłane na serwer. Atrybuty rows i cols określają rozmiar pola tekstowego.
4. <input type="submit" value="Wyślij">: To jest przycisk, który po naciśnięciu wysyła dane formularza na serwer. Atrybut value określa tekst wyświetlany na przycisku.
5. </form>: Zamyka tag formularza.

Po wypełnieniu formularza przez użytkownika i naciśnięciu przycisku “Wyślij”, dane są wysyłane do serwera przy użyciu metody post pod adres określony w atrybucie action formularza.

Sprawdź: Zwolnienia w Microsoft. Pracę straci 1900 osób z gamingu

Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.

Czytaj także:

Formularz HTML krok po kroku

Kompleksowy HTML – komendy podstawowych elementów

HTML – jak wstawić zdjęcie za jego pomocą?

Poznaj zastosowania headera w HTML-u

aside w HTML-u. Stwórz boxy nawigacyjne i inne elementy