1. Zapoznaj się z podstawowymi elementami formularza html (poniżej)



Pobieranie 131.51 Kb.
Data07.05.2016
Rozmiar131.51 Kb.
Formularz.

1. Zapoznaj się z podstawowymi elementami formularza HTML (poniżej).

2. Stwórz stronę z formularzem (plik: formularz.html) zgodnie z podanym na dole przykładem.

3. Umieść formularz na swoim koncie (ftp)

4. Wykonaj ten sam formularz używając funkcji tworzenia formularzy na koncie Google (w przypadku braku konta Google należy je założyć).

5. Umieść formularz utworzony w Google na swojej stronie www.

Formularz ma formę elektronicznej ankiety, którą wypełnia się wprost na stronie. Możliwe jest przy tym wpisywanie tekstu, odpowiadanie na zadane pytania, czy zaznaczanie jednej bądź kilku z podanych możliwości wyboru. Taki formularz może być przesłany pocztą elektroniczną e-mail (prosty formularz pocztowy) i odebrany przez adresata. Istnieje wiele programów wspomagających odbieranie formularzy i grupowe wysyłanie listów na ich podstawie, przez co czynność ta może stać się mniej żmudna. Są to zarówno aplikacje w postaci programów instalowanych tradycyjnie, jak i specjalne skrypty wykonywane bezpośrednio w przeglądarce.

Ramy formularza

e-mail gdzie wysłać formularz" method="post">

(Tutaj umieszcza się pola formularza)





lub

(Tutaj umieszcza się pola formularza)





gdzie jako "adres e-mail gdzie wysłać formularz" podaj swój adres poczty elektronicznej e-mail.
Natomiast zamiast "temat" można wpisać tytuł, jaki będzie nosił formularz (jest to przydatne zwłaszcza w przypadku stosowania programów obsługujących formularze).


Pole tekstowe



type="text" name="nazwa" />



lub







gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być jednak zbyt długa! Zostanie ona później wysłana wraz z formularzem.

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ędzytymi samymi znacznikami 

 oraz 


Pole wyboru



type="checkbox" name="nazwa" value="wartość" />Tu wpisz opis pola



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.

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

Polecenie to spowoduje wyświetlenie pola w postaci kwadratu (pole wyboru), które można zaznaczyć, a także "odznaczyć", myszką. Dzięki niemu możesz wprowadzić pytanie, przy którym można wybrać kilka spośród podanych gotowych odpowiedzi.

Przykład:

Zwróć uwagę, że po kliknięciu myszką wewnątrz poniższego pola, możesz wpisać tam jakiś tekst.

Początek formularza

Dół formularza

Możliwe jest także podanie dodatkowych atrybutów:


  1. Odpowiedź domyślna:

value="odpowiedź domyślna" />

W miejsce tekstu: "odpowiedź domyślna" można wpisać domyślną treść danej odpowiedzi. Zostanie ona dołączona do formularza, jeśli użytkownik nie wpisze innej.

Przykład:

Początek formularza



Dół formularza



  1. Długość pola:

size="k" />

gdzie jako "k" można podać długość pola w ilości znaków, które będą w nim jednocześnie widoczne (domyślnie 20 - w Internet Explorerze). Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".

Przykład:

Początek formularza



size="10"

Dół formularza



Pole wyboru

type="checkbox" name="nazwa" value="wartość" />Tu wpisz opis pola





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.

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

Polecenie to spowoduje wyświetlenie pola w postaci kwadratu (pole wyboru), które można zaznaczyć, a także "odznaczyć", myszką. Dzięki niemu możesz wprowadzić pytanie, przy którym można wybrać kilka spośród podanych gotowych odpowiedzi.

Przykład:

Zwróć uwagę, że możesz zaznaczyć więcej niż jedno pole tego typu lub nawet nie zaznaczać żadnego. Zaznaczone pole możesz także "odznaczyć", powtórnie klikając na nie myszką:

Początek formularza

Odpowiedź nr1 Odpowiedź nr2 Odpowiedź nr3

Dół formularza



Pole opcji



type="radio" name="nazwa" value="wartość" />Tu wpisz opis pola



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.

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!



Przykład:

Zwróć uwagę, że możesz zaznaczyć (myszką) tylko jedno pole. Jeśli chcesz je "odznaczyć", musisz wybrać inną możliwość:

Początek formularza

Odpowiedź nr1 Odpowiedź nr2 Odpowiedź nr3
Lista rozwijalna







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 , można wprowadzić dla tych znaczników dodatkowe atrybuty value="wartość". Ich treść może się różnić od tekstu wpisanego po znaczniku . 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  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.

Początek formularza


 To jest typ podstawowy

Dół formularza


Obszar tekstowy







gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem.
Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które mogą się jednocześnie zmieścić w polu, bez jego przewijania.

Polecenie to wyświetla na ekranie wieloliniowe pole tekstowe (obszar tekstowy). Pozwala ono na wprowadzenie pewnego dłuższego komentarza przez użytkownika, który wypełnia formularz. Można także podać między znacznikami  treść domyślną, która pojawi się w tym polu (możliwe jest oczywiście jej późniejsze wymazanie przez użytkownika).

Wewnątrz  (w treści domyślnej) nie można wpisywać żadnych znaczników. Przejście do następnej linii następuje poprzez klawisz Enter. Uwzględniane są dodatkowe spacje oraz tabulacja.

Przykład:

To jest przykład pola komentarza bez podania treści domyślnej:

Początek formularza

Możesz tu coś wpisać...
Wysłanie formularza


  1. Przycisk tekstowy:



  2. type="submit" value="wartość" />



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ślny tekst, np.: "Prześlij kwerendę".

Polecenie wprowadza na ekran przycisk z tekstem, po naciśnięciu którego, nastąpi wysłanie formularza.



Przykład:

Początek formularza



value="Kliknij tutaj!"

To jest przykład bez podania wartości value="...".
Wyczyszczenie danych



type="reset" value="wartość" />



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ślny napis, np.: "Resetuj".

Komenda wyświetla na ekranie przycisk, po naciśnięciu którego, nastąpi wyczyszczenie wszystkich udzielonych do tej pory odpowiedzi w ankiecie (np. jeśli się rozmyślimy).



Przykład:

xWypełnij formularz, a następnie kliknij jeden z poniższych przycisków:

Początek formularza

Wpisz tu jakiś tekst.

Odpowiedź nr1 Odpowiedź nr2

Odpowiedź nr1 Odpowiedź nr2


value="Kliknij tutaj!"...

To jest przykład bez podania wartości VALUE.

Dół formularza

Zwróć uwagę, że kliknięcie któregokolwiek z powyższych przycisków, spowoduje wyczyszczenie wszystkich pól formularza (jeśli był on wcześniej wypełniony).

Przykład

Wyróżnione fragmenty, można (a nawet trzeba) zastąpić innym tekstem. Są to np. pytania, poszczególne odpowiedzi, wartości parametrów i inne. Czcionką pogrubioną (pomiędzy znakami  a -->) zaznaczono komentarze. Nie są one oczywiście konieczne (możesz je pominąć). Natomiast pozwalają zorientować się, czego dotyczy fragment kodu poniżej nich.

Zaznacz kod Wypróbuj kod





Podaj swoje imię

Podaj swoje nazwisko

Podaj swoją płeć:



Kobieta

Mężczyzna

Ile masz lat?



mniej niż 15

15-19

20-29

30-39

40-60

więcej niż 60

Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?



Rock

Heavy Metal

Pop

Techno

Muzyka poważna

Inna (podaj jaka):



Jakiej przeglądarki internetowej używasz?





Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?





Podaj swój komentarz:











A oto co otrzymamy po wpisaniu powyższego tekstu:

Początek formularza

Podaj swoje imię
Podaj swoje nazwisko

Podaj swoją płeć:



Kobieta Mężczyzna

Ile masz lat?



mniej niż 15
15-19
20-29
30-39
40-60
więcej niż 60

Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?



Rock
Heavy Metal
Pop
Techno
Muzyka poważna
Inna (podaj jaka): 

Jakiej przeglądarki internetowej używasz?



Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?



Podaj swój komentarz:








Dół formularza

(możesz kliknąć przycisk "Wyślij formularz", aby zobaczyć szybki efekt, bez wysyłania danych)



źródło: http://www.kurshtml.edu.pl/


©absta.pl 2016
wyślij wiadomość

    Strona główna