26. Formularze HTML

> Dodaj do ulubionych

Formularze HTML stanowi─ů g┼é├│wny spos├│b komunikacji u┼╝ytkownika z witryn─ů internetow─ů. Za ich pomoc─ů mo┼╝na na przyk┼éad pobiera─ç informacje od u┼╝ytkownik├│w w celu wykorzystania ich do r├│┼╝nych cel├│w, np. zapisania w bazie danych, wygenerowania raportu, czy przedstawienia wynik├│w wyszukiwania okre┼Ťlonego has┼éa itd.

Formularz mo┼╝na znale┼║─ç prawie w ka┼╝dym serwisie internetowym. Jest nim pole wyszukiwania pozwalaj─ůce przeszukiwa─ç zawarto┼Ť─ç witryny, s─ů nim pola w sklepie internetowym, w kt├│rych podajemy dane rozliczeniowe albo adres dostawy towaru, jak r├│wnie┼╝ jest nim zestaw p├│l znajduj─ůcych si─Ö na stronie Kontakt, kt├│r─ů mo┼╝na znale┼║─ç w wielu portalach internetowych.

Formularze HTML mog─ů zawiera─ç r├│┼╝nego rodzaju elementy, czasami zwane kontrolkami formularza (ang. form controls), za pomoc─ů kt├│rych u┼╝ytkownik mo┼╝e wpisa─ç tekst, odpowiedzie─ç na pytania, zaznaczy─ç lub wybra─ç r├│┼╝ne opcje, wprowadzi─ç dat─Ö, wybra─ç interesuj─ůcy go kolor albo przes┼éa─ç sw├│j plik.

Element├│w formularzy jest ca┼ékiem sporo, dzi─Öki czemu mamy szerokie mo┼╝liwo┼Ťci w zakresie interakcji z u┼╝ytkownikiem naszej strony. Ponadto w HTML5 wprowadzono metody walidacji (sprawdzania poprawno┼Ťci) danych formularza, co uwalnia nas od uci─ů┼╝liwego pisania skrypt├│w sprawdzaj─ůcych dane po stronie klienta (nadal jednak s─ů potrzebne po stronie serwera).

Schemat przykładowego formularza

W naszej witrynie o ciekawych ludziach mamy stron─Ö Kontakt, na kt├│rej chcieliby┼Ťmy umie┼Ťci─ç formularz kontaktowy, aby umo┼╝liwi─ç u┼╝ytkownikom wysy┼éanie nam wiadomo┼Ťci. Poni┼╝ej znajduje si─Ö schemat formularza, jaki m├│g┼éby si─Ö znale┼║─ç na naszej stronie, cho─ç raczej nie powinien on by─ç a┼╝ tak rozbudowany. My sobie jednak pozwolili┼Ťmy na drobn─ů przesad─Ö, aby zaprezentowa─ç wszystkie najwa┼╝niejsze elementy formularzy.

Projekt formularza

Poni┼╝ej znajduje si─Ö kod HTML tego formularza:

<form action="skrypt.php" method="get">
  <fieldset>
    <legend>Dane osobowe</legend>
    <label>Imi─Ö: <input name="imie" placeholder="Wpisz swoje imi─Ö" required></label>
    <label>E-mail: <input type="email" name="email" placeholder="Wpisz sw├│j e-mail" required></label>
    <label>Nr telefonu: <input type="tel" name="tel" placeholder="Wpisz sw├│j nr telefonu"></label>
  </fieldset>
  <fieldset>
    <legend>Opcje</legend>    
    <label for="temat">Temat:</label>
    <select name="temat" id="temat">
      <optgroup label="Tre┼Ť─ç artyku┼é├│w"></optgroup>
        <option value="erdos">Paul Erd┼Ĺs</option>
        <option value="feynman">Richard Feynman</option>
        <option value="why">why the lucky stiff</option>
      </optgroup>
      <optgroup label="Inne tematy"></optgroup>
        <option value="korekta">Korekta tekstu</option>
        <option value="publikacja">Publikacja artykułu</option>
      </optgroup>
    </select>
    <p>Czy chcesz, aby┼Ťmy si─Ö z Tob─ů skontaktowali?</p>
    <label>Tak: <input type="radio" value="tak" name="kontakt-tn"></label>
    <label>Nie: <input type="radio" value="nie" name="kontakt-tn"></label>
    <p>Wybierz dozwolone formy kontaktu z Tob─ů</p>
    <label>Tam-tam: <input type="checkbox" name="tam-tam" value="tak"></label>
    <label>Telefon: <input type="checkbox" name="telefon" value="tak"></label>
    <label>E-mail: <input type="checkbox" name="e-mail" value="tak"></label>
  </fieldset>
  <fieldset>
    <legend>Wiadomo┼Ť─ç</legend>
    <textarea name="wiadomosc" cols="80" rows="10" maxlength="3000" minlength="50" required></textarea>
    <input type="submit" value="Wy┼Ťlij">
    <input type="reset">
  </fieldset>
</form>

Przeanalizujemy elementy tego kodu po kolei. Zaczniemy od kontenera głównego, czyli od elementu form.

Element form

Ka┼╝dy formularz internetowy obejmuje element form, kt├│ry jest og├│lnym kontenerem zawieraj─ůcym wszystkie jego elementy. W naszym przyk┼éadzie jego znacznik otwieraj─ůcy ma nast─Öpuj─ůc─ů posta─ç:

<form action="skrypt.php" method="get">

Ten znacznik ma zdefiniowane dwa wa┼╝ne atrybuty: action i method.

Atrybut action zawiera adres skryptu, do kt├│rego maj─ů zosta─ç wys┼éane informacje wprowadzone w formularzu przez u┼╝ytkownika. Ten skrypt dzia┼éa po stronie serwera i mo┼╝e by─ç napisany w r├│┼╝nych j─Özykach programowania, takich jak PHP albo Python. W naszym przyk┼éadzie dane zosta┼éyby wys┼éane do znajduj─ůcego si─Ö na serwerze skryptu w j─Özyku PHP o nazwie skrypt.php.

Atrybut method okre┼Ťla metod─Ö wysy┼éania danych do skryptu znajduj─ůcego si─Ö na serwerze za po┼Ťrednictwem protoko┼éu HTTP.

Protokół HTTP

HTTP (ang. Hypertext Transfer Protocol) to internetowy protok├│┼é przesy┼éania danych mi─Ödzy przegl─ůdark─ů internetow─ů a serwerem. M├│wi─ůc w najwi─Ökszym skr├│cie, kiedy u┼╝ytkownik wype┼énia i zatwierdza formularz, przegl─ůdarka pobiera z niego dane i przy ich u┼╝yciu tworzy tzw. ┼╝─ůdanie HTTP (ang. HTTP request), kt├│re wysy┼éa do serwera, do┼é─ůczaj─ůc do niego dodatkowe informacje w postaci tzw. nag┼é├│wk├│w HTTP (ang. HTTP header). Mo┼╝e to zrobi─ç r├│┼╝nymi metodami zdefiniowanymi w specyfikacji protoko┼éu HTTP.

Kiedy skrypt znajduj─ůcy si─Ö na serwerze otrzymuje ┼╝─ůdanie HTTP, przetwarza je w okre┼Ťlony spos├│b, po czym serwer zwraca do przegl─ůdarki odpowied┼║ HTTP (ang. HTTP response), kt├│ra zawiera wynik przetwarzania danych, a tak┼╝e dodatkowe nag┼é├│wki i kod stanu odpowiedzi (np. 200 OK oznacza, ┼╝e operacja zosta┼éa wykonana poprawnie, a 404 Not Found ÔÇô ┼╝e nie znaleziono ┼╝─ůdanej strony).

Od wybranej metody HTTP zale┼╝y spos├│b budowy ┼╝─ůdania HTTP przez przegl─ůdark─Ö oraz spos├│b jego obs┼éugi przez serwer. Dwie najcz─Ö┼Ťciej u┼╝ywane metody HTTP to GET i POST.

Metoda HTTP GET

Domy┼Ťln─ů metod─ů tworzenia ┼╝─ůda┼ä HTTP przez przegl─ůdark─Ö internetow─ů jest GET, wi─Öc tak naprawd─Ö w naszym formularzu nie musieli┼Ťmy dodawa─ç atrybutu method="get" ÔÇô mogli┼Ťmy go w og├│le nie definiowa─ç i skutek by┼éby taki sam. W przypadku tej metody przegl─ůdarka wysy┼éa do serwera ┼╝─ůdanie okre┼Ťlonego adresu URL, dodaj─ůc na jego ko┼äcu dane wprowadzone w formularzu przez u┼╝ytkownika w specjalnym formacie.

Gdyby┼Ťmy na przyk┼éad w naszym przyk┼éadowym formularzu w polu Imi─Ö wpisali Jan, a w polu E-mail ÔÇô jan@example.com i go zatwierdzili, to w pasku adresu przegl─ůdarki pojawi┼éby si─Ö taki adres (pokazany jest tylko interesuj─ůcy nas fragment):

ÔÇŽskrypt.php?Jan=imie&email=jan%40example.com&ÔÇŽ

Adres generowany przez przegl─ůdark─Ö podczas przesy┼éania danych metod─ů GET ma ┼Ťci┼Ťle okre┼Ťlon─ů struktur─Ö.

Pocz─ůtek ┼éa┼äcucha parametr├│w wyznacza znak zapytania. Po nim znajduje si─Ö ci─ůg par sk┼éadaj─ůcych si─Ö z nazw kolejnych element├│w formularza (okre┼Ťlonych w atrybucie name w kodzie HTML) i ich warto┼Ťci po┼é─ůczonych znakiem =.

Poszczeg├│lne pary s─ů z kolei rozdzielone znakiem &. Wszystko, co znajduje si─Ö za znakiem ? nazywa si─Ö ┼éa┼äcuchem zapytania (ang. query string).

W adresach URL nie mog─ů wyst─Öpowa─ç niekt├│re znaki maj─ůce specjalne znaczenie, takie jak @ czy spacja, dlatego w naszym przyk┼éadzie adres e-mail zawiera ci─ůg znak├│w %40 (spacja zosta┼éaby zast─ůpiona ci─ůgiem %20). Jest to tzw. kodowanie procentowe (ang. percent coding), kt├│re sk┼éada si─Ö ze znaku % i dw├│ch cyfr heksadecymalnych oznaczaj─ůcych warto┼Ť─ç danego znaku w zestawie znak├│w UTF-8.

Jako ┼╝e dane przesy┼éane metod─ů GET s─ů umieszczane w adresie URL, istniej─ů ograniczenia dotycz─ůce ich d┼éugo┼Ťci. Jest to zrozumia┼ée ÔÇô pos┼éugiwanie si─Ö adresami zawieraj─ůcymi np. 10 000 znak├│w by┼éoby wysoce niepraktyczne. Limit znak├│w w adresie URL wynosi 2048 znak├│w.

Ponadto metod─ů t─ů nie powinno si─Ö przesy┼éa─ç jakichkolwiek danych wra┼╝liwych, poniewa┼╝ zosta┼éyby one ujawnione w postaci zwyk┼éego tekstu w pasku adresu przegl─ůdarki.

Z drugiej strony metoda GET ma t─Ö zalet─Ö, ┼╝e utworzony przy jej u┼╝yciu adres URL jest normalnie uwzgl─Ödniany w historii przegl─ůdarki oraz mo┼╝na go doda─ç do zak┼éadek.

Kolejn─ů wa┼╝n─ů cech─ů omawianej metody jest to, ┼╝e za jej pomoc─ů mo┼╝na tylko ┼╝─ůda─ç danych, ale nie mo┼╝na ich modyfikowa─ç na serwerze. Do tego s┼éu┼╝y metoda HTTP POST.

Nasz formularz zawiera kilka p├│l, w┼Ťr├│d kt├│rych znajduje si─Ö tak┼╝e obszar tekstowy do wpisania d┼éu┼╝szej wiadomo┼Ťci, wi─Öc w tym przypadku lepszym wyborem by┼éoby u┼╝ycie metody POST.

Metoda HTTP POST

W przypadku metody HTTP POST (method="post") przegl─ůdarka tworzy ┼╝─ůdanie HTTP zawieraj─ůce dane z formularza umieszczone nie w adresie URL, tylko w tre┼Ťci w┼éa┼Ťciwej tego ┼╝─ůdania. Dodatkowo umieszcza w nim r├│┼╝ne nag┼é├│wki HTTP, okre┼Ťlaj─ůce na przyk┼éad nazw─Ö i wersj─Ö systemu operacyjnego i przegl─ůdarki, typ przesy┼éanej tre┼Ťci itd. Adres URL w pasku adresu przegl─ůdarki pozostaje niezmieniony.

Serwer przekazuje skryptowi dane do przetworzenia, po czym zwraca do przegl─ůdarki odpowied┼║ HTTP zawieraj─ůc─ů wynik dzia┼éania skryptu i zestaw nag┼é├│wk├│w HTTP okre┼Ťlaj─ůcych na przyk┼éad typ i wersj─Ö serwera, dat─Ö ostatniej modyfikacji, dat─Ö dost─Öpu i inne informacje.

Nag┼é├│wki i dane przesy┼éane za po┼Ťrednictwem formularza mo┼╝na ┼éatwo podejrze─ç za pomoc─ů narz─Ödzi dla programist├│w przegl─ůdarki.

Na przyk┼éad w przegl─ůdarce Chrome mo┼╝na to zrobi─ç nast─Öpuj─ůco:

  1. Otw├│rz dowoln─ů stron─Ö internetow─ů w przegl─ůdarce.
  2. Naci┼Ťnij klawisz F12.
  3. Otw├│rz kart─Ö Sie─ç.
  4. Kliknij pozycj─Ö Wszystkie.
  5. W okienku po lewej stronie kliknij dowolny plik.
  6. Po prawej stronie pojawi si─Ö okienko z kilkoma kartami. Pierwsza z nich to Nag┼é├│wki, na kt├│rej mo┼╝esz sprawdzi─ç zar├│wno nag┼é├│wki ┼╝─ůdania, jak i odpowiedzi. Druga karta to ┼üadunek, na kt├│rej znajduje si─Ö wykaz danych przesy┼éanych do serwera. Tych kart jest wi─Öcej, ale teraz nas nie interesuj─ů.

Poni┼╝szy zrzut ekranu przedstawia informacje pokazywane przez przegl─ůdark─Ö Chrome po zatwierdzeniu naszego formularza na dysku lokalnym. Nazwa pliku skrypt.php w okienku po lewej stronie ma czerwony kolor, poniewa┼╝ ten plik nie zosta┼é znaleziony. W zwi─ůzku z tym, cho─ç przegl─ůdarka przygotowa┼éa dane z formularza, nie zosta┼éy one przetworzone.

┼╗─ůdania sieciowe w Google Chrome

Metoda POST r├│┼╝ni si─Ö od metody GET g┼é├│wnie sposobem przesy┼éania danych. Jest bardziej odpowiednia do przesy┼éania wi─Ökszych porcji informacji, nawet plik├│w, oraz danych wra┼╝liwych, poniewa┼╝ s─ů one umieszczane w tre┼Ťci ┼╝─ůdania HTTP, gdzie mo┼╝na je zamieni─ç na posta─ç zaszyfrowan─ů.

Bez wzgl─Ödu na wybran─ů metod─Ö przes┼éania danych z formularza, trafiaj─ů one do serwera, gdzie powinny zosta─ç przej─Öte przez odpowiedni skrypt i przetworzone. Do tego potrzebna jest znajomo┼Ť─ç jednego z ÔÇ×serwerowychÔÇŁ j─Özyk├│w programowania, np. PHP.

W tej chwili jednak interesuje nas budowa formularzy HTML, a nie przetwarzanie danych na serwerze. Om├│wili┼Ťmy element form i jego najwa┼╝niejsze atrybuty. Teraz przyjrzymy si─Ö drugiemu wa┼╝nemu sk┼éadnikowi formularzy ÔÇô elementowi input, kt├│ry jest u┼╝ywany do tworzenia wi─Ökszo┼Ťci p├│l.

Element input

Element input HTML jest chyba najwa┼╝niejszym i najcz─Ö┼Ťciej u┼╝ywanym elementem formularzy HTML. Za jego pomoc─ů tworzymy interaktywne pola tekstowe, przyciski radiowe, pola wyboru, a nawet kontrolki wyboru pliku do wys┼éania na serwer, koloru lub daty.

Cho─ç jego sk┼éadnia jest prosta, jak wszystkich innych element├│w HTML, to ma on wyj─ůtkowo du┼╝o atrybut├│w i ustawie┼ä, co czyni go jednym z najbardziej skomplikowanych element├│w HTML.

Najwa┼╝niejszym atrybutem elementu input jest type, kt├│ry okre┼Ťla rodzaj kontrolki. Wyb├│r typ├│w kontrolek input jest ca┼ékiem poka┼║ny. Na przyk┼éad poni┼╝szy kod tworzy pole do wpisywania has┼éa:

<input type="password">

Jest to zwyk┼ée pole tekstowe, kt├│re zamienia wpisywany tekst na kropki lub inne znaki w zale┼╝no┼Ťci od systemu i przegl─ůdarki. Sp├│jrz na poni┼╝szy zrzut ekranu:

Pole hasła

Natomiast pole typu color powoduje wy┼Ťwietlenie kolorowego pola, kt├│re mo┼╝emy klikn─ů─ç, aby wy┼Ťwietli─ç okienko wyboru koloru.

Okno wyboru koloru

Do najcz─Ö┼Ťciej u┼╝ywanych typ├│w pola input zaliczaj─ů si─Ö: email, tel, radio, checkbox, submit, reset oraz text. Typ text, zwyk┼ée pole tekstowe, jest domy┼Ťlny, tzn. stosowany, gdy pominiemy atrybut type.

Pole typu email s┼éu┼╝y do wpisywania adresu e-mail, pole typu tel s┼éu┼╝y do wpisywania numeru telefonu, a pole typu text s┼éu┼╝y do wpisywania dowolnego tekstu. Je┼Ťli jednak spojrzymy na nie w oknie przegl─ůdarki, to domy┼Ťlnie wygl─ůdaj─ů tak samo. Czy nie by┼éoby wi─Öc pro┼Ťciej zawsze u┼╝ywa─ç jednego typu pola w tych wszystkich przypadkach?

Teoretycznie mo┼╝na to zrobi─ç, ale w├│wczas stracimy bardzo wa┼╝n─ů funkcj─Ö ÔÇô mechanizm sprawdzania poprawno┼Ťci danych (walidacji) wprowadzanych przez u┼╝ytkownika.

Gdyby┼Ťmy w zwyk┼éym polu tekstowym wpisali niepoprawny adres e-mail, to zosta┼éby on przes┼éany do serwera bez jakichkolwiek przeszk├│d.

Je┼Ťli natomiast u┼╝ytkownik wpisze niepoprawny adres e-mail w polu typu email, przegl─ůdarka poinformuje go o b┼é─Ödzie i ÔÇ×ka┼╝eÔÇŁ go poprawi─ç. Sp├│jrz na poni┼╝szy zrzut ekranu z naszego formularza:

Komunikat o niepoprawnym e-mailu

Je┼Ťli u┼╝ytkownik wpisze niepoprawny adres e-mail i kliknie przycisk zatwierdzania formularza, przegl─ůdarka nie wy┼Ťle danych do serwera, tylko ka┼╝e poprawi─ç b┼é─ůd. To samo dotyczy niekt├│rych innych typ├│w pola input.

Teraz przyjrzymy si─Ö po kolei u┼╝ytym w naszym formularzu polom input i ich atrybutom.

Pola typu tekstowego

Na pocz─ůtku naszego formularza znajduj─ů si─Ö nast─Öpuj─ůce pola input, s┼éu┼╝─ůce do wpisywania r├│┼╝nego rodzaju tekstu:

<label>Imi─Ö: <input name="imie" placeholder="Wpisz swoje imi─Ö" required></label>
<label>E-mail: <input type="email" name="email" placeholder="Wpisz sw├│j e-mail" required></label>
<label>Nr telefonu: <input type="tel" name="tel" placeholder="Wpisz sw├│j nr telefonu"></label>

W tym kodzie interesuj─ů nas nast─Öpuj─ůce rzeczy:

Element label reprezentuje podpis kontrolki formularza. Mo┼╝na go stosowa─ç na dwa sposoby. W powy┼╝szym przyk┼éadzie zar├│wno podpis, jak i kontrolka, kt├│rej on dotyczy, znajduj─ů si─Ö w jego wn─Ötrzu, wi─Öc nie by┼éo potrzeby dodawania specjalnego atrybutu, kt├│ry by je powi─ůza┼é.

Ewentualnie mogliby┼Ťmy te┼╝ napisa─ç tak:

<label for="imie">Imi─Ö:</label>
<input name="imie" id="imie" placeholder="Wpisz swoje imi─Ö">

W tym przypadku kontrolka, kt├│rej dotyczy podpis, znajduje si─Ö poza elementem label, wi─Öc konieczne by┼éo nadanie jej identyfikatora i wpisanie go w atrybucie for etykiety, aby powi─ůza─ç ze sob─ů te dwa elementy. Oba sposoby s─ů r├│wnie dobre.

Stosowanie elementu label nie jest obowi─ůzkowe, ale ma wa┼╝n─ů zalet─Ö ÔÇô wi─ů┼╝e kontrolk─Ö z jej podpisem w taki spos├│b, ┼╝e klikni─Öcie tego podpisu wywo┼éuje taki sam efekt, jakby klikni─Öto sam─ů kontrolk─Ö, z kt├│r─ů jest powi─ůzany.

Je┼Ťli na przyk┼éad powi─ů┼╝emy pole tekstowe z podpisem w elemencie label, to klikni─Öcie tego podpisu b─Ödzie powodowa─ç aktywowanie powi─ůzanego z nim pola tekstowego. Mo┼╝esz to sprawdzi─ç w poni┼╝szym okienku.

See the Pen Powi─ůzanie kontrolki z etykiet─ů by ┼üukasz Piwko (@shebangpl) on CodePen.

Element label mo┼╝e by─ç u┼╝ywany nie tylko w po┼é─ůczeniu z elementem input, ale z wszystkimi elementami formularza s┼éu┼╝─ůcymi do odbierania danych od u┼╝ytkownika.

Atrybut placeholder elementu input reprezentuje ja┼Ťniejszy tekst wy┼Ťwietlany w polu tekstowym, kt├│ry znika po klikni─Öciu w nim przez u┼╝ytkownika. Bywa u┼╝ywany mi─Ödzy innymi w sytuacjach, gdy jest ma┼éo miejsca w oknie przegl─ůdarki, zamiast zwyk┼éego podpisu (mo┼╝na go wykorzysta─ç do optymalizacji formularza dla urz─ůdze┼ä mobilnych).

Następny jest atrybut name elementu input. Został już wspomniany w opisie metody HTTP GET powyżej, więc orientujesz się do czego służy.

Okre┼Ťla on nazw─Ö kontrolki, kt├│ra jest przesy┼éana po zatwierdzeniu formularza jako pierwszy element pary nazwa=warto┼Ť─ç. Drugi element tej pary to tekst wpisany w kontrolce przez u┼╝ytkownika lub warto┼Ť─ç atrybutu value kontrolki, je┼Ťli nie umo┼╝liwia ona wpisywania tekstu.

Pozosta┼é nam jeszcze do om├│wienia atrybut required. Jest to atrybut logiczny, kt├│rego obecno┼Ť─ç oznacza, ┼╝e dany element formularza jest obowi─ůzkowy. Poni┼╝szy zrzut ekranu pokazuje, co si─Ö dzieje, gdy pr├│bujemy zatwierdzi─ç nasz przyk┼éadowy formularz bez wype┼énienia pola Imi─Ö:

Działanie atrybutu required

Na razie om├│wili┼Ťmy tekstowe kontrolki formularza, ale istniej─ů tak┼╝e inne rodzaje. W naszym formularzu mamy jeszcze przyciski radiowe i pola wyboru, reprezentowane odpowiednio przez typy radio i checkbox, oraz przyciski zatwierdzania i resetowania reprezentowane odpowiednio przez typy submit i reset. Przyjrzymy si─Ö im po kolei.

Przyciski radiowe

Przyciski radiowe (ang. radio button) umo┼╝liwiaj─ů wyb├│r jednej z kilku opcji. Je tak┼╝e tworzymy za pomoc─ů elementu input, kt├│remu przypisujemy warto┼Ť─ç radio w atrybucie type. Domy┼Ťlnie maj─ů one posta─ç okr─ůg┼éego k├│┼éka a ich dzia┼éanie polega na tym, ┼╝e z grupy takich przycisk├│w mo┼╝na wybra─ç tylko jeden. Je┼Ťli zaznaczony jest jeden z przycisk├│w radiowych w grupie i klikniemy inny, to nast─Öpuje usuni─Öcie zaznaczenia tego pierwszego i zaznaczenie drugiego.

W przypadku przycisk├│w radiowych najwa┼╝niejsze s─ů dwa atrybuty (oczywi┼Ťcie nie licz─ůc type): name i value.

Atrybut name w tym przypadku ma podw├│jne zastosowanie. Po pierwsze okre┼Ťla nazw─Ö elementu, kt├│ra zostanie wykorzystania w ┼╝─ůdaniu HTTP (to ju┼╝ znamy). A po drugie umo┼╝liwia tworzenie grup tych przycisk├│w.

Na stronie, a nawet w jednym formularzu, mo┼╝e by─ç kilka niepowi─ůzanych ze sob─ů grup przycisk├│w radiowych, kt├│re powinny by─ç od siebie niezale┼╝ne. To znaczy, zaznaczenie przycisku w jednej z nich nie powinno powodowa─ç reakcji w innych grupach ni┼╝ ta, do kt├│rej nale┼╝y ten przycisk. Ten efekt osi─ůgamy w┼éa┼Ťnie za pomoc─ů atrybutu name.

Grup─Ö przycisk├│w radiowych tworzymy przez nadanie wybranym kontrolkom takiej samej warto┼Ťci atrybutu name. Jest to ca┼ékiem logiczne, poniewa┼╝ ten rodzaj elementu formularza s┼éu┼╝y do wyboru jednej opcji z kilku dost─Öpnych, a wi─Öc do serwera zostanie przes┼éana tylko jedna z nich.

Poniżej znajduje się kod HTML przycisków radiowych z naszego przykładowego formularza:

<label>Tak: <input type="radio" value="tak" name="kontakt-tn"></label>
<label>Nie: <input type="radio" value="nie" name="kontakt-tn"></label>

Je┼Ťli u┼╝ytkownik najpierw kliknie przycisk Tak, a nast─Öpnie Nie, to najpierw przycisk Tak zostanie zaznaczony, po czym nast─ůpi usuni─Öcie jego zaznaczenia i zaznaczenie przycisku Nie. Mo┼╝esz to wypr├│bowa─ç poni┼╝ej:

<form>
  <label>Tak: <input type="radio" value="tak" name="kontakt-tn"></label>
  <label>Nie: <input type="radio" value="nie" name="kontakt-tn"></label>
</form>

Gdyby u┼╝ytkownik naszego formularza wybra┼é opcj─Ö Tak i zatwierdzi┼é formularz, do serwera zosta┼éaby przes┼éana para kontakt-tn=tak. W przypadku wyboru odpowiedzi Nie do serwera trafi┼éaby para warto┼Ťci kontakt-tn=nie.

Kolejny typ pola input to pole wyboru.

Pola wyboru

Pole wyboru (ang. checkbox) reprezentuje pojedyncz─ů opcj─Ö w formularzu. Najcz─Ö┼Ťciej domy┼Ťlnie ma posta─ç pustego kwadratu, kt├│rego klikni─Öcie powoduje zmian─Ö koloru t┼éa i pojawienie si─Ö w nim charakterystycznego ÔÇ×haczykaÔÇŁ.

Pola wyboru, w odr├│┼╝nieniu od przycisk├│w radiowych, nie tworz─ů grup, wi─Öc mo┼╝na zaznaczy─ç ich dowoln─ů liczb─Ö. W naszym formularzu mamy nast─Öpuj─ůce pola wyboru:

<label>Tam-tam: <input type="checkbox" name="tam-tam" value="tak"></label>
<label>Telefon: <input type="checkbox" name="telefon" value="tak"></label>
<label>E-mail: <input type="checkbox" name="e-mail" value="tak"></label>

U┼╝ytkownik mo┼╝e wybra─ç jedn─ů form─Ö kontaktu albo dwie lub trzy. Gdyby na przyk┼éad wybra┼é opcj─Ö Telefon, do serwera zosta┼éaby wys┼éana para telefon=tak, a gdyby wybra┼é wszystkie opcje, to do serwera zosta┼éby wys┼éany nast─Öpuj─ůcy ┼éa┼äcuch: tam-tam=tak&telefon=tak&e-mail=tak.

Dodatkowo pola wyboru maj─ů atrybut logiczny checked, kt├│ry powoduje, ┼╝e wybrana kontrolka jest domy┼Ťlnie zaznaczona. Mo┼╝na to wykorzysta─ç na przyk┼éad do zaznaczenia najcz─Ö┼Ťciej u┼╝ywanej opcji, aby u┼éatwi─ç u┼╝ytkownikom wype┼énianie formularza.

Przyciski zatwierdzania i resetowania

Kolejne dwa pola typu input w naszym formularzu znajduj─ů si─Ö na samym ko┼äcu. S─ů to przyciski zatwierdzania i resetowania formularza.

Pierwszy z nich, type="submit", nale┼╝y klikn─ů─ç po wype┼énieniu formularza, aby przes┼éa─ç go do serwera. Je┼Ťli zdefiniujemy atrybut value, to jego warto┼Ť─ç zostanie ukazana jako jego etykieta. Je┼Ťli go nie zdefiniujemy, to b─Ödzie mia┼é domy┼Ťln─ů etykiet─Ö przegl─ůdarki.

Drugi przycisk, type="reset", umo┼╝liwia wyczyszczenie danych wprowadzonych w formularzu. Je┼Ťli wype┼énisz niekt├│re lub wszystkie pola formularza i go klikniesz, to wszystko zostanie usuni─Öte. Atrybut value dzia┼éa w nim tak samo, jak w przypadku przycisku submit.

To były ostatnie typy pól input w naszym formularzu, ale istnieje ich o wiele więcej. Szczegółowy opis wszystkich kontrolek typu input znajdziesz w artykule Element HTML input.

Teraz zajmiemy si─Ö elementem formularza, kt├│ry jest tworzony przy u┼╝yciu innych element├│w ÔÇô list─ů rozwijan─ů.

Listy rozwijane

Listy rozwijane w HTML tworzymy przy u┼╝yciu element├│w select i option, ewentualnie z dodatkiem elementu optgroup.

Element select jest kontenerem listy, w kt├│rym mo┼╝e znajdowa─ç si─Ö dowolna liczba element├│w option reprezentuj─ůcych poszczeg├│lne opcje. Poni┼╝ej znajduje si─Ö kod ┼║r├│d┼éowy listy rozwijanej z naszego przyk┼éadowego formularza:

<label for="temat">Temat:</label>
<select name="temat" id="temat">
  <optgroup label="Tre┼Ť─ç artyku┼é├│w"></optgroup>
    <option value="erdos">Paul Erd┼Ĺs</option>
    <option value="feynman">Richard Feynman</option>
    <option value="why">why the lucky stiff</option>
  </optgroup>
  <optgroup label="Inne tematy"></optgroup>
    <option value="korekta">Korekta tekstu</option>
    <option value="publikacja">Publikacja artykułu</option>
  </optgroup>
</select>

Element select ma zdefiniowane dwa atrybuty: name i id. Pierwszy z nich okre┼Ťla nazw─Ö kontrolki, kt├│ra b─Ödzie powi─ůzana z warto┼Ťci─ů przy wysy┼éaniu danych z formularza do serwera. Natomiast atrybut id umo┼╝liwia powi─ůzanie kontrolki z jej etykiet─ů.

Ka┼╝dy element option ma atrybut value, kt├│ry reprezentuje jego warto┼Ť─ç ÔÇô zostanie ona wys┼éana do serwera w parze z warto┼Ťci─ů atrybutu name elementu select. Je┼Ťli na przyk┼éad u┼╝ytkownik wybierze pozycj─Ö Richard Feynman, do serwera zostanie wys┼éana para temat=feynman.

Element optgroup umo┼╝liwia grupowanie pozycji listy rozwijanej. W powy┼╝szym przyk┼éadzie mamy dwie takie grupy. W przegl─ůdarce Firefox domy┼Ťlnie wygl─ůdaj─ů one tak, jak na poni┼╝szym zrzucie ekranu:

Grupy optgroup

Stosowanie elementu optgroup nie jest obowi─ůzkowe, ale je┼Ťli lista pozycji do wyboru jest d┼éuga, to warto go u┼╝y─ç, aby zwi─Ökszy─ç atrakcyjno┼Ť─ç wizualn─ů i przejrzysto┼Ť─ç kontrolki.

Z kontrolek w naszym przykładowym formularzu pozostał nam już tylko obszar tekstowy. Przyjrzymy mu się teraz.

Obszar tekstowy

Obszar tekstowy w formularzu HTML tworzymy za pomoc─ů elementu textarea. W naszym przyk┼éadowym formularzu wygl─ůda on tak:

<textarea name="wiadomosc" cols="80" rows="10" maxlength="500" minlength="50"></textarea>

Jak wszystkie inne elementy formularza, nie jest on skomplikowany, ale zawiera kilka atrybut├│w, kt├│re jeszcze nie by┼éy omawiane. Atrybut name ju┼╝ dobrze znamy. Atrybuty cols i rows s┼éu┼╝─ů do okre┼Ťlania odpowiednio szeroko┼Ťci i wysoko┼Ťci elementu, a atrybuty maxlength i minlength okre┼Ťlaj─ů odpowiednio maksymaln─ů i minimaln─ů liczb─Ö znak├│w, jaka musi zosta─ç wpisana w tym elemencie, aby mo┼╝na by┼éo przes┼éa─ç formularz.

Atrybuty cols i rows przyjmuj─ů warto┼Ť─ç bez jednostki. Warto┼Ť─ç atrybutu cols okre┼Ťla szeroko┼Ť─ç elementu jako liczb─Ö znak├│w u┼╝ywanego kroju pisma, a warto┼Ť─ç atrybutu rows oznacza liczb─Ö wierszy tekstu.

Element textarea sk┼éada si─Ö ze znacznika otwieraj─ůcego i zamykaj─ůcego, co oznacza, ┼╝e mo┼╝e zawiera─ç tre┼Ť─ç. Tekst wpisany mi─Ödzy tymi znacznikami jest wy┼Ťwietlany jako tre┼Ť─ç domy┼Ťlna, kt├│r─ů u┼╝ytkownik mo┼╝e skasowa─ç, je┼Ťli zechce. Na przyk┼éad:

<textarea name="wiadomosc" cols="80" rows="10" maxlength="500" minlength="50">Ten tekst zostanie wy┼Ťwietlony w obszarze tekstowym na stronie.</textarea>

Domy┼Ťlnie ten element textarea w przegl─ůdarce wygl─ůda┼éby tak, jak na poni┼╝szym zrzucie ekranu.

Textarea z tekstem

Element textarea wyr├│┼╝nia si─Ö spo┼Ťr├│d innych element├│w formularza mi─Ödzy innymi tym, ┼╝e domy┼Ťlnie u┼╝ytkownik mo┼╝e zmienia─ç jego rozmiar. ┼Üwiadczy o tym tr├│jk─ůtna ikona w kreski znajduj─ůca si─Ö w prawym dolnym rogu pola tekstowego. Mo┼╝na to jednak wy┼é─ůczy─ç za pomoc─ů w┼éasno┼Ťci CSS resize.

W┼éasno┼Ť─ç CSS resize

Je┼Ťli nie chcesz, aby u┼╝ytkownicy mieli mo┼╝liwo┼Ť─ç zmiany rozmiaru Twojego elementu textarea, mo┼╝esz j─ů wy┼é─ůczy─ç za pomoc─ů w┼éasno┼Ťci CSS resize, np.:

textarea {resize: none}

Teraz nasz element textarea wygl─ůda tak:

Textarea bez mo┼╝liwo┼Ťci zmiany rozmiaru

W┼éasno┼Ť─ç resize odnosi si─Ö nie tylko do elementu textarea, ale og├│lnie do element├│w blokowych, kt├│re maj─ů w┼éasno┼Ť─ç overflow ustawion─ů na auto, oraz przyjmuje cztery warto┼Ťci:

  • none ÔÇô brak mo┼╝liwo┼Ťci zmiany rozmiaru elementu
  • both ÔÇô mo┼╝liwo┼Ť─ç zmiany rozmiaru elementu w poziomie i pionie
  • horizontal ÔÇô mo┼╝liwo┼Ť─ç zmiany rozmiaru elementu w poziomie
  • vertical ÔÇô mo┼╝liwo┼Ť─ç zmiany rozmiaru elementu w pionie

W poni┼╝szym okienku mo┼╝esz ÔÇ×pobawi─ç si─ÖÔÇŁ akapitem z w┼é─ůczon─ů mo┼╝liwo┼Ťci─ů zmiany rozmiaru w obu kierunkach. Zmie┼ä w sekcji CSS ustawienie w┼éasno┼Ťci resize na inne i sprawd┼║, jaki b─Ödzie tego efekt.

See the Pen Test w┼éasno┼Ťci CSS resize by ┼üukasz Piwko (@shebangpl) on CodePen.

Om├│wili┼Ťmy wszystkie kontrolki naszego formularza, a tym samym w og├│le wszystkie najwa┼╝niejsze i najcz─Ö┼Ťciej u┼╝ywane kontrolki formularzy HTML.

Mimo to, nasz przyk┼éadowy formularz wci─ů┼╝ kryje przed nami pewne tajemniceÔÇŽ Sprawd┼║my, jakie to sekrety.

Grupowanie element├│w formularza

Mimo ┼╝e szczeg├│┼éowo przeanalizowali┼Ťmy ju┼╝ prawie wszystkie elementy naszego przyk┼éadowego formularza, wci─ů┼╝ jeszcze nie wiemy, do czego s┼éu┼╝─ů elementy fieldset i legend, cho─ç nietrudno si─Ö tego domy┼Ťli─ç.

Ich zastosowanie jest bardzo proste. Element fieldset służy do dzielenia elementów formularza na grupy tematyczne, a element legend reprezentuje jego podpis.

To w┼éa┼Ťnie domy┼Ťlne ustawienia przegl─ůdarki dla element├│w fieldset i legend sprawi┼éy, ┼╝e poszczeg├│lne sekcje naszego przyk┼éadowego formularza s─ů otoczone cienkim obramowaniem z przerw─ů w pobli┼╝u lewego g├│rnego rogu na podpis.

Stosowanie elementu fieldset nie jest obowi─ůzkowe, ale pomaga logicznie rozdzieli─ç poszczeg├│lne cz─Ö┼Ťci formularza. Najcz─Ö┼Ťciej u┼╝ywa si─Ö go w d┼éu┼╝szych formularzach. W naszym przyk┼éadzie nie jest raczej potrzebny, ale zosta┼é u┼╝yty po to, aby zademonstrowa─ç spos├│b jego u┼╝ycia.

Teraz ju┼╝ nasz przyk┼éadowy formularz nie ma przed nami ┼╝adnych tajemnic. To jednak nie znaczy, ┼╝e formularze i ich r├│┼╝ne elementy nie kryj─ů jeszcze czego┼Ť w zanadrzu. Istnieje wiele innych ciekawych, cho─ç mo┼╝e rzadziej u┼╝ywanych, kontrolek i atrybut├│w, kt├│re nie zosta┼éy om├│wione w tym rozdziale, a kt├│re warto zna─ç.

Zestawienie element├│w formularzy HTML

Je┼Ťli chcesz szczeg├│┼éowo pozna─ç wszystkie elementy formularzy HTML, to skorzystaj z poni┼╝szej tabeli. Zawiera ona list─Ö wszystkich element├│w formularzy ze zwi─Öz┼éym opisem oraz linkami do szczeg├│┼éowych artyku┼é├│w na ich temat w ich nazwach.

ElementOpis
buttonPrzycisk
datalistLista opcji wy┼Ťwietlanych przez inny element formularza
fieldsetGrupa p├│l formularza
formKontener formularza
inputKontrolka formularza
labelEtykieta kontrolki formularza
legendPodpis elementu fieldset
meterWska┼║nik ukazuj─ůcy wizualnie pewn─ů miar─Ö
optgroupGrupa opcji listy rozwijanej
optionOpcja listy rozwijanej
outputWynik obliczeń
progressWska┼║nik post─Öpu
selectLista rozwijana
textareaObszar tekstowy

Skoro znasz ju┼╝ zdecydowan─ů wi─Ökszo┼Ť─ç element├│w HTML i du┼╝─ů cz─Ö┼Ť─ç w┼éasno┼Ťci CSS, czas sko┼äczy─ç z samo zachwytem i spojrze─ç na nasz─ů witryn─Ö krytycznym okiem. Obejrzyj dowoln─ů stron─Ö w zmniejszonym oknie przegl─ůdarki.

Przy ma┼éej szeroko┼Ťci, a wi─Öc takiej, jak─ů maj─ů ekrany urz─ůdze┼ä mobilnych, nasze strony nie prezentuj─ů si─Ö atrakcyjnie. Koniecznie musimy jako┼Ť temu zaradzi─ç. W nast─Öpnym rozdziale poznasz techniki dostosowywania stron do urz─ůdze┼ä mobilnych.

Podsumowanie

  • Formularz HTML reprezentuje element form.
  • Atrybut action elementu form okre┼Ťla skrypt na serwerze, do kt├│rego maj─ů zosta─ç przes┼éane dane z formularza.
  • Atrybut method elementu form okre┼Ťla metod─Ö HTTP przesy┼éania danych do serwera.
  • Warto┼Ť─ç atrybutu name ka┼╝dego elementu formularza jest przesy┼éana do serwera jako nazwa warto┼Ťci tego elementu.
  • Warto┼Ťci─ů elementu jest tre┼Ť─ç wpisana przez u┼╝ytkownika lub warto┼Ť─ç jego atrybutu value.
  • W przypadku metody HTTP GET dane s─ů przesy┼éane na ko┼äcu adresu URL, po znaku ?.
  • W przypadku metody HTTP POST dane s─ů przesy┼éane w tre┼Ťci ┼╝─ůdania HTTP.
  • Element input ma wiele typ├│w reprezentuj─ůcych r├│┼╝ne rodzaje kontrolek formularza.
  • Za pomoc─ů elementu input mo┼╝na tworzy─ç pola tekstowe, pola do wpisywania adresu e-mail, numeru telefonu czy has┼éa, przyciski radiowe, pola wyboru i wiele innych element├│w formularza.
  • Za pomoc─ů elementu input tworzy si─Ö tak┼╝e przyciski zatwierdzania i resetowania formularza.
  • Pseudoelement CSS ::placeholder umo┼╝liwia zmian─Ö wygl─ůdu tekstu reprezentowanego przez atrybut placeholder obs┼éugiwanego przez niekt├│re elementy formularza.
  • Do tworzenia list rozwijanych s┼éu┼╝─ů elementy select, option i optgroup.
  • Obszary tekstowe tworzy si─Ö za pomoc─ů elementu textarea.
  • Za pomoc─ů w┼éasno┼Ťci CSS resize mo┼╝na okre┼Ťli─ç, czy u┼╝ytkownik mo┼╝e zmienia─ç rozmiar wybranego elementu.
  • Elementy formularza mo┼╝na grupowa─ç za pomoc─ů elementu fieldset.
  • Element legend reprezentuje podpis grupy element├│w formularza w elemencie fieldset.

─ćwiczenia

  1. Formularz pokazany na pocz─ůtku tego rozdzia┼éu jest do┼Ť─ç rozbudowany, aby mo┼╝na by┼éo zademonstrowa─ç spos├│b u┼╝ycia r├│┼╝nych element├│w. W takiej witrynie jak nasza wystarczy┼éby du┼╝o prostszy formularz kontaktowy, zawieraj─ůcy na przyk┼éad pole na imi─Ö, adres e-mail i wiadomo┼Ť─ç. Oczy┼Ť─ç sw├│j formularz z niepotrzebnych element├│w wed┼éug w┼éasnego uznania, aby by┼é prosty i przejrzysty.
  2. Nasz formularz jest sformatowany zgodnie z domy┼Ťlnymi ustawieniami przegl─ůdarki, przez co wygl─ůda niezbyt atrakcyjnie. Upi─Öksz go za pomoc─ů CSS.