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-mailjan@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.