Generator formularza HTML

Formularz z walidacją i układem

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Pola (etykieta; typ; nazwa; reguły)

action

method

Układ

Kolumny (siatka)

Tekst przycisku

Pól: 3 Rozmiar: 546 B

Podgląd

Kod HTML

<form id="contact" action="/submit" method="post">
  <div class="form-group">
    <label for="field-name">Imię</label>
    <input type="text" id="field-name" name="name" required>
  </div>
  <div class="form-group">
    <label for="field-email">Email</label>
    <input type="email" id="field-email" name="email" required>
  </div>
  <div class="form-group">
    <label for="field-message">Wiadomość</label>
    <textarea id="field-message" name="message" rows="4" required></textarea>
  </div>
  <button type="submit">Wyślij</button>
</form>

Typy pól: text, email, tel, number, date, password, url, file, textarea, select, checkbox, radio. Reguły oddzielaj pionową kreską, np. required|minlength:2. Dodaj własny CSS, aby dopasować wygląd do strony.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator formularza HTML

Formularz to najważniejszy element konwersji. Powinien być krótki, czytelny i zawierać walidację, która wyłapuje błędy zanim trafią na serwer.

Typy pól

Typ	Zastosowanie
text, email, tel	dane kontaktowe
number, date	wartości liczbowe i daty
textarea	dłuższe wypowiedzi
select, checkbox, radio	wybór opcji
file, password, url	pliki i dane poufne

Walidacja HTML5

Atrybuty required, minlength, maxlength, min, max i pattern sprawdzają dane po stronie przeglądarki. To pierwsza linia obrony — serwer musi walidować ponownie.

Format definicji pola

Każda linia to etykieta; typ; nazwa; reguły, np. Email; email; email; required. Reguły rozdzielaj pionową kreską.

Najczęstsze pytania

Czy walidacja HTML5 wystarczy?

Nie. Zawsze waliduj dane po stronie serwera — klient można łatwo ominąć.

Etykieta nad polem czy obok?

Nad polem (układ pionowy) jest czytelniejsza i lepiej działa na mobile. Układ poziomy oszczędza miejsce.

Jak dodać CSRF?

Token CSRF zależy od frameworka — dodaj ukryte pole w backendzie, nie w statycznym HTML.

Generator formularza HTML

Powiązane narzędzia

Generator formularza HTML

Typy pól

Walidacja HTML5

Format definicji pola

Najczęstsze pytania

Zobacz też — powiązane narzędzia