Formularz jest elementem HTML, ponieważ pozwala nam na wprowadzanie danych a zatem także wchodzić w interakcję z siecią i jej bazą danych, co wymaga kontroli z punktu widzenia bezpieczeństwa, ponieważ z formularza możemy przesłać pliki na serwer w celu przetworzenia zamówienia lub płatności, wybierając różne elementy i kontrole formularza, które zostaną następnie przetworzone przez zdarzenie javascript lub inny język programowania internetowego.
Wielokrotnie programiści muszą korzystać z różnych bibliotek, aby móc wykonywać zadania w formularzach w celu kontrolowania zdarzeń, a w niektórych przypadkach musimy uciekać się do niepożądanych metod kodu, aby wysyłać dane, kontrolować wprowadzane dane, unikać wstrzyknięć kodu lub ataków XSS.
Jeśli chcemy przeprowadzić wszystkie te kontrole i zdarzenia, możemy znaleźć dużą liczbę plików javascript, które znacznie zwiększają wagę sieci w kb i spowalniają stronę. Jest to również niepewne, ponieważ jeśli ktoś wyłączy obsługę JavaScript, wszystkie kontrolki przestaną działać.
Elementy formularze i atrybuty w HTML5 zapewniają większy stopień kontroli i znaczników semantycznych niż jego poprzednia wersja, dodano atrybuty i właściwości, które eliminują potrzebę wykonywania kontroli zewnętrznie za pomocą skryptów. Funkcje formularzy w HTML5 zapewniają lepszą kontrolę i nie zależą od tego, czy w Twojej przeglądarce jest włączony czy wyłączony Javascript.
Atrybuty formularza HTML5 - symbol zastępczy
Za pomocą właściwość zastępcza Możemy wskazać przykładowy rodzaj danych, które mają zostać zarejestrowane, dzięki czemu możemy podać użytkownikowi informacje służące jako przewodnik. Ten tekst, który wskazujemy w kontrolce zniknie po wprowadzeniu znaku przez użytkownika.
Atrybutu placeholder można używać tylko w polach tekstowych lub w obszarach tekstowych.
Wzorce z wyrażeniami regularnymi w formularzach
Atrybut wzorca pozwala nam zdefiniować nasze reguły w celu walidacji danych, które użytkownik wprowadza za pomocą wyrażeń regularnych. Wyrażenie regularne to sekwencja znaków definiująca wzorzec danych, na przykład wzorzec [a-z] oznacza, że użytkownik może wprowadzać tylko małe litery lub wzorzec [0-9] oznacza, że można wprowadzać tylko liczby.
HTML5 pozwala na używanie wzorców, więc jeśli wprowadzone znaki nie pasują do automatycznie zdefiniowanego wzorca, wygeneruje błąd.
Idziemy do zdefiniuj pewne zasady za pomocą wzorów i arkuszy stylów zmienić kolor obramowania w przypadku wystąpienia nieprawidłowego zdarzenia, czyli tego, co wpisane przez użytkownika nie jest zgodne z tym, co jest zdefiniowane w określonym wzorcu.
Tworzymy plik Example01.html i piszemy następujący kod:
Wzorce z wyrażeniami regularnymi
Użytkownik
Klucz:
E-mail:
Data
Cena
Jeśli wyślemy formularz, zweryfikuje każde pole pod kątem zdefiniowanego wzorca, a jeśli nie jest spełniony, pokaże komunikat, który definiujemy w tagu title, użyje również stylów zdefiniowanych w regule i właściwościach CSS nieprawidłowej klasy używanej przez HTML5.
Na przykład wpisujemy niepoprawny adres e-mail:
Wpisujemy również nieprawidłową datę i widzimy, że nie pozwala to na wysłanie formularza. Jeśli chcemy poprawić lub dodać efekt wizualny, możemy użyć CSS, aby dodać ikonę tła w kontrolce, w której wystąpiła awaria. Na przykład dodajemy następujące style CSS do tych, które już mieliśmy, zmieniamy dane wejściowe na input [type = 'text'], aby arkusze stylów wpływały tylko na pola tekstowe, a nie na przycisk.
Używamy następujących ikon:
Przy każdej kontrolce dodajemy wymaganą właściwość, na przykład:
Wykonując przykład widzimy, że jeśli wyślemy formularz z pustymi polami, pokażą nam one wymagane i prawidłowe pola.
Zaletą wzorców jest to, że nie korzystamy z JQuery ani żadnego innego typu walidacji i jeśli ta opcja jest wyłączona w przeglądarce, ograniczenia i reguły, które definiujemy, będą nadal działać. Nie oznacza to, że przesyłając formularz unikamy kontroli podczas przetwarzania danych, czy zapisać w bazie danych, czy wysłać je pocztą lub wykonać jakąkolwiek operację.
Formularz z wieloma zgłoszeniami
Coś, co było skomplikowane do zrobienia, to wyślij ten sam formularz na dwie różne stronyZałóżmy, że pojedynczy formularz logowania, który po kliknięciu przycisku przejdzie do różnych stron, na których zmieniają się zapytania i proces informacyjny. Odbywa się to poprzez zdefiniowanie właściwość formacji, gdzie domyślnie wskazujemy inną opcję przetwarzania akcji.
Formularz z wieloma zgłoszeniami
Użytkownik:
Klucz:
Nie ma wątpliwości, że interakcja z tego typu właściwościami i atrybutami znacznie ułatwia tworzenie stron internetowych, bez konieczności korzystania z zewnętrznych bibliotek i skomplikowanych kodów javascript.
Jako projektanci i programiści zwykle stwierdzamy, że skrypt ma pewną monotonię, jeśli chodzi o strukturę html i walidację, zwłaszcza w celu napisania reguł walidacji, a następnie pokazania użytkownikowi, gdy wystąpi awaria. HTML 5 wprowadza te nowe atrybuty, typy danych wejściowych i inne elementy, dzięki czemu musimy pisać mniej kodu i skupiać się bardziej na semantyce niż na składni.
Zasady te działają we wszystkich przeglądarkach, niezależnie od systemu operacyjnego i nie musimy używać innych bibliotek ani hacków, aby dostosować się do różnych systemów lub urządzeń. Widzieliśmy kilka atrybutów formularzy, które pomagają poprawić wrażenia użytkownika i skrócić czas programowania. Niektóre atrybuty nie działają jeszcze we wszystkich przeglądarkach.
