A A A

Formularze

Dzięki formularzom umieszczanym bezpośrednio na stronie WWW, możesz pozyskiwać dane od użytkowników odwiedzających Twoją stronę. Za pomocą formularzy tworzy się ankiety, rejestrację użytkownika, panel logowania itp. Formularz jest formą elektronicznej ankiety, którą wypełnia się wprost na stronie internetowej. Możliwe przy tym jest wprowadzanie tekstów, odpowiadanie na pytania za pomocą pół jednokrotnego lub wielokrotnego wyboru. Taki formularz może zostać wysłany bezpośrednio pocztą elektroniczną użytkownika, jeśli ma w swoim systemie operacyjnym skonfigurowany program pocztowy, lub dane z niego możemy pobrać do skryptu (np. PHP). Formularz tworzymy za pomocą znaczników <form>… </form>. Atrybuty tagu:

  • action - podajemy mailto:adres@email.com aby wysłać formularz za pomocą poczty lektronicznę, lub można podać adres skryptu PHP lub CGI (jeśli znajduje się on na tym samym serwerze, wystarczy podać względną ścieżkę dostępu). Skrypt taki stanowi specjalny program, wykonywany wprost na stronie WWW (na serwerze). Potrafi on, zgodnie z poleceniami programisty, przetworzyć wszystkie dane i np. zapisać je w oddzielnym pliku.
  • metod - jeśli formularz przekazujemy do skryptu jako wartość możemy podać "get" lub "post"

Pole tekstowe


<form action="...">
	<input type="text" name="nazwa" />
</form>

gdzie jako „nazwa” należy podać nazwę pola (nie powinna być zbyt długa, zostanie ona wysłana razem z formularzem, ponadto atrybut name="...", powinien być unikatowy w obrębie formularza, tzn. żadne dwa pytania w tym samym formularzu nie powinny mieć takiej samej nazwy). Typ "text" jest podstawowym rodzajem pola tekstowego. Ma ono wysokość jednej linii tekstu i określoną długość. Można do niego wpisywać tekst, który później zostanie wysłany wraz z formularzem, jako odpowiedź na zadane pytanie. UWAGA! Wszystkie pola (dowolnego typu), które mają się znaleźć w formularzu, należy umieszczać pomiędzy tymi samymi znacznikami <form> oraz </form>. W obrębie jednego dokumentu, można umieszczać wiele formularzy. Atrybuty tagu:

  • size - można podać długość pola wyrażoną w ilości znaków (nie ogranicza ilości znaków wpisywanych przez użytkownika
  • maxlength - można podać maksymalną dopuszczalną ilość znaków, z których może składać się odpowiedź (użytkownik nie będzie mógł wpisać dłuższego tekstu
  • value - można podać przykładowy tekst.
  • disabled – ustawienie na disabled powoduje zablokowanie pola

Pole opcji

Możemy wybrać tylko jedną opcję.

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Male
Female
Pamiętaj aby wszystkie pola tego typu, które dotyczą tego samego pytania, nosiły koniecznie taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!

Pole wyboru

Podobne do pola opcji, z tym że użytkownik może zaznaczyć wiele opcji

<form>
<input type="checkbox" name="vehicle" value="Bike" checked="checked" /> 
I have a bike:
<br />
<input type="checkbox" name="vehicle" value="Car" /> 
I have a car: 
<br />
<input type="checkbox" name="vehicle" value="Airplane" /> 
I have an airplane: 
</form>
I have a bike:
I have a car:
I have an airplane:

Lista rozwijana

Listę rozwijaną tworzymy za pomocą znaczków <select>… </select>. Pomiędzy te znaczniki wstawiamy opcje naszej listy, a robimy to za pomocą znaczników <option> </option>. Najłatwiej zobrazować to na przykładzie:

<form action="...">
	<select name="nazwa">
		<option>Tu wpisz pierwszą możliwość</option>
		<option>Tu wpisz drugą możliwość</option>
		(...)
	</select>
</form>

Wysyłanie formularza

Wiemy już jak wprowadzić tekst i umieścić pola wyboru. No, ale jak użytkownik ma zaznaczyć, że skończył już jego uzupełnianie i chce go wysłać? Do tego musimy umieścić przycisk. Robi się to także za pomocą znacznika <input />, gdzie type ustawiamy na submit.

<form action="...">
	<input type="submit" value="wartość" />
</form>

«     »