Moduł 5 - Zajęcia 1 - Elementy formularzy

1.1 Formularz HTML

Formularze na stronie internetowej działają podobnie jak tradycyjne formularze papierowe czy kwestionariusze. Dzięki nim możesz zbierać informacje od osób odwiedzających Twoją witrynę. Listy mailingowe, dane kontaktowe, profile użytkowników, logowanie i rejestracja, komentarze na blogu — wszystkie te dane zbierane są za pomocą formularzy i ich elementów. W skrócie formularze są kluczowym elementem do interakcji i zbierania danych od odwiedzających Twoją stronę użytkowników.

Firmy oceniają efektywność swojej strony internetowej, patrząc, jak dobrze działają jej formularze. Stawiają sobie pytania takie jak: "Ile leadów nasza strona przesłała do zespołu sprzedaży?" i "Ile osób zapisało się na nasz produkt w zeszłym tygodniu?". Odpowiedzi na te pytania są kluczowe dla rozwoju firm. Dlatego też formularze są stale udoskonalane i poprawiane, by były bardziej skuteczne.

Funkcjonalny formularz HTML składa się z dwóch części:

  • Wygląd formularza (frontend strony). Dotyczy tego, jak formularz wygląda na stronie internetowej. To tak, jak układamy formularz, dodajemy pola tekstowe czy przyciski. Czyli wszystko, co widzisz i z czym masz bezpośrednio styczność.
  • Kod do przetwarzania danych (backend strony). Tutaj odbywa się cała magia. Tutaj znajduje się kod, który sprawdza, czy wprowadzone dane są poprawne, przechowuje je w odpowiednim miejscu, a nawet może wysłać e-maila. To jak silnik działający "pod maską", który dba o to, żeby wszystko działało zgodnie z planem.

1.2 Element form

Element form to sekcja dokumentu HTML, która zawiera interaktywne elementy sterujące, umożliwiające użytkownikowi przesyłanie informacji do serwera WWW. Innymi słowy, jest to kontener/pojemnik dla grupy powiązanych elementów. Na przykład, formularz opinii, rejestracji i płatności w sklepie internetowym. Każdy z tych komponentów interfejsu składa się z grupy interaktywnych elementów zgrupowanych w formularzu. 

            <form name="feedback_form" autocomplete="off" novalidate>
            <!-- Elementy formularza --> </form>

Element form nie posiada obowiązkowych atrybutów. Poniżej znajdują się przykładowe opcjonalne atrybuty wraz z ich opisem:

  • name — nazwa formularza, unikalna na danej stronie internetowej. Może zawierać dowolne znaki alfabetu angielskiego, cyfry, podkreślenia i myślniki. Jest używana zarówno po stronie serwera, jak i klienta podczas korzystania z formularza.
  • autocomplete — określa, czy przeglądarka może automatycznie uzupełnić wartości wszystkich elementów formularza. Przyjmuje jedną z dwóch wartości: off lub on.
  • novalidate — atrybut flagi, nie przyjmuje wartości. Informuje przeglądarkę, aby nie sprawdzała poprawności wprowadzonych danych podczas wysyłania formularza. Jeśli atrybut nie jest zdefiniowany, przeglądarka wykonuje wbudowaną walidację.

1.3 Wysłanie formularza

Aby przesłać formularz, wystarczy kliknąć przycisk <button type="submit"> lub nacisnąć klawisz Enter w dowolnym polu formularza. Te działania spowodują także odświeżenie aktualnej karty przeglądarki. To standardowe zachowanie, które można dostosować przy użyciu języka programowania JavaScript. 

            <form> <!-- Elementy formularza -->
              <button type="submit">Submit feedback</button>
            </form>

Przycisk nie dziedziczy wielu stylów tekstu, takich jak rodzina czcionki i kolor tekstu. Aby to zmienić, zaleca się ustawienie globalnego stylu znacznika button. Inne właściwości i ich wartości można dostosować zgodnie z układem strony. 

            .button {
               font-family: inherit; color: currentColor;
            }

2.1 Element input

Element input to narzędzie do tworzenia różnych pól do wprowadzania danych. Rodzaj pola jest określany przez atrybut type. Domyślnie, gdy nie określimy innego rodzaju, jest to pole tekstowe text. To oznacza, że możesz wprowadzać w nim dowolne znaki. 

            <form>
              <input type="text" name="username" />
              <button type="submit">Submit feedback</button>
            </form>

Pamiętaj, że takie pole jest liniowe i nie dziedziczy stylów czcionki. Dlatego, jeśli chcesz, aby wszystkie pola miały taki sam styl czcionki, możesz dodać odpowiednią regułę CSS. 

            .input {
              font-family: inherit;
            }

Koncepcyjnie, input reprezentuje wpis w słowniku, który zostanie przesłany na serwer.

Atrybut name definiuje nazwę tego wpisu, a wartość to informacja wprowadzona przez użytkownika. Nazwa pola w formularzu musi być unikalna. Wartość atrybutu name jest również używana, gdy pracujesz z formularzem w JavaScript.

2.2 Element label

Element label łączy opis (etykietę) z interaktywnym elementem formularza. Tekst i element są połączone nie tylko wizualnie, ale także logicznie. Na przykład, gdy używasz czytnika ekranu, odczyta on tekst etykiety, kiedy użytkownik skupi się na połączonym elemencie. Naciśnięcie na etykietę powoduje automatycznie przejście do powiązanego elementu. Jeśli element formularza jest zagnieżdżony wewnątrz label, przeglądarka automatycznie utworzy link. Kliknięcie tekstu "Username" spowoduje umieszczenie kursora na polu do wprowadzania danych. 

            <form>
              <label> Username
                <input type="text" name="username" />
              </label>
              <button type="submit">Submit feedback</button>
            </form>

Jeśli element formularza nie jest zagnieżdżony w label, musisz wyraźnie połączyć je poprzez:

  • atrybut id elementu i
  • atrybut for etykiety.
            <form>
              <label for="username">Username</label>
              <input type="text" name="username" id="username" />
              <button type="submit">Submit feedback</button>
            </form>

2.3 Atrybut placeholder

Atrybut placeholder umożliwia wyświetlenie pomocniczego tekstu sugerującego użytkownikowi rodzaj danych, które powinny być wprowadzone do danego pola formularza. Ten tekstowy podgląd, ta podpowiedź jest wyświetlana, gdy element input jest pusty, a zniknie, gdy użytkownik zacznie wprowadzać dane.

Atrybut placeholder może być używany w różnych elementach formularzy internetowych, zwłaszcza w polach tekstowych, gdzie wymagane jest wprowadzanie danych. Warto zauważyć, że tekst pomocniczy nie zastępuje opisowej etykiety label, ale uzupełnia ją, dostarczając dodatkowego wskazania dotyczącego oczekiwanych informacji. 

            <form>
              <label>
              Username
                <input type="text" name="username" placeholder="Jacob Mercer" />
              </label>
              <button type="submit">Submit feedback</button>
            </form>

2.4 Pseudoelement ::placeholder

Pseudoelement ::placeholderjest wykorzystywany do dostosowywania wyglądu tekstu w podpowiedziach. 

            input::placeholder {
              color: teal;
              font-weight: 700;
            }

Dzięki temu, za pomocą selektorów stanu, możesz zmieniać wygląd tekstu podpowiedzi. Na przykład po najechaniu kursorem myszy na pole do wprowadzania danych. 

            input:hover::placeholder,
            input:focus::placeholder {
              color:orange;
            }

2.5 Pseudoklasa :placeholder-shown

Pseudoklasa :placeholder-shown to narzędzie, które pozwala dostosować wygląd pola wprowadzania w zależności od tego, czy widoczny jest tekst podpowiedzi i wartość atrybutu placeholder.

Wyobraź sobie, że chcesz nadać specjalne cechy polu tekstowemu, gdy użytkownik jeszcze nie wprowadził żadnego tekstu. Na przykład, możesz zmienić kolor obramowania pola, gdy pojawi się tylko tekst podpowiedzi. Pamiętaj, że gdy tylko użytkownik wprowadzi co najmniej jeden znak, podpowiedź zniknie, przywracając domyślny wygląd. 

            .input {
              border: 1px solid orange;
            }

            input:placeholder-shown {
              border-color: blue;
            }

Zauważ, że kolor obramowania zmienia się na pomarańczowy, gdy tylko tekst podpowiedzi znika.

2.6 Atrybut autofocus

Atrybut autofocus jest atrybutem logicznym. Jeśli ten atrybut jest obecny, pole wprowadzania automatycznie uzyskuje fokus po załadowaniu strony internetowej. Oznacza to, że możesz natychmiast wpisać w nim tekst. Domyślnie żadne pole nie ma tego atrybutu. 

            <form>
              <label>
                First name
                <input type="text" name="firstName" autofocus />
              </label>
              <label>
                Last name
                <input type="text" name="lastName" />
              </label>
              <button type="submit">
              Submit</button>
            </form>

Nie możesz ustawić fokusu na kilku elementach jednocześnie. Dlatego atrybut jest przypisany do pola, od którego użytkownik powinien rozpocząć wypełnianie formularza. Atrybut autofocus jest logiczny, tzn. nie ma wartości, a jedynie nazwę.

2.7 Pseudoklasa :focus-within

Stosowana do elementu, gdy tylko on lub znajdujące się w nim elementy uzyskają fokus. Dzięki temu możemy łatwo dostosować wygląd:

  • etykiety,
  • formularza,
  • oddzielnego pola formularza,

gdy użytkownik wchodzi w interakcję z polami formularza.

Teraz przyjrzyjmy się, jak możemy to zaimplementować w praktyce za pomocą prostego kodu CSS: 

            form:focus-within {
              border-color: blue;
            }

3.1 Elementy textarea i select

Zadawanie pytań to sztuka. Zgodzi się z tym każdy, kto kiedykolwiek otrzymał złą odpowiedź. Problem może tkwić w pytaniu — nie jest wystarczająco jasne lub zbyt skomplikowane. A może też w odpowiedzi. Na przykład na pytanie "Jak oceniasz poziom naszej obsługi?", jedna osoba odpowie, że na 4 punkty, mając na myśli 4 z 10,a druga 3 punkty, mając na myśli 3 z 5. W środowisku programistycznym prostym sposobem na rozwiązanie tego problemu jest użycie odpowiedniego formatu interaktywnego. Oprócz dobrze znanego nam pola do wprowadzania tekstu istnieją też interaktywne narzędzia, takie jak textarea lub select, które mogą pomóc.

3.2 Element textarea

Textarea to sparowany znacznik, który tworzy wielowierszowe pole do wprowadzania dużej ilości tekstu. To miejsce, gdzie użytkownik może:

  • wyrazić swoją opinię;
  • dodać komentarz;
  • napisać post w mediach społecznościowych;
  • opisać szczegóły zamówienia itp.
            <textarea name="" rows="" cols="" placeholder=""></textarea>

Element textarea posiada następujące atrybuty:

  • rows — ustawia liczbę wierszy (wysokość);
  • cols — ustawia liczbę kolumn (szerokość).

W praktyce określa się tylko rows, a szerokość elementu jest kontrolowana przez CSS.

Domyślnie element textarea można rozciągać w poziomie i w pionie. A jeśli chcesz kontrolować to, czy użytkownik może zmieniać jego rozmiar, użyj poniższej właściwości CSS resize. 

            resize: both | horizontal | vertical | none
  • text text
  • text text

3.3 Element select

Element select — to nic innego jak rozwijane menu (nazywane również combobox), które umożliwia wybór jednej z kilku opcji (odpowiedzi). 

          <select name="size">
            <option value="xs">Extra Small</option>
            <option value="s">Small</option>
            <option value="m" selected>Medium</option>
            <option value="l">Large</option>
          </select>
  • Element select jest rozwijanym menu z atrybutem name.
  • Menu zawiera zestaw elementów option z atrybutem value.
  • Tekst wewnątrz elementu option jest wyświetlany w przeglądarce, a wartość atrybutu value zostanie użyta podczas wysyłania formularza.
  • Domyślnie wybierany jest pierwszy element option z listy. Można to zmienić, ustawiając wymaganą opcję za pomocą atrybutu selected.

3.4 Znacznik optgroup

W tym podrozdziale dowiesz się, jak używać znacznika optgroupdo grupowania opcji w rozwijanym menu. To podstawowa umiejętność, którą warto opanować!

Pamiętaj, że tekst tytułu grupy określa się w atrybucie label.

4.1 Specyficzne informacje w formularzach

Tworzenie formularza przypomina szycie butów na zamówienie. Elementy formularza powinny mieć odpowiedni rozmiar — <input> dla krótkich odpowiedzi i <textarea> dla dłuższych komentarzy. Dodatkowo musimy przewidzieć i wyeliminować nawet najmniejsze niedogodności, takie jak długie wyszukiwanie symbolu @ podczas wprowadzania adresu e-mail.

4.2 Pole wprowadzania poczty

Atrybut type określa, jaki rodzaj danych możemy wprowadzać do danego pola. Przykładowo, gdy przeglądarka na smartfonie widzi pole typu email, automatycznie wyświetli specjalną klawiaturę z łatwo dostępnym symbolem @do wprowadzania adresu e-mail. Dodatkowo przeglądarka może również udostępnić opcję wybierania adresu e-mail z książki adresowej. 

          <form>
            <label>
              Email
              <input type="email" name="email" />
            </label>
            <button type="submit">Register</button>
          </form>

4.3 Pole wprowadzania hasła

Gdy użytkownik wpisuje swoje hasło w polu typu password , na ekranie widzi jedynie zastępujące je znaki. To celowe działanie związane z bezpieczeństwem. 

          <form>
            <label> Email
              <input type="email" name="email" />
            </label>
            <label>
              Password
              <input type="password" name="pwd" minlength="5" maxlength="12" />
            </label>
            <button type="submit">Register</button>
          </form>

Możesz zauważyć, że istnieje opcja określania minimalnej i maksymalnej liczby znaków dla hasła za pomocą atrybutów minLength i maxLength . Pozwalają one ograniczyć liczbę znaków, które można wprowadzić w polu.

4.4 Pole wprowadzania numeru telefonu

Aby umożliwić wprowadzanie numerów telefonów, możemy skorzystać z atrybutu type o wartości tel, który tworzy pole do wprowadzania danych telefonicznych. Numery telefonów mogą być reprezentowane w różnych formatach. Poniżej znajdziesz prosty formularz, który pozwala użytkownikowi wpisać swój numer telefonu. 

          <form>
            <label>
              Email
              <input type="email" name="email" />
            </label>
            <label>
              Password
              <input type="password" name="pwd" minlength="5" maxlength="12" />
            </label>
            <label>
              Phone number
              <input type="tel" name="phone" />
            </label>
            <button type="submit">Register</button>
          </form>

W praktyce zaletą korzystania z pola typu tel jest wyświetlanie w przeglądarkach mobilnych wirtualnej klawiatury do wprowadzania numerów telefonów. To ułatwia użytkownikowi wprowadzanie cyfr, ale nie liter.

4.5 Pole wprowadzania liczb

Zwykłe pola tekstowe akceptują dosłownie wszystko: cyfry, litery, spacje, znaki interpunkcyjne itp. Ale co jeśli chcemy, aby użytkownik wprowadzał tylko liczby? Tu z pomocą przychodzi typ pola `number`. Podczas wprowadzania danych do tego pola, przeglądarka ignoruje wszystko, z wyjątkiem samych liczb. 

            <input type="number" name="age" value="0" />

Kontrola nad wartościami

Oczywiście istnieje wiele liczb, które nie są odpowiednie dla określonego typu danych numerycznych. Na przykład możesz chcieć zapobiec wprowadzaniu zbyt dużych lub ujemnych liczb. Aby to osiągnąć, używamy atrybutów `min` i `max`, które definiują zakres akceptowalnych wartości. 

            <input type="number" name="age" value="0" min="18" max="120" />

Domyślnie pola numeryczne akceptują tylko liczby całkowite. Zachowanie to można zmienić za pomocą atrybutu step. Atrybut ten określa przyrost zmiany liczby. Domyślnie, wartość kroku wynosi 1.

Wartość atrybutu step="0.5"pozwala wprowadzać liczby w krokach co 0.5. Na przykład: 1, 1.5, 2, 2.5, 3 itd. Zwróć uwagę, że liczenie rozpoczyna się od pierwszej wprowadzonej wartości, tj. po wprowadzeniu 0.3, kolejne wartości to 0.8, 1.3, 1.8 itd. W ten sposób wartość określa rozmiar kroku.

4.6 Pole wprowadzania daty i czasu

W formularzach możemy używać pola wprowadzania do wyboru daty i/lub godziny. W tym celu należy ustawić jeden z typów: date, time lub datetime-local. 

          <!-- Aby wybrać tylko datę -->
          <input type="date" />
          <!-- Aby wybrać tylko czas-->
          <input type="time" />
          <!-- Aby wybrać oba -->
          <input type="datetime-local" />

Natywny (wbudowany) kalendarz ma jednak kilka wad:

  • ma różny wygląd w różnych przeglądarkach;
  • trudno go dostosować za pomocą CSS.

Dlatego zamiast niego często używa się bibliotek JavaScript.

5.1 Przycisk radiowy i elementy pola wyboru

Dokonanie wyboru nie jest łatwym zadaniem. Szczególnie gdy możesz wybrać jedną opcję spośród wielu lub kilku. Jeśli opcji jest zbyt wiele, możesz dla wygody pogrupować je w kategorie. Wyobraź sobie, że wypełniasz formularz, który prosi Cię o wybór rozmiaru, a witryna oferuje zarówno amerykański, jak i europejski system miar. Różne rodzaje pytań wymagają różnych rodzajów interakcji. Dlatego istotne jest, abyś jako uczący się deweloper zdobył wiedzę na temat powszechnie używanych typów elementów interaktywnych.

5.2 Przyciski radiowe

Dodanie atrybutu `type` z wartością `radio` zmienia pole wprowadzania w przełącznik (przycisk radiowy, radio button).

Przyciski radiowe zawsze występują w grupach, co pozwala użytkownikowi wybrać jedną z wielu wstępnie ustawionych wartości. 

          <form>
            <p>Choose a color:</p>
            <label>
              <input type="radio" name="color" value="red" checked />
              Red
            </label>
            <label>
              <input type="radio" name="color" value="white" />
              White
            </label>
            <label>
              <input type="radio" name="color" value="green" />
              Green
            </label>
          </form>
  • Wszystkie przyciski radiowe w grupie powinny mieć taką samą wartość atrybutu `name`, w przeciwnym razie przeglądarka nie będzie wiedziała, że jest to grupa.
  • Do przycisków radiowych nie można wprowadzać danych. Z tego powodu, dla każdego z nich należy określić wartość w atrybucie `value`. Jest to wartość, która zostanie przekazana do serwera, gdy użytkownik prześle formularz.
  • Atrybut `checked` wskazuje, który przycisk radiowy zostanie wybrany (zaznaczony) domyślnie. W grupie przycisków radiowych w stanie `checked` może znajdować się tylko jeden element. Domyślnie jest to pierwszy element.

5.3 Przyciski wyboru

Pola wyboru (checkbox) są podobne do przycisków radiowych, ale pozwalają wybrać dowolną liczbę wartości, tj. wiele z wielu.

Pole wyboru może być używane:

  • indywidualnie, na przykład w celu zaakceptowania umowy użytkownika podczas rejestracji,
  • w grupie, na przykład wybierając hobby.
          <form>
            <p>What are your hobbies?</p>
            <label>
              <input type="checkbox" name="hobby" value="music" checked />
              Music
            </label>
            <label>
              <input type="checkbox" name="hobby" value="sports" checked />
              Sports
            </label>
            <label>
              <input type="checkbox" name="hobby" value="reading" />
              Reading
            </label>
          </form>
  • Każde pole wyboru w grupie powinno mieć taką samą wartość dla atrybutu `name`, w przeciwnym razie przeglądarka nie będzie wiedziała, że jest to grupa.
  • Do pól wyboru nie można wprowadzać danych, więc dla każdego z nich trzeba określić wartość w atrybucie `value`.
  • Atrybut `checked` wskazuje, które pole wyboru będzie domyślnie zaznaczone. W grupie pól wyboru w stanie `checked` może znajdować się dowolna liczba elementów. Domyślnie nie ma żadnego.

5.4 Pseudoklasa :checked

Pseudoklasa :checked jest stosowana do nadawania stylów elementom interaktywnym, takim jak:

  • przyciski radiowe,
  • pola wyboru,
  • opcje menu rozwijanego w selektorach.

Dzięki tej pseudoklasie możemy dostosować wygląd określonych pól (elementów interaktywnych), które zostały aktywowane przez użytkownika. 

            input:checked {
              box-shadow: 0 0 0 5px orangered;
            }

What are your hobbies?

What are your hobbies?

5.5 Selektor atrybutu

Kiedy zaczynasz przygodę ze stylizacją formularzy, z pewnością chcesz, aby Twoje pola wyboru prezentowały się wyjątkowo. Ale co zrobić, gdy masz wiele pól i nie chcesz dla każdego z nich tworzyć osobnej klasy? Z pomocą przychodzi selektor atrybutu. Selektor input:checked stosuje się do wszystkich możliwych pól. 

            input[type="checkbox"] { }

Zwróć uwagę, że możesz określić selektor z dowolnym atrybutem, nie tylko type. Ogólna struktura selektora atrybutu to selektor → nazwa atrybutu → wartość atrybutu. 

            selector[attribute_name="..."]

Jeśli chcesz wybrać wszystkie pola wprowadzania z `type="checkbox"`, użyj następującego selektora.

Wtedy selektor pola wyboru w wybranym stanie będzie wyglądał następująco.

            input[type="checkbox"]:checked {
              box-shadow: 0 0 0 2px orangered;
            }

5.6 Pseudoklasa :checked

Pseudoklasa :checked może być użyta do stylizacji wybranych elementów. Aby to zrobić, użyj selektora X + Y. Ten selektor wybiera tylko element Y, który w znacznikach HTML następuje bezpośrednio po X. 

            ul + p {
              background-color: rgb(3, 56, 92);;
            }

W tej regule CSS wybieramy tylko akapit tekstu, który znajduje się bezpośrednio po liście nienumerowanej.

  • <li></li>
  • <li></li>

<p></p>

Łącząc selektor X + Y i pseudoklasę :checked , możesz zmienić kolor etykiety po zaznaczeniu pola wyboru.

Aby to osiągnąć, znacznik label musi znajdować się bezpośrednio po znaczniku pola wyboru. 

            <input type="checkbox" name="hobby" value="music" id="music" />
            <label for="music">Music</label>
          
            input[type="checkbox"]:checked + label {
              color: blue;
            }

5.7 Wymagane pola: required

Atrybut logiczny o nazwie required oznacza pole formularza jako wymagane. Kiedy wysyłasz formularz, a pole oznaczone jako required jest puste, przeglądarka wyświetli komunikat z podpowiedzią. Pamiętaj, że wygląd komunikatu może się różnić w zależności od używanej przeglądarki i nie można go zmienić za pomocą CSS. 

            <input type="email" name="email" required />

Jeśli chcesz, aby grupa przycisków radiowych lub pól wyboru była oznaczona jako wymagana, ustaw atrybut required dla każdego elementu grupy. 

            <input type="checkbox" name="hobby" value="sports" required />
            <input type="checkbox" name="hobby" value="music" required />
            <input type="checkbox" name="hobby" value="books" required />

5.8 Atrybut `disabled`

W tym podrozdziale dowiesz się o atrybucie `disabled` , który pozwala dezaktywować element interaktywny. To ważne, gdy chcesz, aby pewne elementy na stronie były niedostępne do interakcji. Przykładowo, przycisk oznaczony atrybutem `disabled`nie reaguje na kliknięcia myszą i nie otrzymuje efektu fokusu. 

            <button type="button">Active button</button>
            <button type="button" disabled>Disabled button</button>

Atrybut disabled może być używany w różnych elementach, takich jak przyciski czy pola formularza. Atrybut bez wartości nazywany jest logicznym (boolean). Jest to podobne do włącznika światła, który ma dwa stany — włączony/wyłączony. Tak samo jest z atrybutami boolean: jeśli atrybut jest określony, jego wartość jest uważana za "włączoną", a jeśli nie jest określona, jest uważana za "wyłączoną". 

            button:disabled {
              background-color: lightgray;
              cursor: not-allowed;
            }

Aby nadać styl nieaktywnemu elementowi, używamy pseudoklasy disabled, która jest stosowana do elementów z atrybutem disabled.

Ten atrybut jest często wykorzystywany do zabezpieczania formularzy. Na przykład, aby zapobiec przesłaniu formularza, dopóki wszystkie pola nie zostaną wypełnione. Pamiętaj jednak, że, do takiej funkcji potrzebny jest JavaScript. Stylizacja nieaktywnych elementów jest zazwyczaj ustalana i wykonywana z góry, na etapie projektowania strony.

5.9 Grupowanie pól

Jeśli formularz jest duży, zgrupowanie powiązanych elementów sprawia, że staje się bardziej przejrzysty i czytelny dla użytkowników. To prosty sposób, aby skoncentrować uwagę na niewielkich, uporządkowanych grupach pól, zamiast gubić się w zrozumieniu całego formularza na raz.

Grupowanie odbywa się zarówno wizualnie, poprzez interfejs, jak i logicznie w kodzie.

Element `fieldset` to taki jakby pojemnik, który pomaga nam uporządkować różne części formularza. Wyobraź go sobie jak pudełko, w którym trzymamy podobne rzeczy.

Element ten pełni rolę kontenera do grupowania kilku powiązanych elementów w formularzu, a zagnieżdżony w nim`legend` działa jako tytuł grupy, który opisuje, co znajduje się w środku.

Powiązane przyciski radiowe i pola wyboru powinny zawsze być logicznie zgrupowane, natomiast inne pola mogą być grupowane według potrzeb.

Pamiętaj, że `fieldset` i `legend` to kluczowe elementy, które pomagają w uporządkowaniu formularza. Tak samo, jak "pudełko" i "tytuł" pomagają zrozumieć, co się w nim znajduje. 

            <form>
            <fieldset>
              <legend>Nagłówek grupy</legend>
              <!-- Grupa interaktywnych elementów -->
            </fieldset>

            <fieldset>
              <legend>Nagłówek grupy</legend>
              <!-- Grupa interaktywnych elementów -->
            </fieldset>

            <button type="submit">Submit</button>
          </form>

Domyślnie element fieldset ma marginesy zewnętrzne, marginesy wewnętrzne i obramowanie. Można je zresetować globalnie lub punktowo dla konkretnego formularza, w zależności od wymagań danego zadania. 

            fieldset {
              padding: 0;
              margin: 0;
              border: none;
            }
Nagłówek grupy