Generator formularza HTML

Generator formularza HTML

Generator formularza HTML zamienia listę pól wpisaną w liniach tekstu na gotowy kod <form>: z etykietami powiązanymi z polami, atrybutami walidacji HTML5, adresem action, metodą GET lub POST i przyciskiem wysyłki. Pod kodem widać działający podgląd, w którym sprawdzisz komunikaty walidacji przeglądarki.

Na start możesz wybrać jeden z sześciu szablonów: kontakt, newsletter, logowanie, rejestracja, zamówienie i ankieta. Jeden formularz mieści do 60 pól.

Typy pól

Nieznany typ generator zamienia na text i pokazuje uwagę z numerem linii, więc literówka nie psuje całego formularza.

Walidacja formularza HTML5

Atrybuty required, minlength, maxlength, min, max, step i pattern sprawdzają dane w przeglądarce przed wysłaniem. To pierwsza linia obrony – serwer musi walidować ponownie. Opcja novalidate wyłącza sprawdzanie w przeglądarce, co przydaje się, gdy walidację przejmuje własny skrypt. Oprócz reguł walidacji możesz dopisać placeholder, autocomplete, rows (wysokość textarea) i multiple.

Format definicji pola

Każda linia to etykieta; typ; nazwa; reguły; opcje, np. Email; email; email; required|autocomplete:email. Reguły rozdzielaj pionową kreską, a wartość reguły podawaj po dwukropku (minlength:2). Piąta część to opcje dla select, radio i checkbox, rozdzielone przecinkiem. Obowiązkowa jest tylko etykieta: pusty typ oznacza text, a pustą nazwę narzędzie tworzy z etykiety bez polskich znaków (z „Imię i nazwisko” powstaje imie_i_nazwisko).

Jak działa generator formularza HTML

Generator czyta tekst linia po linii i dzieli każdą linię średnikami. Etykieta staje się tekstem widocznym dla użytkownika, nazwa trafia do atrybutu name, czyli do danych wysyłanych na serwer, a reguły zamieniają się na atrybuty pola. Każde pole dostaje <label for> powiązany z identyfikatorem field-nazwa, więc kliknięcie etykiety ustawia kursor w polu, a czytnik ekranu odczytuje jego nazwę.

Pola z opcjami działają inaczej niż pojedyncze. Lista select dostaje pustą pierwszą pozycję „— wybierz —”, dzięki której required wymusza świadomy wybór; bez opcji generator wstawia „Opcja 1” i „Opcja 2” i ostrzega o tym. Grupa radio lub checkbox z opcjami trafia do <fieldset> z <legend>, a nazwa grupy checkboxów dostaje końcówkę [], żeby backend odebrał wszystkie zaznaczone wartości. Przy polu file formularz dostaje sam enctype="multipart/form-data".

Do wyboru są trzy układy: pionowy (etykieta nad polem), poziomy (etykieta w kolumnie o szerokości 120–200 px obok pola) i siatka z 1–4 kolumnami, w której przycisk zajmuje całą szerokość. Opcjonalnie dołączysz prosty CSS przypisany do identyfikatora formularza: formularz o szerokości do 640 px, pola na całą jego szerokość, a w układzie poziomym i siatce jedna kolumna na ekranach węższych niż 600 px. Nad kodem narzędzie pokazuje liczbę pól, pól wymaganych, rozmiar kodu w bajtach i liczbę linii, a pod nimi uwagi do sprawdzenia, np. powtórzoną nazwę pola, pusty action albo plik wysyłany metodą GET.

Przykład krok po kroku

1. Wypisz pola formularza kontaktowego: imię, e-mail, telefon, wiadomość i zgoda. To 5 linii definicji.
2. Wpisz linie z typami i regułami: Imię; text; imie; required|minlength:3|maxlength:40, Email; email; email; required|autocomplete:email, Telefon; tel; telefon; autocomplete:tel|pattern:[0-9]{9}, Wiadomość; textarea; wiadomosc; maxlength:500|rows:6, Zgoda na kontakt; checkbox; zgoda; required. Progi 3, 40 i 500 to przykładowe wartości – narzędzie nie narzuca własnych.
3. Policz atrybuty walidacji: 3 w polu imienia i po 1 w czterech pozostałych, razem 7. autocomplete i rows nie walidują, tylko podpowiadają dane i ustawiają wysokość pola.
4. Wygeneruj kod. Kafelki pokażą 5 pól, 3 wymagane (imię, e-mail, zgoda) i 23 linie kodu bez CSS: znacznik <form>, po 4 linie na każde pole, przycisk i zamknięcie formularza.
5. Wybierz układ. W siatce z 2 kolumnami 5 pól ułoży się w 3 rzędy (2 + 2 + 1), a przycisk trafi pod nie na całą szerokość.
6. Wpisz w ustawieniach adres action, np. /kontakt, zostaw metodę POST i sprawdź w podglądzie, co się stanie po kliknięciu przycisku z pustymi polami. Obsługę wysyłki, ponowną walidację i token CSRF dodaj po stronie serwera.

Gotowe linie dla typowych pól

Przecinek w step:0,01 generator zamienia na kropkę, bo tylko taki zapis rozumie przeglądarka. Przeglądarka dopasowuje pattern do całej wartości, więc [0-9]{9} odrzuci zarówno 8, jak i 10 cyfr.

Praktyczne wskazówki

• Nazwy pól zapisuj bez spacji i polskich znaków. Atrybut name trafia do zapytania i do kodu backendu, więc imie i wiadomosc działają przewidywalniej niż wersje z ogonkami; przy spacji w nazwie generator pokaże uwagę.
• Etykietę pisz po polsku i konkretnie, bo widzi ją użytkownik. Nazwę trzymaj techniczną i krótką, bo widzi ją serwer.
• Każda nazwa powinna wystąpić raz. Przy powtórce zdublują się identyfikatory pól, a PHP odczyta tylko ostatnią wartość.
• Zaczynaj od pól najłatwiejszych. Krótkie pole tekstowe obniża próg wejścia, a pytania wymagające namysłu przenieś na koniec.
• Bez dołączonego CSS układ pionowy zależy od stylów twojej strony: etykieta i pole są elementami liniowymi i bez reguły display: block mogą stanąć obok siebie.
• pattern wpisuj jako ostatnią regułę, bo wyrażenie regularne może zawierać pionową kreskę. Przetestuj je w podglądzie na poprawnej wartości, wartości z myślnikami i ciągu zupełnie niepasującym.
• Nowe przeglądarki interpretują pattern w trybie flagi v, w którym myślnik i nawiasy wewnątrz klasy znaków trzeba poprzedzić ukośnikiem. Zapis [0-9 +-] bywa przez to odrzucony i pole przestaje być sprawdzane.

Czego narzędzie nie uwzględnia

• Logiki warunkowej. Generator nie pokazuje ani nie ukrywa pól w zależności od wcześniejszych odpowiedzi; taki formularz wymaga własnego JavaScriptu.
• Obsługi wysyłki i tokena CSRF. Kod zawiera action i metodę, ale odbiór danych, zapis i wysłanie e-maila musi zrobić serwer, który generuje też ukryte pole z tokenem.
• Kontroli poprawności pattern. Źle napisane wyrażenie regularne przejdzie do kodu bez ostrzeżenia i zacznie blokować poprawne dane albo przepuszczać błędne.
• Sum kontrolnych i ochrony przed spamem. NIP czy PESEL sprawdzisz w przeglądarce tylko co do długości i cyfr, a przeciw botom potrzebne jest ukryte pole-pułapka lub CAPTCHA.
• Wymagania zaznaczenia w grupie checkboxów. Przeglądarka nie wymusi wyboru co najmniej jednej opcji, dlatego generator usuwa tam required i ostrzega, że trzeba to sprawdzić na serwerze.