Formularze#

Wysłanie formularza#

Przycisk tekstowy:

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

gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślna wartość zależna od stosowanej przeglądarki internetowej (np. Wyślij zapytanie, Prześlij, Wyślij).

Przycisk obrazkowy:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="...">
	<input type="image" src="ścieżka dostępu" alt="tekst alternatywny">
</form>

gdzie jako "ścieżka dostępu" należy podać nazwę pliku (jeśli plik znajduje się w tym samym katalogu co strona WWW) lub adresu URL obrazu, który ma zostać w danym miejscu wstawiony. Adresy tworzymy na tych samych zasadach jak w przypadku odsyłaczy. Natomiast zamiast "tekst alternatywny" można podać opis, który pojawi się w przypadku, gdy obrazek nie zostanie wczytany, a także po wskazaniu go myszką (atrybut ten nie jest konieczny).

W obu przypadkach możliwe jest podanie specyficznych atrybutów:

Po zbudowaniu formularza trzeba jeszcze zatroszczyć się o kod, który pozwoli wysłać informacje podane przez czytelnika strony do jej autora. Służy do tego polecenie input z atrybutem type="submit" lub type="image". Przycisk wysyłający to specjalny rodzaj przycisku, dla którego nie trzeba określać zachowań za pomocą języka skryptowego po stronie użytkownika (np. JavaScript). Gdy czytelnik kliknie ten przycisk, wszystkie podane przez niego informacje, jak zaznaczone opcje, wypełnione pola tekstowe czy wybrane pozycje na liście zostaną przesłane pod wskazany adres (np. e-mail lub do skryptu na serwerze). Jeden formularz może się składać z wielu przycisków wysyłających.

Kliknięcie graficznego przycisku wysyłającego przez użytkownika powoduje, że do zestawu danych zostają dodane dwie pary nazwa i wartość: nazwa-kontrolki.x=wartość-x-kontrolki i nazwa-kontrolki.y=wartość-y-kontrolki. Pierwsza para zawiera odległość od górnego lewego rogu obrazu na osi odciętych, a druga na osi rzędnych. W ten sposób skrypt otrzymujący dane będzie znał dokładne współrzędne punktu w obrębie obrazu, który użytkownik kliknął. Poniższe przykłady prezentują działanie opisywanych kontrolek.

Przycisk tekstowy bez definiowania własnego opisu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<input type="submit" />
	</div>
</form>

Efekt:

Przycisk tekstowy z własnym opisem (value):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<input type="submit" value="Prześlij formularz" />
	</div>
</form>

Efekt:

Przycisk z własną grafiką (button przyjmuje wymiary pliku graficznego):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<input type="image" src="../../pliki/html/formularze/wysylanieformularza/buttonform.gif" alt="Kliknij by przesłać formularz" />
	</div>
</form>

Efekt:

Blokada pól wysyłających:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<input type="submit" disabled="disabled" />
		<input type="submit" disabled="disabled" value="Prześlij formularz" />
		<input type="image" disabled="disabled" src="../../pliki/html/formularze/wysylanieformularza/buttonform.gif" alt="Kliknij by przesłać formularz" />
	</div>
</form>

Efekt:

Różne akcje dla pól wysyłających#

Pole wysyłające formularz posiada atrybut name, którego wartość zostanie wysłana wraz z formularzem, podobnie jak to się dzieje w przypadku zwykłych pól przechowujących odpowiedzi użytkownika. W jednym formularzu może się znajdować kilka różnych pól wysyłających, każde z nich może mieć inną nazwę lub/i wartość, a z formularzem jest wysyłana wartość tylko tego, za pomocą którego został on wysłany - tzn. tego, który został kliknięty. Dzięki temu w niektórych przypadkach prostych formularzy nie trzeba wstawiać dodatkowych pól typu radio, a wystarczy umieścić po prostu kilka różnych przycisków wysyłających. Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<input type="submit" name="wyslano" value="Odpowiedz 1" /><br />
		<input type="submit" name="wyslano" value="Odpowiedz 2" /><br />
		<input type="submit" name="wyslano" value="Odpowiedz 3" />
	</div>
</form>

Efekt:



Z takim formularzem może zostać wysłana tylko jedna z wartości:

Powyższy przykład będzie równoważny z następującym konwencjonalnym formularzem:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="">
	<div>
		<label><input type="radio" name="wyslano" value="Odpowiedz 1" />Odpowiedź 1</label><br />
		<label><input type="radio" name="wyslano" value="Odpowiedz 2" />Odpowiedź 2</label><br />
		<label><input type="radio" name="wyslano" value="Odpowiedz 3" />Odpowiedź 3</label><br />
		<input type="submit" value="Prześlij formularz" />
	</div>
</form>

Efekt:




Własność ta jest często wykorzystywana w językach skryptowych, np. do potwierdzania decyzji użytkownika:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<form action="?akcja=kasowanie" method="post">
	<div>
		<input type="hidden" name="id" value="1" />
		<p>Czy na pewno chcesz to zrobić?</p>
		<input type="submit" name="potwierdzenie" value="Tak" />
		<input type="submit" name="potwierdzenie" value="Nie" />
	</div>
</form>

Efekt:

Czy na pewno chcesz to zrobić?

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Formularze (H1) Wysłanie formularza (H2) Różne akcje dla pól wysyłających (H3)