Jeszcze kilka lat temu by dany formularz posiadał jakąś funkcjonalność musieliśmy często dodać ją np. poprzez walidację w JS.
Dziś jednak wygląda to trochę inaczej. W HTML5 posiadamy bowiem dużo większy wybór typów pól. Umożliwia nam to budowanie na stronie, sklepie czy blogu naprawdę ciekawych formularzy kontaktowych, zamówień, generatorów, testów ale nie tylko.
Co znajdziesz w tym wpisie
Z jakich elementów składa się formularz?
Formularz zwykle składa się z wielu różnych elementów (w zależności od naszych potrzeb) przeważnie jednak zawsze pojawia się<form></form> jest to element nadrzędny dla większości formularzy. To właśnie pomiędzy otwarciem a zamknięciem tego obiektu umieszczamy pola formularza.
<form action="">Pola formularza</form>W zależności od tego co dany formularz będzie robił będziemy do <form> dodawać różne właściwości. Przykładowo będą to: action, method, enctype.
UWAGA: Wygląd przycisków na stronie jest uzależniony od kodu CSS twojej witryny. Dlatego mogą one inaczej wyglądać na twojej stronie.
Metody wysyłania formularza
Do wysyłki formularza stosuje się 2 metody GET i POST. To na, która metodę się zdecydujemy jest bardzo istotne w przypadku odbierania zawartości formularza.
<form action="" method="Post">
Zawartość formularza
</form>HTML sam w sobie nie potrafi wysłać formularza ani też przekazać zawartości wprowadzonych pól dlatego aby w pełni kożystać z formularzy będziemy potrzebowali co najmniej jeszcze jednego języka. Najczęściej jest to PHP i/lub JS.
Identyfikatorem konkretnego pola w tym przypadku jest NAME – czyli jego „imię”. Dlatego musi ono być w formularzu unikalne by jego zawartość nie została nadpisana przez inny obiekt. W zależności od tego na jaką metodę się zdecydowaliśmy w PHP „odbiór” uzyskanie wartości będzie wyglądał analogicznie:
$_POST['nazwa_pola'] lub $_GET['nazwa_pola']Rodzaje pól formularza
Formularze posiadają wiele różnych rodzajów pól takich jak:
- tekstowe
- wyboru (pojedynczego lub mnogiego)
- obszar tekstowy (przeznaczony na dłuższy tekst)
- lista wyboru (istnieje ich kilka rodzajów)
- hasło
- wysyłanie plików na stronę
- czyszczenie zawartości (reset)
- szukanie
- przyciski
- etykiety
Etykiety pól formularza
Jak sama nazwa mówi są to pola opisujące konkretne pole formularza. Zazwyczaj w nich więc umieszczamy informację o tym co osoba wypełniająca pole powinna w nim umieścić. Przy prostych formularzach może to wyglądać następująco:
<label>Imię</label>Pola tekstowe
Pola tekstowe przewidziane są na krótkie treści takie jak: imię, nazwisko czy adres zamieszkania. Dłuższe teksty umieszczamy w polach tekstowych.
<input type="text" name="imie"/>Po dodaniu etykiety oraz umieszczeniu w formularzu może to wyglądać tak:
<form action="">
<label>Imię</label> <input type="text" name="imie"/>
</form>Wielkością pola można manipulować korzystając z CSS lub np. dodając size (określa szerokość pola):
<input type="text" name="imie" size="40" maxlength="20" />Z kolei atrybut maxlength ma za zadanie określenie maksymalnej liczby znaków dozwolonej w elemencie <input>. Oznacza to, że możemy wprowadzić jedynie tyle znaków na ile on nam pozwala w tym wypadku 20.
Pola wyboru
W praktyce posiadamy dwa typy pól wyboru a mianowicie pola pojedynczego wyboru lub mnogiego.
Do pojedynczego wyboru zwykle używa się pól typu:
<input type="radio" name="radio" value="wartość">Jak widać jednocześnie można mieć zaznaczoną tylko jedną opcje. Kliknięcie z kolejną automatycznie odznacza poprzednią.
Do wielkokrotnego wyboru służy:
<input type="checkbox" name="checkbox" value="wartość"> W tym przypadku można mieć jednocześnie zaznaczone 2 lub więcej opcji.
Obszar tekstowy
Obszar tekstowy jak sama nazwa mówi jest polem, w którym możemy umieścić większą ilość tekstu. Pole tego typu dodajemy z pomocą:
<textarea name="text"></textarea>W HTML wielkością tego pola można manipulować z pomocą:
- rows – odpowiada za ilość linii tekstu (w praktyce za wysokość)
- cols – odpowiada za szerokość pola
Pola wyboru
W praktyce chodzi o rozwijane listy wyboru <select>
<select name="wybierz" id="wybierz">
<option value="opcja1">opcja 1</option>
<option value="opcja2">opcja 2</option>
<option value="opcja3">opcja 3</option>
<option value="opcja4">opcja 4</option>
</select>Jak widać mamy tu listę rozwijaną posiadającą kilka różnych opcji widocznych dopiero po kliknięciu w nią. Teraz podzielimy tę listę tak jak by na części. Pomoże nam w tym <optgroup>. Z jego pomocą na liście pojawią się sekcje. Opcja ta jest dość użyteczna kiedy mamy długie listy np. województwo jako sekcja a miasto jako opcją.
<select name="wybierz" id="wybierz">
<optgroup label="Opcje wyboru">
<option value="opcja1">opcja 1</option>
<option value="opcja2">opcja 2</option>
<option value="opcja3">opcja 3</option>
</optgroup>
<optgroup label="Opcje wyboru kolejne">
<option value="opcja4">opcja 4</option>
<option value="opcja5">opcja 5</option>
</optgroup>
</select>Wielokrotny wybór
<select name="wybierz" multiple="multiple">
<option value="opcja1">opcja 1</option>
<option value="opcja2">opcja 2</option>
<option value="opcja3">opcja 3</option>
<option value="opcja4">opcja 4</option>
</select>Pola Hasło
Kolejnym typem pól jest hasło, dodaje się je w następujący sposób:
<input type="password">Przyciski
Przykładowe przyciski:
<button></button>
<button>Text</button>Przyciski na stronie mogą występować w różnych typach np.:
- submit – to przycisk wysłania formularza
- reset – przycisk do czyszczenia zawartości formularza
- button – zwykły przycisk, ustawienie domyślne nie trzeba go dodawać
<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">button</button>Inne ciekawe pola
Poniżej znajdziecie kilka ciekawych typów pól jakich można użyć do budowy różnego typu formularzy.
Email - <input type="email">
Plik - <input type="file">
Ukryte pole - <input type="hidden">
Miesiąc - <input type="month">
Tydzień - <input type="week">
Numer - <input type="number">
Suwak - <input type="range">
Reset - <input type="reset">
Szukanie - <input type="search">
Wysłanie - <input type="submit">
Telefon - <input type="tel">
Czas - <input type="time">
URL - <input type="url">
Jak widać mamy całkiem spory wybór. Jedyne, ale w tym jakie pole należy wybrać by osiągnąć pożądany efekt.
Atrybuty stosowane dla input
| atrybut | wartość | działanie |
|---|---|---|
| checked | checked | atrybut używany dla type=”checkbox” or type=”radio” jego zadaniem jest zaznaczenie obiektu który go posiada |
| disabled | disabled | atrybut blokuje możliwość zaznaczenia lub wypełnienia pola |
| value | „treść” | dla tego pola dodajemy wartość pola |
| accept | file_extension audio/* video/* image/* media_type | atrybut dla type=”file”, określa on typ akceptowanych plików |
| required | required | pole jest obowiązkowe |
| placeholder | „treść” | domyślny, przykładowy tekst w polu |
Zmiana wyglądu
Jak wszystkie elementy HTML tak i pola formularza podatne są na działania z pomocą CSS oraz JS. Oczywiście aby móc poprawnie manipulować elementami formularza dobrze jest by posiadały one odpowiednie klasy i id.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.