Formularze#

Lista wyboru#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="...">
	<select name="nazwa">
		<option>Pierwszą możliwość</option>
		<option>Druga możliwość</option>
		...
	</select>
</form>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem (wysłane zostaną również wpisane możliwości odpowiedzi).

Lista wyboru umieszczana jest w dokumencie za pomocą elementu select. Element ten ma znacznik otwierający i zamykający, a pomiędzy nimi znajdują się opcje listy (option). Lista posiada swoje specyficzne atrybuty:

Domyślnie lista wyboru wyświetlana jest jako lista rozwijalna. Nic jednak nie stoi na przeszkodzie, aby zamiast listy rozwijalnej utworzyć listę już rozwiniętą – taką, która nie wymaga interakcji użytkownika (tj. kliknięcia obszaru listy) dla wyświetlenia wszystkich opcji. Wystarczy zadeklarować rozmiar listy równy liczbie opcji wyboru. Kiedy rzeczywista liczba opcji jest większa niż liczba widocznych opcji, przeglądarka powinna wyświetlić pasek przewijania.

Opcje listy definiuje się za pomocą elementów option. Mogą one zawierać tylko tekst. Element posiada własne specyficzne atrybuty:

W zawartości elementu option nie można wpisywać żadnych znaczników.

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

Lista wyboru bez specyficznych ustawień:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<select name="lista">
			<option>Opcja 1</option>
			<option value="Opcja 2">Opcja 2</option>
			<option>Opcja 3</option>
			<option value="Opcja 4" />
		</select>
	</div>
</form>

Efekt:

Lista wielokrotnego wyboru, z określonym rozmiarem, zaznaczonymi i wyłączonymi polami:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<select name="lista" multiple="multiple" size="4">
			<option selected="selected">Możliwość 1</option>
			<option disabled="disabled">Możliwość 2</option>
			<option selected="selected">Możliwość 3</option>
			<option>Możliwość 4</option>
			<option>Możliwość 5</option>
			<option disabled="disabled">Możliwość 6</option>
		</select>
	</div>
</form>

Efekt:

Lista wyboru całkowicie rozwinięta, z zaznaczonym polem i zablokowana:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<select name="lista" disabled="disabled" size="4">
			<option>Możliwość 1</option>
			<option>Możliwość 2</option>
			<option selected="selected">Możliwość 3</option>
			<option>Możliwość 4</option>
		</select>
	</div>
</form>

Efekt:

Grupy opcji#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="...">
	<select name="nazwa">
		<optgroup label="nazwa grupy">
			<option>Pierwszą możliwość</option>
			<option>Druga możliwość</option>
			...
		</optgroup>
	</select>
</form>

Opcje wchodzące w skład listy wyboru można zgrupować, umieszczając je jako treść elementu optgroup. Wyodrębnionej grupie opcji da się za pomocą atrybutu label nadać etykietę, którą większość przeglądarek wyświetli przed daną grupą w odpowiednio wyróżniony sposób. Utworzony nagłówek nie może zostać wybrany ani zaznaczony. Jedna lista rozwijalna może zawierać dowolną liczbę grup opcji, ale nie można ich zagnieżdżać, tzn. umieszczać jednej grupy wewnątrz innej.

Można oczywiście próbować wstawiać pomiędzy kolejne grupy elementy option zawierające np. kilka znaków myślnika lub po prostu pustą zawartość. Niestety opcje takie tak naprawdę niczym nie będą różniły się od pozostałych, tzn. będzie je można normalnie wybrać.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<select name="lista" size="6">
			<optgroup label="Grupa 1">
				<option>Możliwość 1.1</option>
				<option>Możliwość 1.2</option>
				<option>Możliwość 1.3</option>
			</optgroup>
			<optgroup label="Grupa 2">
				<option>Możliwość 2.1</option>
				<option>Możliwość 2.2</option>
				<option>Możliwość 2.3</option>
			</optgroup>
			<option>Możliwość 3</option>
			<option>Możliwość 4</option>
			<option>Możliwość 5</option>
		</select>
	</div>
</form>

Efekt:

Wygląd nagłówka grupy opcji może różnić się w zależności od przeglądarki. Najczęściej wyświetlany jest czcionką pogrubioną i pochyloną. Sposób wyświetlania możemy samodzielnie zmienić, nadając poleceniu optgroup odpowiednie style, np. czerwony kolor czy niebieskie tło.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Formularze (H1) Lista wyboru (H2) Grupy opcji (H3)