Formularze#

Obszar tekstowy#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="...">
	<textarea name="nazwa" cols="x" rows="y">"Domyślna zawartość pola"</textarea>
</form>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem. Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które mogą się jednocześnie zmieścić w polu, bez jego przewijania.

Wymiary podane w CSS mają priorytet nad wymiarami ustawionymi przez rows i cols. Nowe przeglądarki umożliwiają dynamiczne manewrowanie rozmiarami obszaru tekstowego za pomocą znacznika umieszczonego w prawym dolnym rogu.

Obszar tekstowy to pole, w którym umieścić można tekst z wieloma liniami. Większość przeglądarek domyślnie wyświetla tekst w obrębie wieloliniowego pola tekstowego czcionką o stałej szerokości (monospace, czyli np. Courier). Atrybuty cols i rows są obowiązkowe. Jeśli ilość tekstu w obrębie obszaru tekstowego przekracza zdefiniowane wartości, przeglądarka powinna wyświetlić paski przewijania.

Element textarea pozwala na wprowadzenie pewnego dłuższego komentarza przez użytkownika, który wypełnia formularz. Jest szeroko stosowany na wszelkiego rodzaju forach internetowych. 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 elementu textarea (w treści domyślnej) nie można wpisywać żadnych znaczników. Także znaki zastrzeżone (np. "<", ">" czy "&") należy wprowadzać za pomocą encji lub odpowiednich prezentacji z kodowania. Przejście do następnej linii następuje poprzez klawisz Enter. Uwzględniane są dodatkowe spacje oraz tabulacja.

Obszar tekstowy posiada następujące specyficzne atrybuty:

Poniżej zaprezentowano kilka przykładów z użyciem specyficznych atrybutów.

Obszar tekstowy bez specyficznych ustawień:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<textarea name="uwagi" cols="30" rows="5"></textarea>
	</div>
</form>

Efekt:

Wprowadzenie domyślnej treści (można ją wymazać):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<textarea name="uwagi" cols="30" rows="5">Spora ilość domyślnej treści (powinien pojawić się pasek przewijania) Spora ilość domyślnej treści (powinien pojawić się pasek przewijania) Spora ilość domyślnej treści (powinien pojawić się pasek przewijania) Spora ilość domyślnej treści (powinien pojawić się pasek przewijania)</textarea>
	</div>
</form>

Efekt:

Ustawienie obszaru tylko do odczytu (readonly):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<textarea name="uwagi" readonly="readonly" cols="30" rows="3">Obszar tylko do odczytu.
		Tego tekstu nie można usunąć ani zmienić.</textarea>
	</div>
</form>

Efekt:

Wyłączenie obszaru (disabled):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<textarea name="uwagi" disabled="disabled" cols="30" rows="3">Obszar został zablokowany.</textarea>
	</div>
</form>

Efekt:

Zdefiniowanie sposobu zawijania treści za pomocą CSS:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<textarea name="uwagi" cols="30" rows="3" style="white-space: nowrap;">Następująca treść nie powinna ulec zawinięciu na kolejne wiersze.</textarea>
	</div>
</form>

Efekt (widoczny tylko w nowszych przeglądarkach):

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Formularze (H1) Obszar tekstowy (H2)