Formularze#

Pole wyboru#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="...">
	<input type="checkbox" name="nazwa" value="wartość">
</form>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z formularzem. Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.

Kontrolka wyboru umożliwia dokonanie wyboru kilku możliwości jednocześnie, np. zaznaczenie kilku języków, którymi się włada, czy kilku używanych przeglądarek internetowych. Reprezentowane jest przez charakterystyczny kwadrat (pole wyboru), które można zaznaczyć/odznaczyć myszką. Jego wartość jest przesyłana tylko wtedy, gdy zostanie zaznaczone.

Wszystkie pola tego typu, które dotyczą tego samego pytania, muszą koniecznie posiadać taką samą nazwę! Dodatkowo atrybut value jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!

Możliwe jest tutaj podanie dodatkowych atrybutów:

Pola tego typu bardzo często stosuje się wraz z etykietami (label). Dzięki temu zaznaczenie opcji może odbywać sie nie tylko poprzez kliknięcie w mały kwadracik, ale także po kliknięciu na opis danego pola. Najlepiej zobaczyć kilka poniższych przykładów.

Pole wyboru bez specyficznych atrybutów:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<p><em>Czy znasz któryś z języków kongresowych?</em></p>
	<div>
		<input type="checkbox" name="jezyk" value="angielski" />Angielski<br />
		<input type="checkbox" name="jezyk" value="francuski" />Francuski<br />
		<input type="checkbox" name="jezyk" value="niemiecki" />Niemiecki<br />
	</div>
</form>

Efekt:

Czy znasz któryś z języków kongresowych?

Angielski
Francuski
Niemiecki

Domyślne zaznaczenie opcji (checked):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<p><em>Czy znasz któryś z języków kongresowych?</em></p>
	<div>
		<input type="checkbox" checked="checked" name="jezyk" value="angielski" />Angielski<br />
		<input type="checkbox" checked="checked" name="jezyk" value="francuski" />Francuski<br />
		<input type="checkbox" name="jezyk" value="niemiecki" />Niemiecki<br />
	</div>
</form>

Efekt:

Czy znasz któryś z języków kongresowych?

Angielski
Francuski
Niemiecki

Zastosowanie dodatkowo etykiet (można klikać w opis tekstowy):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<p><em>Czy znasz któryś z języków kongresowych?</em></p>
	<div>
		<label><input type="checkbox" name="jezyk" value="angielski" />Angielski</label><br />
		<label><input type="checkbox" name="jezyk" value="francuski" />Francuski</label><br />
		<label><input type="checkbox" name="jezyk" value="niemiecki" />Niemiecki</label><br />
	</div>
</form>

Efekt:

Czy znasz któryś z języków kongresowych?




Wyłączenie pola (disabled):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<p><em>Czy znasz któryś z języków kongresowych?</em></p>
	<div>
		<input type="checkbox" name="jezyk" value="angielski" />Angielski<br />
		<input type="checkbox" name="jezyk" value="francuski" />Francuski<br />
		<input type="checkbox" disabled="disabled" name="jezyk" value="niemiecki" />Niemiecki<br />
	</div>
</form>

Efekt:

Czy znasz któryś z języków kongresowych?

Angielski
Francuski
Niemiecki
Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Formularze (H1) Pole wyboru (H2)