środa,
E14 - Formularze HTML
Formularze na stronach internetowych pozwalają użytkownikowi wprowadzać dane. Ma to szerokie zastosowanie, np. można komentować posty, wpisywać adres do wysyłki, logować się na jakąś stronę.
Znacznikiem definiującym formularz jest <form>. Wewnątrz <form> mogą znajdować się inne elementy. Jeden z nich, znacznik <input> może przyjmować różne typy (atrybut type). Domyślny typ o nazwie text służy do wprowadzania wiersza tekstu. Typ submit służy do wysyłania formularza. Element input> może posiadać kilka atrybutów, najważniejsze z nich to type i name. Atrybut name pozwoli dla serwera odebrać i właściwie zinterpretować przesyłaną wartość. Jego wartości powinny być unikalne dla wszystkich pól. Atrybut value to początkowa wartość elementu.
Pierwszy przykład wygląda jak formularz, jednak posiada pewne ewidentne braki. Po jego wysłaniu w pasku adresu pojawią się dodatkowe znaki. W dalszej części dowiesz się dlaczego.
Kod formularza
<form>
<input type="text" name="q" value="test">
<input type="submit" name="s" value="Szukaj w Google">
</form>
Dwa podstawowe atrybuty znacznika <form> to action i method. Atrybut action określa lokalizację, do której zostanie wysłany formularz, w przypadku jego braku będzie to aktualny adres. Atrybut method definiuje metodę HTTP, która zostanie zastosowana podczas wysyłania. Po pierwsze wybór metody zależy od tego, czego oczekuje serwer. Autor aplikacji może wybrać ją samodzielnie. Metoda POST powinna być wykorzystana przy żądaniach, które wprowadzają trwałe zmiany po stronie serwera, np. przy zakładaniu konta użytkownika wysłane dane zostaną zapisane w bazie danych. Należy z niej korzystać także wtedy, kiedy przesłane dane nie powinny być widoczne w pasku adresu. Druga metoda, GET, jest stosowana przez przeglądarkę domyślnie tak jak w pierwszym przykładzie. Jest właściwa dla akcji, które nie przynoszą trwałych zmian, np. w formularzu wyszukiwania. Posiada ona ograniczenie związane z maksymalną możliwą długością adresu URL, może zależeć od przeglądarki, oprogramowania i konfiguracji itp. Można założyć, że możliwe jest wysłanie około 150 znaków (trzeba do nich dodać jeszcze adres zasobu).
Drugi przykład podobny jest do poprzedniego, jednak wykorzystuje metodę POST. Wysłane za jego pośrednictwem dane nie znajdą się w pasku adresu. Atrybut method zawsze lepiej określać jawnie, nikt stuprocentowo nie przewidzi jaka wartość domyślna zostanie przyjęta przez twórców kolejnych przeglądarek.
Kod formularza
<form id="f2" action="" method="post">
<input type="text" name="test">
<input type="submit" name="z" value="Szukaj w Google">
</form>
Trzeci przykład jest w pełni działającym „interfejsem” do popularnej wyszukiwarki. Dane trafiają pod właściwy adres, ponieważ prawidłowo określono atrybut action. Szukana fraza musi być zapisana w zmiennej o nazwie „q”.
Kod formularza
<form action="https://www.google.pl/search" method="get">
<input type="text" name="q">
<input type="submit" name="s" value="Szukaj w Google">
</form>
Atrybut placeholder pozwoli umieścić podpowiedź dla użytkownika.
Kod formularza
<form action="https://www.google.pl/search" method="get">
<input type="text" name="q" placeholder="Wprowadź frazę">
<input type="submit" name="s" value="Szukaj w Google">
</form>
Ostatni przykład zawiera dodatkowy element, jakim jest znacznik <label>. Jeśli ktoś go kliknie, kursor znajdzie się we właściwym polu. Stanie się tak, dlatego, że zastosowano atrybut for, który wskazuje na element posiadający identyfikator o takiej samej wartości (for="q" oraz id="q").
Kod formularza
<form action="https://www.google.pl/search" method="get">
<label for="q">Szukaj w wyszukiwarce Google:</label>
<input type="text" id="q" name="q" placeholder="Wprowadź frazę">
<input type="submit" name="s" value="Szukaj w Google">
</form>
Więcej o formularzach HTML dowiesz się w kolejnych materiałach.
