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.
See the Pen
form by Aura (@Julka85)
on CodePen.0
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ą.