Kreator Formularzy

Wstęp

Kreator formularzy jest kluczowym elementem iform4u. To tutaj tworzone i aktualizowane są formularze. Kreator formularzy zapewnia niezbędne narzędzia do dodawania i usuwania pól, podobnie jak innych elementów HTML.

Interfejs użytkownika

Interfejs Kreatora Formularzy jest podzielony na trzy obszary: Po lewej stronie pola formularza, po prawej projektant motywu, a pośrodku podgląd formularza.

Lewy panel zawiera trzy zakładki:

• Zakładka Pola wyświetla wszystkie pola i elementy, które można dodać do formularza. Po prostu przeciągnij i upuść je w odpowiednim obszarze.
• Zakładka Ustawienia umożliwia ustawienie nazwy formularza, układu formularza (położenie etykiet) oraz wyłączenie wszystkich pól.
• Zakładka Kod pozwala zobaczyć w czasie rzeczywistym kod HTML generowany za pomocą Kreatora formularzy. Stąd możesz rozpoznać każdy identyfikator elementu, aby manipulować formularzem w bardziej zaawansowany sposób. Przycisk „Kopiuj” umożliwia łatwe skopiowanie całego kodu źródłowego.

Środkowy obszar to Podgląd formularza, w którym można manipulować każdym komponentem.

Prawy panel to Projektant motywów , w którym możesz dostosować wygląd i sposób działania formularza:

• Tła: zmień tło różnych elementów formularza.
• Typografia: wybierz czcionkę, styl, rozmiar i kolor wszystkich elementów tekstowych w formularzu.
• Obramowania: Ustaw grubość, styl i kolor obramowań wokół określonych elementów formularza.
• Cienie: dodaj lub usuń cień wokół formularza.
• Przyciski: Zmień tekst przycisku Prześlij.
• I wiele więcej!

- Dodaj pole

Pole można dodać na dwa sposoby:

1. Kliknięcie widżetu na lewym panelu. To wszystko! Komponent formularza pojawi się w Twoim formularzu, poniżej wszystkich pozostałych komponentów.
2. Lub, jeśli chcesz dodać pole w określonym miejscu docelowym.
   • Kliknij widżet na lewym panelu i przeciągnij go do prawego obszaru.
   • W momencie wejścia do aktywnego obszaru Konstruktora Formularzy, pole wskaże, gdzie zostanie umieszczone Pole.
   • Po umieszczeniu go w odpowiednim miejscu upuść przycisk.

- Edytuj pole

Aby edytować pole:

1. Kliknij pole, które chcesz edytować, a pojawi się wyskakujące okienko z informacjami o polu
2. Edytuj informacje zgodnie ze swoimi wymaganiami.
3. Kliknij Zapisz.

Uwaga: naciśnięcie ESC spowoduje zamknięcie wyskakujących okienek.

- Zmień kolejność pól

Aby zmienić kolejność pola (komponentu):

1. Kliknij komponent i przytrzymaj
2. Przeciągnij komponent w górę lub w dół, zgodnie ze swoimi wymaganiami.
3. W zależności od tego, gdzie przeciągniesz komponent, pojawi się aktywna strefa, w której komponent zostanie umieszczony.
4. Po umieszczeniu w wymaganym miejscu zwolnij element.

- Przeciągnij pola, aby utworzyć kolumny

Aby utworzyć kolumny z polem (komponentem):

1. Kliknij widżet na lewym panelu i przeciągnij go na kanwę kreatora formularzy.
2. Przeciągnij go w lewo lub w prawo od istniejącego pola.
3. Ramka wskaże, gdzie zostanie umieszczone pole.
4. Po umieszczeniu go w odpowiednim miejscu upuść widżet.

W kreatorze formularzy możesz przeciągnąć istniejące pola do „strefy upuszczania kolumn” — kreator automatycznie zmieni wówczas rozmiar wszystkich pól w strefie upuszczania, aby utworzyć kolumny o równej szerokości.

Za pomocą tej metody możesz utworzyć aż cztery kolumny. Możesz jednak zaprojektować formularze z/do 12 kolumn, które idealnie pasują do przestrzeni dostępnej w Twojej witrynie, korzystając z Container Css Class .

- Skopiuj pole

Aby skopiować pole (komponent):

1. Kliknij komponent i przytrzymaj.
2. Kliknij przycisk „Kopiuj” w wyskakującym oknie

Zauważysz, że skopiowane pole pojawi się pod oryginalnym polem.

- Usuń pole

Aby usunąć pole (komponent):

1. Kliknij komponent i przytrzymaj.
2. Przeciągnij go poza aktywną strefę.
3. Uwolnienie.

Zauważysz, że komponent zniknął.

- Skopiuj identyfikator pola

Aby skopiować identyfikator pola, wykonaj następujące kroki:

1. Kliknij komponent i przytrzymaj.
2. Kliknij 3 pionowe kropki (w nagłówku Popover)
3. Kliknij opcję Kopiuj identyfikator.

Teraz możesz wkleić go w innym miejscu, na przykład w niestandardowej wiadomości e-mail lub projekcie CSS.

Podstawowe ustawienia formularza

Klikając zakładkę Ustawienia Kreatora formularzy, uzyskasz dostęp do bardzo podstawowej wersji konfiguracji formularza. Stąd możesz:

1. Zmień nazwę formularza : Nazwa formularza ma rozpoznawać Formularz na stronach administracyjnych i jest również wyświetlana jako tytuł publicznej strony formularza w iform4u.
2. Zmień układ formularza: Układ formularza oparty jest na Bootstrap CSS i służy do lokalizowania pozycji etykiet na formularzu.
   • Układ pionowy wyświetla powyższe etykiety pól,
   • Układ Poziomy wyświetla etykiety po lewej stronie pola i
   • Układ Inline ukrywa etykiety i wyświetla pola obok siebie. Można go na przykład użyć w formularzu rejestracji poczty, aby umieścić pole e-mail i przycisk z boku.
3. Wyłącz elementy formularza : umożliwia wyłączenie wszystkich pól formularza. Jest to zaawansowana opcja, która może być przydatna jeśli planujesz interakcję z formularzem z zewnętrznego pliku javascript.

Te podstawowe opcje są ściśle powiązane z kreatorem formularzy. Jednakże dostępne są inne, znacznie bardziej zaawansowane opcje konfiguracji, do których można uzyskać dostęp z Menedżera formularzy .

Ustawienia pola

Każde pole formularza ma wiele opcji ustawień, np. etykietę, wartość domyślną, klasę CSS itp. Aby skonfigurować pole, przejdź do podglądu i kliknij na nim.

Opcje konfiguracji

Następnie wszystkie opcje konfiguracji zostaną pokazane w kolejności alfabetycznej. Nie wszystkie znajdują się we wszystkich polach, ale jeśli masz jakiś problem, użyj tej listy jako punktu odniesienia.

- Zaakceptuj:

Opcja ta znajduje się w polu Przesyłanie pliku. Dzięki niemu możesz ograniczyć typ plików akceptowanych przez pole. Powinieneś rozważyć następujące kwestie

• Należy dodać rozszerzenia plików zaczynając od kropki i oddzielając je przecinkami.
• Domyślnie wszystkie pliki zostaną sprawdzone i akceptowane będą wyłącznie pliki graficzne z rozszerzeniem „.gif, .jpg, .png”.
• Na przykład, aby akceptować pliki tekstowe, możesz zmienić tę opcję na: „.doc, .docx, .txt”.
• Jeśli chcesz akceptować wszystkie typy plików, musisz pozostawić to pole puste.
• Opcja ta włącza atrybut 'accept' ze standardu HTML5, dzięki czemu walidacja pola odbywa się zarówno po stronie klienta (przeglądarki), jak i serwera.

- Alias:

Opcja Alias ​​umożliwia wysyłanie powiadomień elementu WebHook przy użyciu aliasu pola zamiast nazwy pola. Na przykład będziemy mogli ponownie wysłać dane POST, używając „imię” lub „wiek” zamiast „tekst_0” lub „liczba_0”.

- Pola wyboru:

Opcja Pola wyboru jest dostępna tylko w polach Checkbox i służy do dodawania pól wyboru do komponentu.

Na przykład wejdź do edytora zbiorczego i dodaj następujące „pola wyboru” i kliknij „Zapisz”:

First Choice|1
Second Choice|2|selected
Third Choice|3
Fourth Choice|4|selected
Fifth Choice|5

Podgląd formularza wyświetli komponent Checkbox z 5 polami wyboru: Pierwszy wybór, Drugi wybór, Trzeci wybór, Czwarty wybór i Piąty wybór. Pola wyboru „Drugi wybór” i „Czwarty wybór” zostaną zaznaczone. I na koniec, jeśli użytkownik wyśle ​​formularz bez wprowadzania żadnych zmian, wyśle ​​wartości: 2,4.

- Sprawdź DNS:

Ta opcja informuje aplikację, że w procesie sprawdzania poprawności pola e-mail sprawdza, czy domena e-mail naprawdę istnieje i czy zawiera rekordy „A” i „MX”.

Ostrożność! Jest to opcja zaawansowana i należy z niej korzystać ostrożnie. Weryfikacja może się nie powieść z powodu problemu z serwerami DNS, nawet jeśli jest to prawidłowy adres e-mail. Domyślnie jest wyłączona.

- Klasa CSS:

Pozwala dodać jedną lub więcej klas CSS do pola formularza.

- Klasa CSS kontenera:

Pozwala dodać jedną lub więcej klas CSS do kontenera całego komponentu.

Można tworzyć formularze wielokolumnowe , definiując klasęcol-xs-* (gwiazdka oznacza liczbę kolumn od 1 do 12).

Na przykład:

Jeśli chcesz umieścić dwa pola w dwóch kolumnach, musisz wykonać następujące czynności:

1. Dodaj klasę CSS kontenera do pierwszego pola: `col-xs-6
2. Dodaj klasę CSS kontenera do drugiego pola: `col-xs-6

W tym przykładzie używamy predefiniowanych klas CSS „bez dopełnienia”, aby usunąć dopełnienie, które Bootstrap CSS dodaje do kolumn. Możesz je dodać lub nie, zgodnie ze swoim projektem. Jeśli nie, możesz dodać kontenerową klasę CSS col-xs-12 do pozostałych pól, aby zachować to samo wypełnienie w każdym polu.

Ważny! Więcej informacji znajdziesz w dokumentacji CSS Bootstrap

Notatka:

• Domyślnie wszystkie pola oprócz Buttona mają klasę:form-group . Tej klasy nie można edytować.
• Domyślnie pole Button zawiera klasę:form-action . Tej klasy nie można edytować.

- Atrybuty niestandardowe:

Do pola można dodać atrybuty niestandardowe. Te atrybuty składają się z dwóch części: nazwy atrybutu i wartości atrybutu. Ta funkcja umożliwia tworzenie bardziej przystępnych formularzy, zwłaszcza że można jej użyć do dodania:

• Atrybuty danych : Przydatne do integracji pól formularzy z bibliotekami JavaScript
• Atrybuty Arii : Przydatne do lepszego opisywania pól formularzy i zapewniania większej dostępności.

- Wartość domyślna:

Możesz dodać wartość domyślną do pola. Ta wartość pojawia się domyślnie, ale użytkownik może ją zmodyfikować. Jeśli użytkownik prześle formularz bez zmiany wartości domyślnej, wartość ta zostanie pobrana w celu przetworzenia zgłoszenia.

- Wyłączony:

Możesz wyłączyć pole, jeśli chcesz, aby było wyświetlane użytkownikowi, ale nie mogło być edytowane. (Pamiętaj, że możesz także wyłączyć ukryte pole). W przeciwieństwie do opcji Tylko do odczytu, wyłączone pole nie jest wysyłane na serwer. Oznacza to, że informacje przechowywane w wyłączonym polu nie są odbierane i dlatego nie pojawiają się w Menedżerze zgłoszeń.

- Rozmiar pola:

Pole Obszar tekstowy pozwala na konfigurację jego rozmiaru. Rozmiar musi być liczbą całkowitą i wskazuje liczbę wyświetlanych wierszy, czyli inaczej wysokość pola. Domyślnie jest to 3.

- Tekst pomocy:

Tekst, który tu wpiszesz, pojawi się pod polem i często służy do przekazywania użytkownikom instrukcji, co należy w nim umieścić.

- Umieszczenie tekstu pomocy:

To rozwijane menu umożliwia przeniesienie tekstu pomocy powyżej lub poniżej pola formularza.

- Wbudowane:

Opcja Inline znajduje się w polach pola wyboru i przyciskach opcji i służy do zmiany pionowej pozycji pól wyboru lub przycisków opcji na pozycję poziomą.

- Typ wejścia:

Wiele pól umożliwia zmianę typu danych wejściowych, aby określić typ danych, które będziesz otrzymywać. Na przykład pole tekstowe może mieć typ wejściowy „URL”, aby mieć pewność, że wpisywany tutaj tekst będzie bezwzględnym adresem URL zaczynającym się od liter „http”.

- Tylko liczba całkowita:

Możesz włączyć tę opcję, jeśli chcesz, aby wartość tego pola była wyłącznie liczbą całkowitą. Jeśli użytkownik wprowadzi liczbę zmiennoprzecinkową, formularz nie zostanie przetworzony i zamiast tego pojawi się błąd sprawdzania poprawności.

- Wzór liczb całkowitych:

To zaawansowana opcja pola liczbowego, która pozwala dostosować wyrażenie regularne, które akceptuje tylko liczby całkowite (0-9) i będzie używane w procesie sprawdzania poprawności formularza. Domyślnie używanym wyrażeniem regularnym jest '/^\s[+-]?\d+\s$/';

- Etykieta

Jest to najczęstszy sposób informowania użytkownika o wartości, którą musi wpisać w polu. Zwykle jest on pokazywany na górze pola, ale możesz zmienić tę pozycję, zmieniając układ formularza.

- Etykieta klasy CSS:

Umożliwia dodanie jednej lub więcej klas CSS do etykiety. Pamiętaj, że jeśli chcesz ukryć etykietę, możesz dodać klasę CSS Bootstrap 3 „sr-only”.

Uwaga: Domyślnie wszystkie pola mają klasę CSS: etykieta-kontrolna. Zaleca się, aby go nie usuwać.

- Min. data:

Można zdefiniować datę jako minimalną datę, którą należy uwzględnić w procesie walidacji terenowej. Jeżeli użytkownik wprowadzi wcześniejszą datę, formularz nie zostanie wysłany, a zamiast tego pojawi się błąd walidacji. Jeśli ta opcja nie zostanie zdefiniowana, to ograniczenie nie będzie istnieć.

Data musi mieć następujący format: rrrr-mm-dd (standardowy format HTML5) w przypadku dat statycznych. Możesz także użyć tagów do sprawdzenia dat względnych:

• {today} : Dzisiaj jest minimalna data.
• {today:+1} : Jutro jest minimalny termin.
• {today:-1} : Wczoraj to minimalna data.

- Maksymalna data:

Można zdefiniować datę jako maksymalną datę braną pod uwagę w procesie walidacji terenowej. Jeżeli użytkownik wprowadzi późniejszą datę, formularz nie zostanie wysłany, a zamiast tego pojawi się błąd walidacji. Jeśli ta opcja nie zostanie zdefiniowana, to ograniczenie nie będzie istnieć.

Data musi mieć następujący format: rrrr-mm-dd (standardowy format HTML5) w przypadku dat statycznych. Możesz także użyć tagów do sprawdzenia dat względnych:

• {today} : Dziś jest maksymalna data.
• {today:+1} : Jutro jest maksymalny termin.
• {today:-1 }: Wczoraj jest maksymalna data.

- Minimalna liczba:

Można zdefiniować liczbę całkowitą lub zmiennoprzecinkową jako minimalną liczbę braną pod uwagę w procesie sprawdzania poprawności pola. Jeżeli użytkownik wprowadzi niższą liczbę, formularz nie zostanie wysłany, a zamiast tego pojawi się błąd walidacji. Jeśli ta opcja nie zostanie zdefiniowana, to ograniczenie nie będzie istnieć.

- Maksymalna liczba:

Można zdefiniować liczbę całkowitą lub zmiennoprzecinkową jako maksymalną liczbę braną pod uwagę w procesie sprawdzania poprawności pola. Jeżeli użytkownik wprowadzi większą liczbę, formularz nie zostanie wysłany, a zamiast tego pojawi się błąd walidacji. Jeśli ta opcja nie zostanie zdefiniowana, to ograniczenie nie będzie istnieć.

- Minimalny rozmiar:

Można zdefiniować liczbę całkowitą jako minimalną wielkość braną pod uwagę w procesie walidacji pola. Jeżeli użytkownik prześle plik o mniejszym rozmiarze niż zdefiniowany przez Ciebie, formularz nie zostanie wysłany, a zamiast tego pojawi się błąd walidacji. Jeśli ta opcja nie zostanie zdefiniowana, to ograniczenie nie będzie istnieć.

Liczba całkowita reprezentuje liczbę dozwolonych bajtów. Przykładowo Min Size: 10311680 (wynikający z pomnożenia 1024 x 1024 x 5), minimalny rozmiar pliku powinien wynosić 5MB.

- Maksymalny rozmiar:

Można zdefiniować liczbę całkowitą jako maksymalny rozmiar, który będzie brany pod uwagę w procesie walidacji pola. Jeżeli użytkownik prześle plik o rozmiarze większym niż zdefiniowany przez Ciebie, formularz nie zostanie wysłany, a zamiast tego pojawi się błąd walidacji. Jeśli ta opcja nie zostanie zdefiniowana, to ograniczenie nie będzie istnieć.

Liczba całkowita reprezentuje liczbę dozwolonych bajtów. Przykładowo Max Size: 10311680 (wynikający z pomnożenia 1024 x 1024 x 5), maksymalny rozmiar pliku powinien wynosić 5MB.

- Minimalna długość:

Można zdefiniować liczbę całkowitą jako minimalną długość ciągu wejściowego. Jeśli nie jest ustawiony, oznacza to brak minimalnego limitu długości.

- Maksymalna długość:

Można zdefiniować liczbę całkowitą jako maksymalną długość ciągu wejściowego. Jeśli nie jest ustawiony, oznacza to brak limitu maksymalnej długości.

- Minimalne pliki:

Można zdefiniować liczbę całkowitą jako minimalną liczbę plików, które użytkownik końcowy musi przesłać, aby przejść weryfikację.

- Maksymalna liczba plików:

Można zdefiniować liczbę całkowitą jako maksymalną liczbę plików, które użytkownik końcowy musi przesłać, aby przejść weryfikację. Użyj tej funkcji, aby umożliwić wielokrotne przesyłanie z tym samym polem pliku .

- Maksymalna długość:

Można zdefiniować liczbę całkowitą jako maksymalną liczbę plików, które użytkownik końcowy musi przesłać, aby przejść weryfikację.

- Wiele:

Ta opcja wskazuje, że użytkownik może wprowadzić wiele wartości. Tę opcję znajdziesz w polach E-mail i Lista wyboru:

• Jeśli w polu E-mail została włączona opcja Wiele, możesz dodać kilka prawidłowych adresów e-mail oddzielonych przecinkami. Na przykład: ','.
• Jeżeli w polu Lista wyboru włączono opcję Wiele, można wybrać kilka opcji. Zebrane informacje będą miały format oddzielony przecinkami. Na przykład: „Opcja pierwsza, opcja druga”.

-Wzór liczbowy:

To zaawansowana opcja pola liczbowego, która umożliwia dostosowanie wyrażenia regularnego akceptującego dowolną liczbę i używanego w procesie sprawdzania poprawności formularza. Domyślnie używane wyrażenie regularne pasuje do liczby zmiennoprzecinkowej i opcjonalnie części wykładniczej (np. -1.23e-10): '/^\s[-+]?[0-9].?[0-9]+( [eE][-+]?[0-9]+)?\s*$/'.

- Opcje:

Opcja Opcje znajduje się tylko w polach Lista wyboru i służy do dodawania opcji wyboru do komponentu.

Na przykład, jeśli w polu Opcje wyskakującego formularza wpiszesz:

One|1
Two|2|select
Three|3
Four|4
Five|5

Podgląd formularza wyświetli pole z tekstem „Dwa”. A jeśli użytkownik prześle formularz bez wprowadzania żadnych zmian, wyśle ​​​​wartość: 2.

- Wzór

Jest to opcja zaawansowana, która umożliwia dodanie do pola wyrażenia regularnego, które będzie wykorzystywane w procesie Walidacji Formularza. Jeżeli wartość wysłana przez użytkownika nie będzie pasować do tego wzorca, formularz nie zostanie przetworzony i zamiast tego pojawi się błąd walidacji.

- Element zastępczy

Jest to alternatywny sposób opisania wartości, którą użytkownik musi wpisać w polu. Domyślnie symbol zastępczy pojawia się w polu do czasu, aż użytkownik zacznie wprowadzać dane.

- Radia:

Opcja Radia jest dostępna w komponentach Przycisku radiowego i służy do dodawania przycisków radiowych do formularza.

Na przykład, jeśli klikniesz Edytor zbiorczy i wprowadzisz następujące opcje:

One|1
Two|2|selected
Three|3
Four|4
Five|5

Podgląd formularza wyświetli pięć przycisków opcji ze słowami: Jeden, Dwa, Trzy, Cztery i Pięć. Wybrana zostanie opcja Dwa. Następnie, jeśli użytkownik prześle formularz bez dokonywania zmian, wyśle ​​wartość: 2

- Tylko do odczytu:

Po włączeniu tej opcji pole będzie widoczne dla użytkownika, ale nie będzie on mógł go edytować. Informacje zawarte w polu Tylko do odczytu są odbierane i sprawdzane przez serwer po przesłaniu formularza. Zostaną one również odebrane przez Menedżera zgłoszeń.

- Wymagany

Ta właściwość pozwala mieć pewność, że użytkownik wypełni określone pole przed wysłaniem formularza. Jeśli użytkownik prześle formularz z pustym wymaganym polem, formularz nie zostanie przetworzony i zamiast tego wyświetli się komunikat o błędzie. Domyślnie etykiety wymaganych pól są oznaczone czerwoną gwiazdką po prawej stronie.

- Numer kroku:

Dzięki tej opcji możesz ustawić atrybut „krok” HTML5 w polach Liczba i Data. Atrybut „step” określa prawidłową liczbę, która ma być używana jako interwał podczas zmiany wartości tego pola za pomocą kontrolerów przeglądarki. Nowoczesne przeglądarki rozpoznają ten atrybut.

Ważny! Jeśli w polu Liczba włączona jest opcja „Tylko liczba całkowita”, zaleca się ustawienie „Numeru kroku” na 1.

- Unikalny:

Opcja ta umożliwia sprawdzenie, czy informacje wpisane w to pole są unikalne i nie były wcześniej podawane. Przydatne w przypadku list mailingowych i formularzy rejestracyjnych, gdzie często konieczne jest uniemożliwienie użytkownikom wielokrotnego wprowadzania tych samych informacji.

Typy pól

- Kierunek

Nagłówki służą do oznaczania sekcji formularza, a także do nadania mu tytułu. Na przykład, gdy wejdziesz do Kreatora formularzy, aby go utworzyć, zobaczysz nagłówek (h3) z tekstem „Formularz bez tytułu”. Aby zmodyfikować ten tekst, po prostu na niego kliknij. Natychmiast pojawi się formularz ze wszystkimi opcjami jego dostosowania.

- Ust

Akapity to komponenty używane do uzupełniania formularza. Możesz na przykład ich użyć, aby zaprosić użytkowników do wypełnienia formularza lub udzielenia wskazówek. Gdy wejdziesz do Konstruktora formularzy, aby go utworzyć, zobaczysz akapit z tekstem „To jest mój formularz. Proszę go wypełnić. Dziękuję!” Aby zmodyfikować ten tekst, po prostu na niego kliknij. Natychmiast pojawi się formularz ze wszystkimi opcjami jego dostosowania.

- Pole tekstowe

Pole tekstowe to komponent pozwalający na wpisanie tylko jednej linii tekstu. Przeglądarki internetowe traktują pole tekstowe jako standardowe pole domyślne, inne bardziej wyspecjalizowane, takie jak adres URL lub kolor. Pole tekstowe może zawierać pięć różnych typów danych wejściowych, z których każdy służy w inny sposób do sprawdzania poprawności danych. Pięć typów to:

• Tekst : jest to domyślny typ tego komponentu. I to taki, który jest powszechnie stosowany w formularzach, ponieważ nie oferuje żadnej walidacji i akceptuje wszystkie dane przesłane przez użytkownika. Jeżeli przeglądarka nie rozpoznaje innego typu, zamiast tego wyświetli się takie pole.
• Url : ten typ został wprowadzony przez HTML5 i obecnie akceptują go nowoczesne przeglądarki. Użyj typu adresu URL, jeśli chcesz zbierać bezwzględne adresy URL rozpoczynające się od „http”.
• Kolor : ten typ został wprowadzony przez HTML5 i nowoczesne przeglądarki, które go akceptują, po kliknięciu automatycznie wyświetla paletę kolorów. Użyj typu Kolor, jeśli chcesz, aby zbierane dane były szesnastkową wartością koloru, zaczynającą się od znaku „#”. Na przykład „#FFFFFF”.
• Tel : ten typ został wprowadzony przez HTML5 i obecnie akceptują go nowoczesne przeglądarki. Użyj tego typu, jeśli zbierane dane to numer telefonu.
• Hasło : Wszystkie przeglądarki rozpoznają ten typ wpisu. Użyj tego typu wpisu, jeśli chcesz, aby użytkownik wprowadził dane, które nie są wyświetlane na ekranie. Należy pamiętać, że iform4u nie jest przeznaczony do przechowywania haseł, głównie dlatego, że dane są przechowywane w postaci zwykłego tekstu. W razie potrzeby należy zachować ostrożność podczas korzystania z tego typu danych wejściowych.

- Pole liczbowe

Pole liczbowe to komponent używany do gromadzenia liczb jako treści. Zgodnie ze standardem HTML5 komponent ten może być dwojakiego rodzaju:

• Liczba : jest to typ, którego należy użyć, gdy użytkownik ma wpisać numer. Możesz na przykład zapytać: „Ile masz lat?” Jeśli użytkownik wprowadzi „Pięć lat”, zostanie powiadomiony, że musi wpisać tylko cyfry: w tym przypadku 5.
• Zakres : ten typ wpisu jest również używany do gromadzenia danych liczbowych, ale w przeciwieństwie do Number, nowoczesne przeglądarki wyświetlają suwak, za pomocą którego użytkownik może wprowadzić swoje dane. Możesz na przykład zapytać: „Od 1 do 10, jak dobry jesteś z matematyki?” W zależności od sposobu przeciągnięcia suwaka wartość będzie wyższa lub niższa.

W przeciwieństwie do komponentów tekstowych, komponenty liczbowe oferują wiele różnych opcji sprawdzania poprawności. Na przykład Integer Only wskazuje, że pole musi gromadzić wyłącznie liczbowe dane w postaci liczb całkowitych: Wartości dziesiętne nie są akceptowane! Możesz także ustawić minimalną i maksymalną liczbę do wprowadzenia i więcej. Wszystkie te opcje są zgodne ze standardem HTML5 i są również sprawdzane na serwerze.

- Pole daty

Pole daty to komponent służący do zbierania prawidłowych dat. Pola daty zostały wprowadzone przez HTML5 i nowoczesne przeglądarki, które je rozpoznają, wyświetlają kalendarz po kliknięciu na pole. Ten komponent może mieć 5 różnych typów danych wejściowych:

• Data : typ danych wejściowych, którego należy używać, jeśli chcesz zbierać daty. Musisz mieć format: rrrr-mm-dd.
• DateTime-Local : Typ danych wejściowych, który ma być używany, jeśli chcesz zbierać daty i godziny. Gromadzone dane będą miały standardowy format ISO: rrrr-mm-ddThh:mm:ss.
• Czas : typ danych wejściowych, który ma być używany, jeśli chcesz zbierać czasy w formacie: gg:mm:ss.
• Miesiąc : ten typ wpisu jest obsługiwany przez nowoczesne przeglądarki i powinien być używany, jeśli chcesz, aby użytkownik wybrał miesiąc lub miesiąc i rok. Format wejściowy to rrrr-mm.
• Tydzień : Ten typ wpisu jest obsługiwany przez nowoczesne przeglądarki i powinien być używany, jeśli chcesz, aby użytkownik wybrał tydzień roku w formacie liczbowym.

Uwaga: w rzeczywistości niektóre nowoczesne przeglądarki nie wyświetlają jeszcze narzędzia Datepicker, gdy pole jest datą. Ale w przyszłości wszyscy to zrobią. Na razie przeglądarki, które tego nie obsługują, to Safari, Firefox i poprzednie wersje IE. W takich przypadkach możemy użyć widgetu Datepicker jQuery UI jako rozwiązania awaryjnego.

- Pole e-mail

Pole e-mail służy do zbierania prawidłowych e-maili. Domyślnie sprawdza, czy tekst zawiera „@” i „.” plus dwa lub więcej znaków dla domeny e-mail. Ponadto musisz użyć tego pola, aby wysyłać powiadomienia, których nadawcami są wiadomości e-mail użytkowników (Reply-To).

Zaawansowaną opcją tego pola jest możliwość weryfikacji DNS poczty w celu potwierdzenia, że ​​domena rzeczywiście istnieje i posiada rekord A oraz MX. Należy zachować ostrożność, aby weryfikacja ta mogła się nie powieść z powodu problemów z serwerami DNS, nawet jeśli poczta jest ważna. Domyślnie ta opcja jest wyłączona.

- Obszar tekstowy

Obszar tekstowy to komponent umożliwiający zebranie wielu wierszy tekstu z wieloma akapitami. Jest to odpowiednie pole, jeśli chcesz, aby użytkownicy tworzyli obszerny tekst. Możesz także zmienić niektóre ustawienia. Można na przykład zmienić wysokość obszaru tekstowego, aby wyświetlić użytkownikom więcej miejsca. Aby to zrobić, kliknij obszar tekstowy i zmień rozmiar pola, który domyślnie wynosi 3.

- Pole wyboru

Komponent Checkbox dodaje pola wyboru do formularza. Ten komponent udostępnia listę opcji z polem wyboru obok, dzięki czemu użytkownicy mogą zaznaczyć wszystkie, niektóre lub nic. Możesz go użyć, jeśli chcesz uzyskać kilka odpowiedzi, na przykład: Które z poniższych zdań to owoce?

Aby dodawać, edytować i usuwać pola wyboru, musisz kliknąć komponent. Następnie pojawi się formularz z polem „Pola wyboru”. Należy pamiętać, że każda linia tego pola reprezentuje inny wybór. Każdy wybór może składać się z trzech części: Etykiety, Wartości i Obrazu. Dodatkowo możesz je sprawdzić.

Możesz także wybrać narzędzie Edytor zbiorczy, aby wstawić opcje oddzielone pionową kreską lub rurociągiem. Format powinien być następujący: Etykieta|Wartość|wybrana. Druga i trzecia część tego formatu jest opcjonalna.

Na przykład kliknij opcję Edytor zbiorczy i dodaj następujące „pola wyboru”:

One|1
Two|2|selected
Three|3
Four|4|selected
Five|5

Podgląd formularza wyświetli 5 pól wyboru ze słowami Jeden, Dwa, Trzy, Cztery i Pięć. Wybrana zostanie opcja „Dwa” i „Cztery”. A jeśli użytkownik prześle formularz bez wprowadzania żadnych zmian, wyśle ​​wartości: 2,4.

Możesz także dodać obrazy lub ikony do pól wyboru, aby nadać formularzom bardziej dynamiczny charakter.

Aby wstawić zdjęcie na etykiecie pola wyboru, musisz dodać adres URL obrazu jako trzeci parametr ustawień pola wyboru. Na przykład, jeśli skonfigurujemy nasz komponent jako:

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Stworzymy pięć pól wyboru:

• One : Tworzy pole wyboru o wartości: „Jeden” i etykiecie: „Jeden”
• Two|2 : Tworzy pole wyboru o wartości: „2” i etykiecie: „Dwa”
• Three|3|selected : Tworzy pole wyboru o wartości: „3”, etykietę: „Trzy” i będzie domyślnie zaznaczone.
• Four|4|http://example.com/image-4.jpg : Tworzy pole wyboru o wartości: „4”, etykiecie: „Cztery”, a obok pola wyboru pojawi się obraz.
• Five|5|http://example.com/image-5.jpg|selected : Tworzy pole wyboru o wartości: „5”, etykietę: „Pięć”, a obraz pojawi się obok pola wyboru i będzie domyślnie zaznaczony.

Aby dodać ikony zamiast obrazów, należy zastąpić adresy URL obrazów jedynie klasami CSS ikon. Na przykład:glyphicon glyphicon-user , wyświetli ikonę użytkownika. Należy pamiętać, że domyślnie aplikacja posiada zestaw ikon Glyphicons Pro; możesz jednak użyć innych ikon, takich jak Font Awesome lub DevIcons. W tym celu wystarczy dodać czcionki do motywu CSS formularza.

Ważne: Aby dodać obraz lub ikonę do ustawień pola wyboru, musisz mieć dwa pierwsze parametry, nawet jeśli są takie same.

Uwaga: Pamiętaj, że możesz wyświetlać swoje pola wyboru w poziomie, aktywując atrybut „inline”.

- Przycisk radiowy

Przycisk radiowy to komponent pozwalający dodać do formularza grupę przycisków radiowych. Ten komponent udostępnia użytkownikom listę opcji, ale muszą wybrać tylko jedną z nich. Na przykład: Jaki jest Twój ulubiony kolor?

Aby dodawać, edytować i usuwać opcje, należy kliknąć komponent. Następnie pojawia się formularz z polem „Radio”. Należy pamiętać, że każda linia tego pola reprezentuje inną opcję. Każda linia może składać się z trzech części oddzielonych pionowym prętem lub rurociągiem. Format powinien być następujący: Etykieta|Wartość|wybierz. Druga i trzecia część tego formatu jest opcjonalna.

Na przykład, jeśli w polu „Radio” w wyskakującym formularzu wpiszesz:

One|1
Two|2|selected
Three|3
Four|4
Five|5

Podgląd formularza wyświetli 5 pól wyboru ze słowami Jeden, Dwa, Trzy, Cztery i Pięć. Wybrana zostanie opcja „Dwa”. A jeśli użytkownik prześle formularz bez wprowadzania żadnych zmian, wyśle ​​​​wartość: 2.

Ponadto od wersji 1.3 możesz dodawać obrazy lub ikony do przycisków opcji, aby nadać formularzom bardziej dynamiczny charakter.

Aby wstawić obraz na etykiecie przycisku opcji, musisz dodać adres URL obrazu jako trzeci parametr ustawień przycisku opcji. Na przykład, jeśli skonfigurujemy nasz komponent jako:

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Stworzymy pięć przycisków opcji:

• One : Tworzy przycisk opcji o wartości: „Jeden” i etykiecie: „Jeden”
• Two|2 : Tworzy przycisk opcji o wartości: „2” i etykiecie: „Dwa”
• Three|3|selected : Tworzy przycisk opcji o wartości: „3”, etykiecie: „Trzy” i będzie domyślnie wybrany.
• Four|4|http://example.com/image-4.jpg : Tworzy przycisk opcji o wartości: „4”, etykietę: „Cztery”, a obok przycisku opcji pojawi się obraz.
• Five|5|http://example.com/image-5.jpg|selected : Tworzy przycisk opcji o wartości: „5”, etykietę: „Pięć”, a obraz pojawi się obok przycisku opcji i będzie domyślnie zaznaczony.

Aby dodać ikony zamiast obrazów, należy zastąpić adresy URL obrazów jedynie klasami CSS ikon. Na przykład:glyphicon glyphicon-user , wyświetli ikonę użytkownika. Należy pamiętać, że domyślnie aplikacja posiada zestaw ikon Glyphicons Pro; możesz jednak użyć innych ikon, takich jak Font Awesome lub DevIcons. W tym celu wystarczy dodać czcionki do motywu CSS formularza.

Ważne: Aby dodać obraz lub ikonę do ustawień przycisku radiowego, musisz mieć dwa pierwsze parametry, nawet jeśli są takie same.

Uwaga: Pamiętaj, że możesz wyświetlić przycisk opcji w poziomie, aktywując atrybut „inline”.

- Wybierz listę

Lista wyboru to menu rozwijane, które pozwala użytkownikowi wybrać jedną lub kilka opcji, w zależności od wybranej konfiguracji. Główna różnica w stosunku do komponentu Przycisk radiowy polega na tym, że można dodać wiele opcji bez zmiany jego rozmiaru. Dlatego zaleca się jego użycie, gdy dostępnych jest wiele opcji, na przykład: Wybierz swój kraj pochodzenia?

Aby dodawać, edytować i usuwać opcje, należy kliknąć komponent. Następnie pojawia się formularz z polem „Opcje”. Należy pamiętać, że każda linia tego pola reprezentuje inną opcję. Każda linia może składać się z trzech części oddzielonych pionowym prętem lub rurociągiem. Format powinien być następujący: Etykieta|Wartość|wybrana. Druga i trzecia część tego formatu jest opcjonalna.

Na przykład dodaj następujące „Opcje”:

One|1
Two|2|selected
Three|3
Four|4
Five|5

Podgląd formularza wyświetli pole z tekstem „Dwa” i jeśli użytkownik prześle formularz bez wprowadzania żadnych zmian, wyśle ​​​​wartość 2.

Wybierz opcję Lista z grupami opcji ¶

Aby utworzyć grupę opcji<optgroup> , należy ująć tekst w podwójne nawiasy kwadratowe, na przykład:

[[Swedish Cars]]
Volvo
Saab
[[German Cars]]
Mercedes
Audi

- Ukryte Pole

Dodanie ukrytego pola do formularza spowoduje, że nie będzie ono widoczne w formularzu. Jednak ukryte pola są przydatne do obliczeń matematycznych lub wysyłają wartości domyślne bez zmiany interfejsu formularza.

Uwaga: Możesz dodać etykietę do ukrytego pola, aby wygodniej pracować w administrowaniu formularzami, na przykład aby tworzyć reguły warunkowe przy użyciu tego pola.

- Przesyłanie plików

Pole Przesyłanie pliku to komponent umożliwiający użytkownikom załączanie plików w przesyłanym formularzu. Po wysłaniu pliki pojawią się w szczegółowych informacjach o przesłaniu. Istnieją dwa szczegóły, które należy wziąć pod uwagę:

• Dozwolone typy plików : możesz ograniczyć typy plików, które można przesyłać w każdym polu pliku. Domyślnie dozwolone typy plików obrazów to: '.gif, .jpg, .png'. Aby zmodyfikować dozwolony typ pliku, należy kliknąć komponent i w wyświetlonym polu formularza „Akceptuj” zmienić dozwolone rozszerzenia plików, np. „.doc, . pdf , .txt”, aby zaakceptować pliki tekstowe.
• Ograniczenia rozmiaru : możesz ograniczyć rozmiar pliku, definiując minimalny lub maksymalny rozmiar każdego pola. Aby zmodyfikować dozwolony rozmiar pliku, kliknij komponent, a następnie rozwiń wyskakujący formularz, klikając link „Więcej”. Następnie zlokalizuj pola Rozmiar minimalny i Maksymalny i wprowadź cyfrę reprezentującą dozwoloną liczbę bajtów. Na przykład maksymalny rozmiar: 10311680 (wynikający z pomnożenia 1024 x 1024 x 5 = 5 MB).

- Fragment

Pole Fragment kodu HTML to zaawansowany komponent umożliwiający dodawanie kodu HTML do formularzy. Wyświetli się edytor Wysiwyg, który rozpoznaje skróty klawiaturowe i umożliwia szybkie stylizowanie kodu HTML.

Uważaj, wprowadzając prawidłowy kod HTML, w przeciwnym razie Kreator formularzy nie zapisze formularza i wyświetli komunikat o błędzie wskazujący linię kodu, w której popełniono błąd. Na przykład częstym błędem jest dodanie więcej jednego elementu HTML o tym samym identyfikatorze.

Aby dodać tabelę HTML, wprowadź link lub wyświetl obraz, najpierw musisz kliknąć przycisk Pełny ekran. Spowoduje to otwarcie edytora Wysiwyg nad Kreatorem formularzy, dzięki czemu zyskasz więcej miejsca na wprowadzenie wszystkich potrzebnych treści. Możesz także kliknąć przycisk Kod, aby wyświetlić zawartość jako kod HTML.

Uwaga: Chociaż możesz dodać kod CSS i JavaScript w formularzu. Nie jest to zalecane, w takich przypadkach można utworzyć motyw CSS i/lub załadować zewnętrzny plik JavaScript. Pamiętaj, że utworzony formularz jest także wyświetlany w Menedżerze zgłoszeń i jego kod może być niezgodny.

- reCaptcha ¶

Pole reCaptcha to zaawansowany komponent, który umożliwia wykorzystanie technologii Google do sprawdzenia, czy użytkownicy nie są botami i/lub spamerami. Możesz modyfikować konfigurację reCAPTCHA, na przykład zmieniając kolor motywu, typ captcha i rozmiar. Należy pamiętać, że komponent reCaptcha można dodać tylko na formularz.

Ważny! Przed dodaniem komponentu reCAPTCHA do swojego formularza musisz najpierw dodać klucze reCAPTCHA w konfiguracji witryny. W przeciwnym razie reCAPTCHA nie będzie działać. Jeśli formularz utworzyłeś przed dodaniem kluczy, musisz zaktualizować formularz.

- Przerwa strony

Pole Podział strony to zaawansowany komponent umożliwiający tworzenie formularzy wieloetapowych lub wielostronicowych. Do każdego utworzonego podziału strony dodasz nową stronę. Dodatkowo nad formularzem wyświetli się nagłówek informujący użytkownika, na jakim etapie się znajduje i ile kroków musi wykonać, aby wysłać formularz. Istnieją dwa szczegóły, które należy wziąć pod uwagę:

1. Komponent Podział strony dodaje dwa przyciski umożliwiające nawigację w formularzu. Możesz dostosować tekst na przycisku „Dalej” lub „Wstecz”, klikając komponent.
2. Kroki formularza: pojawiają się nad formularzem. Ustawienia:
   • Kliknij opcję Kroki formularza, aby sprawdzić jego ustawienia. Możesz zmienić tytuły każdego kroku w polu Kroki formularza. Każda linia odpowiada tytułowi.
   • Można określić wyświetlanie tylko tytułów lub kroków (liczb).
   • Możesz zmienić numery kroków za pomocą ikon glifikonów. Aby używać glifikonów etapami, należy dodać do każdej linii pól Kroków pionową kreskę lub rurkę, po której następuje „ikona-[nazwa ikony]”. Na przykład, jeśli chcę zastąpić cyfrę 1, zapisuję ją w pierwszej linii Kroków: „Krok bez tytułu|ikona-użytkownik”. Przejdź do Glifikony, aby wyświetlić nazwy ikon, których możesz użyć.
   • Możesz zmienić wygląd kroków na pasku postępu wskazującym procent, który został osiągnięty.
   • Na koniec możesz ukryć kroki formularza, zaznaczając opcję „Brak kroków formularza”.

Uwaga: Możesz przejść do konkretnej strony, dołączając numer strony do adresu URL, na przykład aby przejść do drugiej strony, dodaj ciąg zapytania „p=2”.

- Przekładka

Komponent Spacer umożliwia dodanie precyzyjnych odstępów w pionie pomiędzy polami w formularzach. Po prostu przeciągnij i upuść element odstępowy między polami i ustaw liczbę pikseli między nimi.

Opcje:

• Wysokość : Jest to przestrzeń określona przez liczbę pikseli.

- Podpis

Komponent Podpis umożliwia użytkownikom końcowym podpisywanie formularza — myszą lub palcem na iPadzie/smartfonie — swoim Johnem Hancockiem bezpośrednio na formularzu. Dzięki temu możesz bezpiecznie przechwytywać podpisy pod umowami, dokumentami prawnymi i innymi formularzami, w których potrzebujesz fizycznego autografu.

Istnieją dwa szczegóły, które należy wziąć pod uwagę:

1. Komponent Podpis dodaje dwa przyciski umożliwiające interakcje z kanwą. Możesz dostosować tekst przycisków „Wyczyść” i „Cofnij”, klikając komponent.
2. Ustawienia pola: Pole Podpis ma następujące opcje specjalne:
   • Wyczyść : Włącz/wyłącz przycisk „Wyczyść”. Gdy użytkownik końcowy kliknie przycisk „Wyczyść”, podpis zostanie usunięty. A płótno będzie czyste i będzie można zacząć od nowa.
   • Cofnij : Włącz/wyłącz przycisk „Cofnij”. Gdy użytkownik końcowy kliknie przycisk „Cofnij”, ostatnia kreska jego podpisu zostanie usunięta. Może dalej naciskać ten przycisk, aby krok po kroku cofnąć swój podpis.
   • Dodatkowo możesz zdefiniować szerokość i wysokość płótna, kolor ołówka, a także zmienić tekst przycisków pomiędzy innymi typowymi ustawieniami.

- Pole matrycy

Pole Matrix to zaawansowany komponent, umożliwiający grupowanie w tabeli wielu kontrolek formularzy z tym samym typem danych wejściowych. Możesz utworzyć pole macierzy z następującymi typami danych wejściowych:

• Przycisk opcji (domyślnie)
• Pole wyboru
• Wybierz opcję Lista
• Tekst
• Obszar tekstowy
• Numer
• Zakres (suwak)
• E-mail
• Tel (telefon)
• Adres URL
• Kolor
• Hasło
• Data
• Data i godzina — lokalnie
• Czas
• Miesiąc
• Tydzień

Wszystkie kontrolki formularza są w pełni konfigurowalne i w zależności od ich typu, zostanie zastosowana poprawność wprowadzonych danych.

Pole Matrix może zawierać dowolną liczbę pytań (wierszy) i odpowiedzi (kolumn), a następnie możesz ustawić różne wartości dla każdej odpowiedzi.

Specjalnym typem danych wejściowych dla macierzy jest Lista wyboru, ponieważ musisz dodać różne wartości (opcje), aby to zrobić, po prostu zaznacz „Wartości” i w każdym polu „Wartość” wpisz wartości oddzielone ukośnikiem („/”). Jeśli chcesz włączyć domyślną pustą opcję, musisz użyć ustawienia Symbol zastępczy.

Możesz także tworzyć pytania otwarte, dzięki odmianie wprowadzania tekstu każdy wiersz zawiera zestaw pól do wprowadzania tekstu. Ta odmiana wygląda i działa podobnie do pola tekstowego. To samo dotyczy innych pól wejściowych opartych na tekście, takich jak obszar tekstowy lub pola liczbowe.

Cechą szczególną pola Matrix jest możliwość ukrycia pytań. Wystarczy zaznaczyć opcję „Inline”, a pytania znikną. Możesz użyć tej funkcji, jeśli chcesz zadać tylko jedno pytanie w formacie tabelarycznym.

Uwaga : jeśli tabela jest bardzo duża, będziemy musieli dodać klasę „reagującą na tabelę” w ustawieniu „Klasa kontenera CSS”.

- Wynik Net Promoter Score (NPS)

NPS jest prawdopodobnie najważniejszym miernikiem satysfakcji i lojalności klientów do śledzenia, a teraz jest dostępny w iform4u.

iform4u NPS pomaga zbierać autentyczne opinie klientów, dzięki czemu naprawdę rozumiesz, jak działa Twoja organizacja. To sposób na rejestrowanie opinii klientów, poziomu ich zadowolenia i tego, czy Cię polecili.

Zapytaj ich o takie rzeczy jak:

„W skali od 1 do 10, jak prawdopodobne jest, że polecisz nas swoim znajomym?”

Daje to jakościowy wgląd w to, „dlaczego” Twoi klienci czują się w ten sposób, co zwykle działa lepiej niż ogólne, coroczne badania satysfakcji klienta.

Ten komponent pozwala dostosować pytanie, wyświetlić etykiety, tekst pomocy i nie tylko. Może być również wyświetlany jako przyciski lub przyciski opcji. Domyślnie projekt pokazuje przyciski. Po prostu usuń klasę CSS: ukryta i zamień klasę Css przycisku na: btn btn-label btn-nps.

- Przycisk

Pole przycisku jest komponentem umożliwiającym wysyłanie formularzy. O ile dodawanie jednego przycisku na formularz jest rzeczą normalną, nic nie stoi na przeszkodzie, aby dodać ich więcej, na przykład na początku i na końcu formularza. Ten komponent może być 3 typów:

• Prześlij : Aby przesłać formularz. Jest ona zaznaczona domyślnie.
• Resetuj : Aby zresetować formularz do wartości domyślnych.
• Obraz : wyświetla obraz na przycisku i podobnie jak Prześlij służy do przesłania formularza. Jeśli używasz tego typu przycisku, musisz dodać adres URL obrazu, a także usunąć klasę CSS.
• Przycisk : ten typ nie wysyła formularza, ale można go używać do interakcji z polami za pomocą JavaScript.

Do przycisków typu „Wyślij”, „Resetuj” i „Przycisk” możesz dodać ikonę, wpisując w atrybucie „Tekst przycisku” etykietę ikony. Na przykład:

<span class="glyphicon glyphicon-shopping-cart"></span> Buy Now!

Wyświetli Twój przycisk z ładną ikoną na początku:

Uwaga: Klasa CSS: „btn btn-primary” dodaje do przycisku domyślny wygląd. Przejdź do Bootstrap CSS, aby uzyskać więcej informacji.

Walidacja pola

Bardzo ważnym punktem do rozważenia jest sprawdzanie poprawności pola, które jest uruchamiane, gdy użytkownicy przesyłają formularz.

Walidacja terenowa to proces, w ramach którego sprawdza się, czy dane przesłane przez użytkowników spełniają określone wymagania. Na przykład pole daty wymaga, aby wartość wysyłana do serwera miała następujący format rrrr-mm-dd. Walidacja gwarantuje, że tak się stanie.

Należy pamiętać, że iform4u współpracuje ze standardowymi polami HTML5, więc zawsze możesz przejść do dokumentacji HTML5, aby uzyskać więcej informacji. Oprócz sprawdzania poprawności według typu pola mogą mieć inne wymagania, takie jak „Wymagane” i „Unikalne”.

Wiele z tych wymagań jest sprawdzanych u klienta za pomocą przeglądarki; ale wszystkie są sprawdzane na serwerze przez iform4u.