Przejdź do treści

Formularze

Lista rozwijalna

<form action="...">
	<select name="nazwa">
		<option>Tu wpisz pierwszą możliwość</option>
		<option>Tu wpisz drugą 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).

Jeśli chcemy, aby w formularzu zostały przesłane inne wartości niż treść znaczników <option>...</option>, można wprowadzić dla tych znaczników dodatkowe atrybuty value="wartość". Ich treść może się różnić od tekstu wpisanego po znaczniku <option>...</option>. Atrybuty value="..." są obowiązkowe, jeśli zamierzamy wykorzystać formularz w skrypcie.

Polecenie pozwala wprowadzić listę rozwijalną (menu) - inaczej zwaną również polem kombi - z której możemy wybrać jedną (typ podstawowy) lub kilka możliwości (typ rozszerzony) - za pomocą klawisza Ctrl. Każdy znacznik <option>...</option> odpowiada jednej opcji na liście. Możliwe jest oczywiście wprowadzenie więcej niż dwóch opcji wyboru (w miejsce kropek).

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

Przykład:

Zwróć uwagę, że po kliknięciu tego pola, rozwija się menu, z którego możesz wybrać jedną z kilku opcji.

To jest typ podstawowy

Możliwe są tutaj dodatkowe atrybuty:

  1. Możliwość wyboru kilku opcji (typ rozszerzony):
    <select name="nazwa" multiple="multiple">
    	<option>Tu wpisz pierwszą możliwość</option>
    	<option>Tu wpisz drugą możliwość</option>
    </select>

    Dla zaawansowanych
    Aby odebrać wszystkie zaznaczone opcje w skrypcie PHP, jako nazwę pola można wpisać: name="nazwa[]". W takim przypadku w skrypcie będzie dostępna tablica $nazwa ($_POST['nazwa'] lub $_GET['nazwa']), a wartości kolejnych zaznaczonych opcji (tylko zaznaczonych), będzie można odczytać poprzez użycie: $nazwa[0], $nazwa[1], $nazwa[2] ($_POST['nazwa'][0], $_POST['nazwa'][1], $_POST['nazwa'][2] albo $_GET['nazwa'][0], $_GET['nazwa'][1], $_GET['nazwa'][2]) itd. (w zależności ile opcji zostanie zaznaczonych).

    Przykład:

    Dodatkowe możliwości wybiera się trzymając wciśnięty klawisz Ctrl ("Control") lub przeciągając myszką:

    To jest typ z możliwością wyboru kilku opcji jednocześnie
  2. Z zaznaczoną domyślnie opcją:
    <select name="nazwa">
    	<option>Tu wpisz pierwszą możliwość</option>
    	<option selected="selected">Tu wpisz drugą możliwość<option>
    </select>

    Aby można było zaznaczyć kilka opcji domyślnych, koniecznie należy zastosować typ rozszerzony (MULTIPLE)!

    Przykład:

    Zwróć uwagę, że w poniższym "okienku" jest zaznaczona domyślnie Możliwość 2, a nie jak poprzednio Możliwość 1:


    MULTIPLE
  3. O określonej wysokości pola:
    <select name="nazwa" size="w">
    	<option>Tu wpisz pierwszą możliwość</option>
    	<option>Tu wpisz drugą możliwość</option>
    </select>
    gdzie "w" oznacza ilości wierszy (linii) z odpowiedziami, które będą jednocześnie widoczne na ekranie (pole może oczywiście posiadać więcej opcji, niezależnie od atrybutu size="...").

    Przykład:

    Zauważ, że jeśli wysokość pola jest większa niż ilość opcji, to nie pojawia się suwak do jego przewijania:

    size="5"
  4. Blokada pola:
    <select name="nazwa" disabled="disabled">
    	<option>Tu wpisz pierwszą możliwość</option>
    	<option>Tu wpisz drugą możliwość</option>
    </select>

    Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.

    UWAGA!
    Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

    Przykład:

    To pole jest zablokowane (disabled="disabled").

    To pole jest zablokowane (disabled="disabled").

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Grupy opcji

<select name="nazwa">
<optgroup label="nazwa grupy">
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</optgroup>
</select>

Czasem zachodzi potrzeba wizualnego zgrupowania kilku opcji listy rozwijalnej. Można oczywiście próbować wstawiać pomiędzy kolejne grupy znaczniki 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ć. Można jednak dokonać grupowania za pomocą osobnego znacznika OPTGROUP. Pojawi się on w postaci nagłówka nad opcjami, które zawiera. Będzie wyróżniony wizualnie i nie będzie możliwe jego wybranie. 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.

Wygląd nagłówka grupy opcji może różnić się w zależności od przeglądarki. Np. MSIE i Firefox wyświetlają go czcionką pogrubioną i pochyloną, a Opera w postaci białego tekstu na czarnym tle.

Przykład:

Rozwiń listę, aby zobaczyć grupy opcji (zwróć uwagę, że nie możesz wybrać nagłówka grupy):

Zobacz także

Komentarze

Zobacz więcej komentarzy