Formularze są definiowane za pomocą elementu form. Wszystkie elementy znajdujące się wewnątrz elementu form należą do danego formularza.
<form> … </form>
W otwierającym znaczniku <form> oczekiwany jest atrybut action. Za jego pomocą określa się, co ma się stać z danymi formularza. Zwykle jest to aplikacja PHP.
<form method="post" action="form.php"> … </form>
Upewnij się, że podany plik faktycznie można znaleźć. Musisz więc podać właściwą ścieżkę.
Zamiast skryptu można także podać adres e-mail.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
W tym przypadku dane formularza są wysyłane e-mailem. Jest to jednak mało eleganckie, dlatego praktycznie zawsze korzysta się z wersji ze skryptem. Jeśli nie masz skryptu pod ręką, możesz jednak w ostateczności wysłać formularz również e-mailem.
Kolejnym ważnym atrybutem dla elementu form jest method. Za pomocą tego atrybutu określa się metodę transmisji HTTP dla wysyłania zawartości formularza. Dostępne są dwie różne warianty.
• post = Dane formularza są przesyłane tutaj do wskazanego adresu w dwóch krokach. Najpierw przeglądarka nawiązuje połączenie z podanym adresem. Jeśli to się powiedzie, dane formularza są przekazywane do skryptu.
• get = W tej metodzie dane formularza są dołączane na koniec adresu URL przypisanego atrybutowi action. Dane formularza są więc m.in. widoczne w pasku adresu przeglądarki.
Należy się zastanowić, która z tych dwóch wersji należy wybrać do przesyłania danych formularza. Zasadniczo można użyć obydwu. Jednak zwłaszcza przy dużych ilościach danych i przesyłaniu plików na serwer zalecane jest użycie post.
Proste pola formularza
Dotychczas zdefiniowano jedynie zewnętrzną strukturę formularza. Jednak w przeglądarce nie widać jeszcze samego formularza.
<form method="post" action="form.php"> … </form>
Teraz należy wypełnić formularz treścią/życiem.
Najczęściej potrzebnym typem pola jest jednoliniowe pole tekstowe. Stosuje się je na przykład do zbierania nazwiska, imienia i adresu e-mail. Jednoliniowe pola tekstowe definiuje się w następujący sposób:
<input type="text" name="imie" />
Atrybutowi input przypisaną jest kombinację atrybutu-wartości type="text". Ponadto należy każdemu polu tekstowemu nadać wewnętrzną etykietę. Ta etykieta musi być unikalna w dokumencie. Jest szczególnie ważna w przypadku przetwarzania danych formularza za pomocą skryptu. Nie używaj w etykiecie spacji i znaków specjalnych.
Gdy spojrzysz na wynik w przeglądarce, uzyskasz następujący efekt:
To na razie nie wygląda imponująco. Jednak po kliknięciu w pole tekstowe zauważysz, że już możesz wprowadzać dane.
Aby odwiedzający wiedzieli, co powinni wpisać w pole, brakuje oczywiście jeszcze etykiety.
Imię: <input type="text" name="imie" />
Także tutaj spojrzenie w przeglądarkę dostarczy pożądany efekt.
Za pomocą atrybutu size możesz określić szerokość pola.
Imię: <input type="text" name="imie" size="30" /> <br /> Kod pocztowy: <input type="text" name="kod_pocztowy" size="5" />
Atrybutowi size przypisuje się pożądaną szerokość pola.
Liczba 5 odpowiada pięciu znakom. W tym kontekście ważny jest także atrybut maxlength. Za jego pomocą określa się maksymalną dopuszczalną liczbę znaków, które mogą być wprowadzone do pola. Oto kolejny przykład:
Imię: <input type="text" name="imie" size="30" maxlength="40" />
Jeśli wartość podana w atrybucie maxlength jest większa niż wartość podana w atrybucie size, to dla dłuższych wpisów automatycznie zostanie dodany pasek przewijania.
Imię: <input type="text" name="vorname" value="Twoje imię" />
Wartość przypisana do value jest widziana jako wartość wstępna pola.
Użytkownicy mogą usunąć tę wartość wstępną.
Możecie również zapobiec usuwaniu wartości z pól. Definiuje się wtedy pole wprowadzania, które w istocie nie jest już polem wprowadzania. Takie pola są często wykorzystywane do wyjść. Może być to interesujące na przykład do wyświetlania wartości obliczonych za pomocą skryptu. Możesz również ręcznie wstawić tekst do pola, który odwiedzający nie mogą już zmieniać. (Uwaga: Znak euro niestety nie jest prawidłowo wyświetlany w widoku PDF).
<input name="preis" type="text" value="€ 699.-" readonly />
Aby ustawić pole jako tylko do odczytu, nadajemy mu atrybut readonly. Ponownie spojrzenie na wynik:
Wstępnie zdefiniowany tekst jest widoczny. Nie jest jednak możliwe jego usunięcie.
Definiowanie pól hasła
Znacie oczywiście pola hasła. Wszędzie tam, gdzie rejestrujecie się, musisz podać hasło. (Zazwyczaj trzeba je wpisać nawet dwa razy).
Dane wprowadzone do pola wprowadzania nie są widoczne, ale są automatycznie zastępowane przez przeglądarkę gwiazdkami/kropkami. Zaletą tego sposobu jest to, że osoby, które mogą przyglądać się Wam podczas wprowadzania hasła, nie mogą je odszyfrować. Jednakowoż błąd polega na tym, że pola haseł nie są automatycznie bezpieczne. Faktycznie hasła są przesyłane w postaci zwykłego tekstu przy użyciu normalnego protokołu HTTP podczas wysyłania formularza.
Pola haseł definiuje się w następujący sposób:
<input type="password" name="passwort" />
Atrybutowi type przypisuje się wartość password. Ponownie spojrzenie na wynik.
Jeśli coś wpiszesz, przeglądarki natychmiast zamazują to podczas wpisywania.
