Elementy HTML5 dla formularzy i danych

Spisie treści
HTML5 zawiera nowe elementy ułatwiające tworzenie pól danych, które w wielu przypadkach musiały być zaprogramowane za pomocą javascript lub dodać zewnętrzną bibliotekę w języku, która pozwoliłaby rozszerzyć możliwości elementów xhtml i html4.
Wielu programistów nadal pracuje w tradycyjny sposób, ponieważ jest on obsługiwany przez większość przeglądarek, najnowsze ulepszenia są obsługiwane tylko przez nowsze wersje.
HTML5 oferuje zestaw nowych atrybutów dla atrybutu type elementu input, czyli większości elementów formularza, takich jak pola tekstowe.
Niektóre z tych dobrze znanych atrybutów HTML to:
Typ wprowadzania = tekst - Pole tekstowe
input type = password - Pole hasła, które ukrywa hasło z gwiazdkami.
Typ danych wejściowych = prześlij - przycisk do przesyłania formularzy
NUMER TYP REJESTR ATRYBUTÓW
Element, który zawiera atrybut type number, pozwala nie tylko określić, że wprowadzona wartość jest liczbowa, ale także ograniczyć ją pomiędzy maksimum a minimum, na obrazku widzimy jak również posiada walidację bez konieczności programowania czegokolwiek

Kod źródłowy przykładu do użycia tego atrybutu jest następujący
 Numer typu

Numer typu

Numer przejścia (1-40):
ATRYBUT TYPU DATY (DATA)
Atrybut typu daty jest używany dla pól, w których konieczne jest podanie daty. W zależności od przeglądarki i oferowanego wsparcia, kontrolka kalendarza będzie mogła wybrać datę.

TYP KOLORU ATRYBUT
Atrybut typu koloru jest używany dla pól, w których konieczne jest umieszczenie koloru. W zależności od przeglądarki i oferowanego przez nią wsparcia, kontrolka typu colorpicker będzie mogła wybrać kolor lub zapisać kolor w systemie szesnastkowym. Selektor pojawi się jako wyskakujące okienko po kliknięciu koloru.

Rodzaj koloru

Wybierz kolor:

ATRYBUT TYPU E-MAILA
Atrybut typu e-mail jest używany w polach, w których konieczne jest umieszczenie wiadomości e-mail. W zależności od przeglądarki i oferowanego przez nią wsparcia potwierdzi, że wprowadzony tekst ma format wiadomości e-mail, w przeciwnym razie pojawi się komunikat o błędzie, co ułatwi walidację formularza bez programowania.

Typ e-maila

Wprowadź e-mail:

ATRYBUT TYPU URL
Atrybut typu url jest używany dla pól, w których konieczne jest podanie domeny, adresu url. W zależności od przeglądarki i oferowanego przez nią wsparcia sprawdzi, czy wprowadzony tekst ma format domeny, ale pojawi się komunikat o błędzie, co ułatwi walidację formularza bez programowania. Nie musi zawierać http lub www, w takim przypadku, jeśli tego potrzebujemy, będziemy musieli zweryfikować go poprzez programowanie.

Typ adresu URL

Wprowadź e-mail:

ATRYBUTY I WŁAŚCIWOŚCI HTML5
1. Atrybut autouzupełniania
Kiedy piszemy w polu formularza, okazuje się, że generalnie przeglądarka daje nam opcję autouzupełniania tego, co piszemy w danym momencie, tekstem, którym już pisaliśmy wcześniej, może to powodować problemy z bezpieczeństwem, ponieważ na przykład, jeśli piszemy kilka e-maili, ponieważ komputer był używany przez innego użytkownika, moglibyśmy napisać, aby zobaczyć informacje, które wprowadził inny użytkownik. W przykładzie dezaktywujemy autouzupełnianie w mailu, ale nie w pozostałych polach. Można go również wyłączyć z poziomu przeglądarki, ale wielu użytkowników nie wie, czy istnieje taka opcja, ani jak wyłączyć autouzupełnianie.

Atrybut autouzupełniania

Nazwa:
E-mail:
Widzimy, że wpisując słowo Autouzupełnianie i przesyłając później ten sam formularz i naciskając tylko literę A, w tym przypadku sugeruje już słowo, które napisaliśmy wcześniej.

2. Atrybut autofokusa
Atrybut ten służy do wskazania, na którym wejściu formularza powinien znajdować się kursor podczas ładowania strony internetowej, jeśli go nie ma, rozpocznie się od pierwszego znalezionego. Można to również zaprogramować za pomocą jQuery, aby w razie potrzeby skupić się na różnych kontrolkach.

3. Atrybut formularza
Ten atrybut jest bardzo przydatny do zarządzania elementami poza formularzem, niezależnie od tego, gdzie się on znajduje w strukturze sieci.

Atrybut formularza

Produkt:
Opis:

Lorem Ipsum to po prostu fikcyjny tekst branży poligraficznej i składu tekstu.

Lorem Ipsum to po prostu fikcyjny tekst branży poligraficznej i składu tekstu.

Lorem Ipsum to po prostu fikcyjny tekst branży poligraficznej i składu.

Zbiory:
Widzimy w kodzie źródłowym HTML, że stworzyliśmy formularz do wprowadzenia danych produktu, następnie tekst objaśniający i na końcu umieszczamy pole tekstowe na stan magazynowy poza formularzem, ale odnosimy go do tego formularza poprzez jego identyfikator identyfikacyjny = "FormA" w polu tekstowym stock umieścimy, że odnosimy go do formularza formularz = "formA", w ten sposób podczas wysyłania formularza zostaną również wysłane wszystkie powiązane elementy.
4. Atrybut FormAction
Ten atrybut jest bardzo przydatny do wysyłania tego samego formularza na różne strony, coś, co wcześniej musiało być zaprogramowane w javascript i przesłać parametry wszystkich elementów formularza, aby móc go przesłać dalej, w niektórych przypadkach stało się to bardzo uciążliwe, zwłaszcza jeśli było wiele form, które były od siebie zależne.
Bierzemy przykład z poprzedniego przypadku z przyciskiem wysyłamy formularz na stronę record.php a z drugim na stock.php

Atrybut formularza

Produkt:
Opis:

Lorem Ipsum to po prostu fikcyjny tekst branży poligraficznej i składu.

Lorem Ipsum to po prostu fikcyjny tekst branży poligraficznej i składu tekstu.

Lorem Ipsum to po prostu fikcyjny tekst branży poligraficznej i składu tekstu.

Zdjęcie: Atrybut obrazu z prześlij Jeśli chcemy użyć obrazu jako przycisku przesłania do przesłania formularza, jedynym sposobem, aby to zrobić, było umieszczenie obrazu lub użycie arkuszy stylów css, a następnie wykonanie funkcjonalności za pomocą javascript.

Atrybut typu obrazu

Produkt:
Opis:

5. Atrybut listy i listy danych
Atrybut ten umożliwia zdefiniowanie listy w elemencie, a następnie zastosowanie jej do elementu wejściowego, aby wykonał wyszukiwanie podczas pisania.

Atrybut typu listy i listy danych

Widzimy, że podczas pisania tylko jednej litery w tym przypadku f, wyświetlana jest lista ze znalezionymi możliwościami, jest to bardzo przydatne, ponieważ filtruje dane, które zawiera datalist i może być również ponownie wykorzystana w innych kontrolkach lub elementach.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt

Będziesz pomóc w rozwoju serwisu, dzieląc stronę ze swoimi znajomymi

wave wave wave wave wave