Cześć! W tym artykule dowiecie się o najważniejszych opcjach formularzy, ponieważ jest tego dość sporo, a artykuł ten jest dedykowany osobom początkującym. Pamiętajcie o możliwości komentowania, jeśli byłyby jakieś pytania – chętnie pomożemy. Postaraj się po przeczytaniu stworzyć własny dokument html i zobaczyć, w jaki sposób działają podane przykłady.

Zacznijmy jak zwykle od małego spisu treści:
1. Form i jego elementy
2. Metody HTTP i atrybut method
3. Atrybut type
4. Inne atrybuty
5. Przykład

Udanej lektury! 😉

 Formularze tworzymy za pomocą dwóch tagów: otwierającego <form> i zamykającego </form>. Między nimi zawieramy całą zawartość naszego formularza. Na stronie możemy mieć kilka formularzy.
Najważniejszym i najpopularniejszym tagiem w naszym <form> jest tag <input>. Nie posiada tagu zamykającego, natomiast ma kilka dedykowanych atrybutów, z których śmiało możemy korzystać.

<select>

tag, który tworzy listę wyboru. Wewnątrz za pomocą tagu <option> dodajemy kolejno elementy listy. Option może posiadać m.i. atrybuty: name oraz value. Pamiętajmy, że pierwszy element listy jest zawsze ustawiony jako domyślny po załadowaniu strony.

<textarea>

<button> – przycisk

HTML5 wprowadził taże tagi:

<datalist> – pozwala stworzyć predefiniowaną listę tzn. pole, w którym dane możemy wybrać z listy lub wpisać z klawiatury. Wciąż tak jak w <select> możemy wybrać tylko jedną opcję.

<keygen>

<output>

<label> – etykieta dla naszych inputów. Pamiętajmy, że input definiuje okienko wpisywania i ewentualnie jego wartość (value). O ile w niektórych typach, możemy ustawić placeholder, o tyle na przykład w typie radio nie da się tego zrobić. Nie zapominajmy o tym!

<fieldset> – grupuje nasze inputy w formularzu

<legend> – etykieta, która działa z elementem <fieldset>. Ten ostatni pozwala nam pogrupować elementy, natomiast, aby je nazwać, nalezy użyć właśnie tagu <legend>.

<optgroup> – pozwala na grupowanie elementów w liście wyboru (<select>).

<option> – dodaje opcję do listy (<datalist>)

Metody HTTP

O ile HTML, CSS i JavaScript nie wymagają zewnętrznego serwera do komunikacji, o tyle nasze formularze już tak. Chcemy się komunikować, więc musi odbywać się jakiś przesył danych. Za pomocą protokołu HTTP komunikujemy się z zewnętrznym serwerem. Możemy zrobić to kilkoma metodami:
a) GET – metoda ta posiada ograniczenie ilości znaków, z tego względu, że dane pokazywane są razem z adresem naszej strony.
b) POST – metoda nie posiada ograniczenia ilości znaków, a nasze dane z formularza nie są widoczne na pasku adresu.
Taką metodę umieszczamy w odpowiednim atrybucie – method. Całość zawieramy w otwierającym tagu form.
np. <form method=”get”>.
PS. są jeszcze inne metody, ale w tym artykule ograniczymy się do dwóch najpopularniejszych.

Atrybuty type

Umieszczamy wewnątrz naszych inputów. Określają  typ wpisywanych danych. Oto niektóre z nich:

1. 1. Text – ten typ określa jedną linijkę tekstu.
      np. <input type=”text”>
   2. Password – podobnie jak text, tylko wpisywane dane są wyświetlane za pomocą gwiazdek lub kropek. Każdy na pewno spotkał się z tym typem nieraz.
   3. Submit – ważny typ, ponieważ zatwierdzamy nim koniec uzupełniania formularza i zgadzamy się na jego przesłanie. Coś na zasadzie: “Wyślij”.
   4. Reset – z tym atrybutem trzeba postępować ostrożnie i dokładnie przemyśleć jego położenie, zwłaszcza kiedy wypełnienie formularza zabiera nam trochę czasu. Ten typ czyści formularz, w którym się znajduje – usuwa wszystkie wpisywane dane.
   5. Radio – służy do określania kilku opcji, z czego możemy wybrać tylko jedną. Z tego względu sens ma zadeklarowanie co najmniej dwóch takich opcji. Często używane przy wyborze płci. (Chociaż na pewno nie w Holandii, gdzie czasami do wyboru mamy jeden z około 50 typów płci. 🙂 )
   6. Checkbox – określenie opcji wyboru, w tym przypadku można wybrać jedną lub więcej, a także żadną z podanych opcji. Najczęściej przy zatwierdzaniu regulaminów(które wszyscy cierpliwie i dokładnie czytamy xD).

1. Button – określa przycisk.
   Teraz typy wprowadzone w HTML5, przekonajcie się sami jakie ułatwienia wprowadzają!
2. Color – wybór koloru. Zwróćcie uwagę jak potężne w swojej prostocie narzędzie – nigdy wprowadzanie preferencji użytkownika nie było łatwiejsze.
3. Date – wymusza wpisanie daty. Dzięki date nie musimy się martwić o poprawne wpisywanie daty.
4. Datetime-local – wpisanie daty wraz z godziną
5. Email – nie trzeba chyba przedstawiać, potrzeba jedynie świadomości, że taki typ istnieje
6. Month – nazwa miesiąca z rokiem
7. Number – liczba, którą możemy dodakowo określić dzięki atrybutom min i max, które reprezentują zakres liczbowy od i do.
8. Range – definiuje suwak z zakresem wartości. Niestety nie zobaczymy wartości, jeśli nie dodamy odpowiedniego atrybutu. Zapraszam do przykładu praktycznego. 🙂
9. Search – typ pola dla wyszukiwania
10. Tel – umożliwia wprowadzenie numeru telefonu
11. Time – umożliwia wpisanie godzin i minut
12. Url – umożliwia wpisanie adresu url
13. Week – umożliwia wpisanie tygodnia oraz roku

Pamiętajmy, że nazwy atrybutów, tak jak ich wartości podajemy małymi literami czyli np. <input type=”text”>.

Atrybuty

Należy pamiętać, aby w każdym inpucie wpisać atrybut name. Ułatwia to JavaScriptowi referencje do danych elementów formularza. Co więcej, nie każdy typ przyjmuje te same atrybuty – należy zwrócić na to uwagę.
Podział atrybutów:

a) atrybuty przyjmujące wartość np. name, type

b) atrybuty nie przyjmujące wartości np. required, readonly

Przejdźmy do wymienienia odpowiednich atrybutów z uwglednieniem powyższego podziału:
a)

1. Value – atrybut, który ustala wartość naszego pola.
2. Size – służy do ustawienia wielkości okienka wpisywania tak, aby podana ilość znaków mieściła się w naszym inpucie
3. Maxlength – okienko wpisywania jest domyślnej wielkości, ale określamy maksymalną ilość znaków. Nie wyświetla żadnych dodatkowych informacji na temat możliwej ilości znaków, ani w przypadku, gdy maksymalna ilość zostanie osiągnięta. Aby to zrobić, należy użyć innych opcji np. za pomocą JavaScript lub umieszczając w placeholderze odpowiednie informacje.
4. Form – proszę nie mylić z tagiem <form>, chociaż mają wiele wspólnego. Atrybut form pozwala dołączyć input w sytuacji, kiedy jakiś element znajduje się poza tagami <form>, ale wciąż należy do danego formularza. Wtedy jako wartość inputu, który znajduje się poza tagami, należy przyjąć ID formularza. Zapraszam do przykładu, aby rozwiać wątpliwości. 🙂
5. Formaction – nadpisuje atrybut action np. w celu potwierdzenia jako administrator. Ten atrybut deklarujemy w inpucie wraz z type=”submit”.
6. Formenctype – atrybut odnosi się do kodowania danych formularza z naszych inputów, kiedy ten zostanie potwierdzony (submit). Ważne, że używa się go tylko do metody POST.
7. Formmethod – atrybut ten zmiania metodę przesyłania za pomocą protokołu HTTP ( z POST na GET lub odwrotnie).
8. Formtarget – atrybut nadpisuje element <form> i wskazuje, gdzie pojawi się odpowiedź serwera np. formtarget=”_blank” powoduje pokazanie odpowiedzi serwera w nowej karcie przeglądarki
9. Width/Height – to atrybuty, które używamy w inputach typu image. Należy o nich pamiętać, ponieważ ich brak może powodować problemy z wyświetlaniem obrazka.
10. List – atrybut, który wskazuje referencję na element <datalist>, który zawiera pre-definiowane opcje dla naszego inputa
11. Min/Max – atrybuty określające zakres wartości (minimalnej i maksymalnej). Ten atrybut odnosi sie do takich typów jak: date, datetime-local, month, time, week, range lub number.
12. Pattern – atrybut, który określa wzór wprowadzania danych. Powoduje to, że atrybut value (wartość) jest porównywany do zadeklarowanego wzoru. Działa z takimi typami: password, email, url, search, tel lub text. Pamiętajmy, aby poinformować o wzorze użytkownika, ponieważ pattern nie zrobi tego za nas.
13. Placeholder – atrybut, który pozwala nam umieścić tekst wewnątrz pola jako wskazówkę.
14. Step – atrybut, który określa wartość w jednym kroku np. w <input type="range" step="10">  powoduje, że każdy krok to 10.
15. Name – nie zapominajcie o tym atrybucie. Dzięki niemu możemy operować na formularzu w JavaScript.

b)

1. Readonly – atrybut ten nie pozwala zmieniać ustawionej wartości, input jest normalnie widoczny
2. Disabled – atrybut ten powoduje wyłączenie jakiegoś inputa (pole wciąż jest widoczne, ale staje się nieco przezroczysty).
3. Autofocus – atrybut ustawia kursor w polu po załadowaniu się strony
4. Formnovalidate – to atrybut tagu <form> i wymusza brak walidacji danego formularza
5. Multiple – atrybut, który pozwala wprowadzić większą ilość danych np. pliki.
6. Required – atrybut, który wymusza wypełnienie danego pola np. odnośnie hasła.

Na końcu chciałbym przypomnieć, że wszystkie powyższe atrybuty wprowadzone w HTML5 odnoszą się do <input> z wyjątkiem autocomplete i novalidate, które odnoszą się do elementu <form>.

Tutaj podaję bardziej obszerny przykład. Śmiało możecie korzystać z tego pliku.

Otwórz plik html z przykładem formularza

Jeśli chcesz zapisać – kliknij prawym myszki i zapisz jako plik html.
Stwórzcie coś sami np.

1. Załóżmy, że macie swoją firmę tworzenia stron i chcecie kogoś zatrudnić. Zróbcie formularz, który będzie wypełniał wasz przyszły pracownik.
2. Stworzyliście forum i chcecie stworzyć formularz rejestracji użytkowników.

Dajcie znać w komentarzu lub polećcie go znajomym, jeśli artykuł wam się przydał. Bon Appetit! 😉

Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie
Profil: “Informatyka i Ekonometria”
Specjalizacja: “Programowanie urządzeń mobilnych i aplikacji sieciowych”
Siatkówka (GeoVolley Team) na pozycji środkowego
Hobby:
Oprócz programowania i wszystkiego co z tym związane…
Filmy – od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) – w liceum dzięki profilowi z modułem filmowym mogłem wejść głębiej w szczegóły kadrów, ujęć itd.
Psychologia – niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę 🙁