W HTML jest ważnym elementem formularza HTML. Atrybut 'type' elementu wejściowego może mieć różne typy, co definiuje pole informacyjne. Takie jak daje pole tekstowe.

Poniżej znajduje się lista wszystkich typów elementów HTML.

HTML5 dodał nowe typy na elemencie. Poniżej znajduje się lista typów elementów HTML5

Poniżej znajduje się opis typów elementów wraz z przykładami.

1. :

elementy typu 'text' służą do zdefiniowania jednoliniowego wejściowego pola tekstowego.

Przykład:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Wyjście:

Wpisz typ „tekstu”:

The 'tekst' pole definiuje jednowierszowe pole tekstowe do wprowadzania danych.

Notatka: Domyślna maksymalna długość kahractera wynosi 20.

2. :

Element typu „hasło” umożliwia użytkownikowi bezpieczne wprowadzenie hasła na stronie internetowej. Wpisany tekst w polu hasła został przekonwertowany na '*' lub '.', tak aby inny użytkownik nie mógł go odczytać.

Przykład:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Wyjście:

Wpisz typ „hasła”:

The 'hasło' pole definiuje jednowierszowe pole hasła umożliwiające bezpieczne wprowadzenie hasła.

3. :

Element typu „prześlij” definiuje przycisk wysyłania umożliwiający przesłanie formularza na serwer po wystąpieniu zdarzenia „kliknięcie”.

Przykład:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Wyjście:

Wpisz typ „prześlij”:

Kliknięcie przycisku Wyślij spowoduje przesłanie formularza na serwer i przekierowanie strony działanie wartość. O atrybucie „akcja” dowiemy się w późniejszych rozdziałach

4. :

Typ „reset” jest również zdefiniowany jako przycisk, ale gdy użytkownik wykona zdarzenie kliknięcia, domyślnie resetuje wszystkie wprowadzone wartości.

Przykład:

 User id: Password: <br> <br> 

Wyjście:

Wpisz typ „resetu”:

Spróbuj zmienić wartości wejściowe identyfikatora użytkownika i hasła, a po kliknięciu resetowania pola wejściowe zostaną zresetowane do wartości domyślnych.

5. :

Typ „radio” definiuje przyciski opcji, które umożliwiają wybór opcji spośród zestawu powiązanych opcji. W danej chwili można wybrać tylko jedną opcję przycisku radiowego.

Przykład:

Prosimy wybrać swój ulubiony kolor

math.pow Java

Wyjście:

Wpisz typ „radio”.

Prosimy wybrać swój ulubiony kolor

6. :

Pole typu „checkbox” wyświetlane jest w postaci kwadratowych pól, które można zaznaczyć lub odznaczyć, aby wybrać opcję z podanych opcji.

Uwaga: Przyciski „radio” są podobne do pól wyboru, ale istnieje istotna różnica między obydwoma typami: przyciski opcji umożliwiają użytkownikowi wybranie tylko jednej opcji na raz, natomiast pole wyboru pozwala użytkownikowi wybrać od zera do wielu opcji na raz .

Przykład:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Wyjście:

Wpisz typ „pola wyboru”.

Formularz rejestracyjny

Prosimy wybrać swoje ulubione sporty

7. :

Typ „przycisk” definiuje prosty przycisk, który można zaprogramować tak, aby funkcjonalnie sterował dowolnym zdarzeniem, takim jak zdarzenie kliknięcia.

Uwaga: działa głównie z JavaScriptem.

Przykład:

Wyjście:

Wpisz typ „przycisku”.

Kliknij przycisk, aby zobaczyć wynik:

Uwaga: W powyższym przykładzie użyliśmy „alertu” JS, o którym dowiesz się w naszym samouczku JS. Służy do wyświetlania wyskakującego okna.

8. :

Element typu „plik” służy do wybierania jednego lub większej liczby plików z pamięci urządzenia użytkownika. Po wybraniu pliku i przesłaniu plik ten można przesłać na serwer za pomocą kodu JS i interfejsu API pliku.

Przykład:

 Select file to upload: 

Wyjście:

Wpisz typ „pliku”.

Możemy wybrać dowolny typ pliku, dopóki go nie określimy! Wybrany plik pojawi się obok opcji „wybierz plik”.

9. :

Typ „obraz” służy do reprezentowania przycisku przesyłania w postaci obrazu.

Przykład:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

Nowo dodany element typów HTML5

1. :

Typ „kolor” służy do zdefiniowania pola wejściowego zawierającego kolor. Umożliwia użytkownikowi określenie koloru za pomocą wizualnego interfejsu kolorów w przeglądarce.

Uwaga: typ „kolor” obsługuje tylko wartości kolorów w formacie szesnastkowym, a wartość domyślna to #000000 (czarny).

Przykład:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Wyjście:

Wprowadź typy „kolorów”:

Notatka: Domyślna wartość typu „kolor” to #000000 (czarny). Obsługuje tylko wartość koloru w formacie szesnastkowym.

2. :

Element typu „data” generuje pole wejściowe, które pozwala na wprowadzenie daty w zadanym formacie. Użytkownik może wprowadzić datę za pomocą pola tekstowego lub interfejsu wyboru daty.

Przykład:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Wyjście:

Wpisz typ „data”.

3. :

Element typu 'datetime-local' tworzy pole wejściowe, które pozwala użytkownikowi wybrać datę oraz czas lokalny w formacie godziny i minuty bez informacji o strefie czasowej.

Przykład:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Wyjście:

Wprowadź typ „data/godzina lokalna”.

4. :

Typ „email” tworzy pole wejściowe, które umożliwia użytkownikowi wprowadzenie adresu e-mail z walidacją wzorca. Wiele atrybutów umożliwia użytkownikowi wprowadzenie więcej niż jednego adresu e-mail.

Przykład:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Wyjście:

Wpisz typ „e-mail”.

Notatka: Użytkownik może także wprowadzić wiele adresów e-mail oddzielając je przecinkami lub spacjami w następujący sposób:

5. :

Typ „miesiąc” tworzy pole wejściowe, które umożliwia użytkownikowi łatwe wprowadzenie miesiąca i roku w formacie „MM, RRRR”, gdzie MM określa wartość miesiąca, a RRRR definiuje wartość roku. Nowy

Przykład:

 Enter your Birth Month-year: 

Wyjście:

Wpisz typ „miesiąca”:

6. :

Numer typu elementu tworzy pole wejściowe, w którym użytkownik może wprowadzić wartość liczbową. Możesz także ograniczyć wprowadzanie wartości minimalnej i maksymalnej za pomocą atrybutu min i max.

Przykład:

 Enter your age: 

Wyjście:

Wprowadź typ „liczby”.

Notatka: Umożliwi wprowadzenie liczby z zakresu 50-80. Jeśli chcesz wprowadzić liczbę inną niż zakres, wyświetli się błąd.

7. :

Element typu 'url' tworzy pole wejściowe umożliwiające użytkownikowi wprowadzenie adresu URL.

Przykład:

 Enter your website URL: <br> 

Wyjście:

Wpisz typ „url”.

8. :

Typ tydzień tworzy pole wejściowe, które pozwala użytkownikowi wybrać tydzień i rok z rozwijanego kalendarza bez strefy czasowej.

Przykład:

 <b>Select your best week of year:</b> <br> <br> 

Wyjście:

Wpisz typ „tygodnia”.

9. :

Typ „wyszukiwanie” tworzy pole wejściowe, które umożliwia użytkownikowi wprowadzenie szukanego ciągu. Są one funkcjonalnie symetryczne w stosunku do typu wprowadzania tekstu, ale mogą mieć inny styl.

Przykład:

 Search here: 

Wyjście:

Wpisz typ „wyszukiwania”.

10. :

Element typu ?tel? tworzy pole wejściowe umożliwiające wprowadzenie numeru telefonu. Typ „tel” nie ma domyślnej weryfikacji, takiej jak e-mail, ponieważ wzór numeru telefonu może się różnić w zależności od kraju.

Przykład:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Wyjście:

Wpisz typ „tel”.

Notatka: Tutaj używamy dwóch atrybutów „wzorzec” i „wymagany”, które pozwolą użytkownikowi wprowadzić liczbę w zadanym formacie i wymagane jest wprowadzenie liczby w polu wejściowym.