Przykładowe pola formularza [HTML]

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.

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-xhr="#">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-xhr="#" 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-xhr="#">
<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.