Typy wejściowe w HTML

Formularze HTML służą do przyjmowania danych wejściowych od użytkownika i do tego, że formularz używa różnych znaczników wejściowych. Krótko mówiąc, formularze HTML są niekompletne bez etykietka. Tagi można używać w znaczniku formularza, aby zadeklarować kontrole wejściowe, które pozwalają użytkownikowi wprowadzać dane na różne sposoby, takie jak zbieranie danych za pomocą pól tekstowych, list rozwijanych itp.

Ten zapis przedstawia pełny przegląd następujących typów wejściowych:

1. Tekst
2. Składać
3. E-mail
4. Hasło
5. Przycisk
6. Radio
7. Pole wyboru
8. Plik
9. Kolor
10. Data
11. Czas
12. DateTime-Local
13. Tydzień
14. Miesiąc
15. Teren

Ten zapis przedstawi pełen przewodnik dla wszystkich wyżej wymienionych typów wejściowych, więc zacznijmy!

Wpisz tekst

Typ tekstu określa pole tekstowe jednoliniowe.

Przykład
Poniższy podany fragment tworzy pole wejściowe typu tekstowego w znaczniku formularza:

Nazwa

Powyższy fragment kodu wygeneruje wyjście coś takiego:

Wyjście weryfikuje, że pole wejściowe przyjmuje dane typu tekstu.

Wpisz Prześlij

Przycisk Zwrotu typu wysyła dane formularza do adresu URL określonego w znaczniku.

Przykład
Poniższy fragment pokazuje, jak działa typ przesłania:

Nazwa

Składać

Powyższy kod określa adres URL pliku HTML w znaczniku formularza, a ponadto tworzy przycisk i pole tekstowe. Kliknięcie przycisku przesyłania wyśle ​​danych wprowadzone w polu tekstowym do form.html strona.

Przed kliknięciem przycisku jesteśmy na Formatrybuty.html Strona, więc wyjście powyższego fragmentu kodu będzie takie:

Kliknięcie przycisku wyświetli dane zawierane przez użytkownika na form.html strona:

Tak działa przycisk Przesyłania w HTML.

Wpisz e -mail

Służy do przyjmowania adresu e -mail użytkownika, a jeśli ktoś wprowadzi nieistotne dane, typ e -maila nie przesłałby tych danych:

E-mail

Składać

Poniżej pojawi się wyjście tego kodu:

Wpisz hasło

Typ hasła służy do określenia pola hasła:

Hasło

Powyższy kawałek kodu daje następujące dane wyjściowe:

Przycisk typu

Służy do utworzenia przycisku klikalnego:

Powyższy wiersz kodu początkowo pokazuje następujące dane wyjściowe:

Wpisz radio

Służy do utworzenia przycisku opcji, który pozwala użytkownikowi wybrać jedną opcję z wielu opcji:

Front-end


Back-end

Powyższy kod zapewni następujące dane wyjściowe:

Wpisz pole wyboru

Typ wyboru służy do utworzenia pola wyboru, które pozwala użytkownikowi wybrać pojedyncze lub wiele opcji:

Jestem programistą z przodu


Jestem programistą zaplecza

Powyższy fragment pokazuje następujące dane wyjściowe:

Wyjście uwierzytelnia działanie pola wyboru.

Typ pliku

Aby dołączyć plik na stronie internetowej, można użyć typu wejściowego pliku:

Wybierz plik:

Początkowo wyświetla „Brak wybranego pliku”:

Gdy użytkownik wybierze plik, nazwa pliku zostanie wyświetlona w sąsiedztwie "Wybierz plik" opcja:

Typ koloru

Ten typ wejściowy służy do utworzenia zbieracza kolorów. Domyślnie wartość jest czarna, jednak użytkownik może wybrać kolor za pomocą wartości kolorów RGB:

Wybierz kolor

Powyższy kawałek kodu zawiera następujące dane wyjściowe:

Kliknięcie koloru wyświetli się, pozwoli użytkownikowi wybrać wybrany kolor:

Typ daty

Służy do utworzenia pola typu daty, które pozwala użytkownikowi wybrać datę:

Wybierz datę

Poniżej pojawi się wyjście dla powyższego fragmentu kodu:

Użytkownik może wybrać datę w następujący sposób:

Typ czasu

Służy do tworzenia pola typu czasu, które pozwala użytkownikowi wybrać czas. Typ wejścia czasu można wdrożyć w taki sam sposób, jak typ daty:

Wybierz czas

Początkowo powyższe wiersze kodu zapewnią następujące dane wyjściowe:

Użytkownik może wybrać wybrany czas:

DateTime-Local

Można go użyć do jednoczesnego określania daty i godziny:

Wybierz datę i godzinę

Wyjście powyższego fragmentu kodu będzie wyglądało tak:

Użytkownik może wybrać jednocześnie datę i godzinę, jak pokazano poniżej:

Tydzień

Służy do wyboru tygodnia, poniższy fragment zapewni lepsze zrozumienie:

Wybierz tydzień

Poniższy fragment pokazuje dane wyjściowe powyższych wierszy kodu:

Miesiąc

Służy do wyboru miesiąca, poniższy fragment kodu opisuje działanie Miesiąc Wejście typu:

Wybierz miesiąc

Wyjście wyżej podarowanego fragmentu będzie wyglądać tak:

Tel Typ

Służy do przyjmowania numeru telefonu od użytkownika. Możemy określić określony wzór, którego należy przestrzegać. Poniższy fragment pokazuje działanie typu wejściowego Tel:

Wprowadź swój numer telefonu:

Jeśli ktoś wejdzie w nieistotny wzór, zostanie wyświetlona wiadomość ostrzegawcza, aby wprowadzić żądany format:

Wyjście weryfikuje, że „Tel” Typ wejściowy działa poprawnie.

Wniosek

Tag zapewnia kontrole wejściowe do zaakceptowania danych od użytkownika na różne sposoby. W HTML można użyć różnych typów wejściowych do przyjmowania danych wejściowych od użytkownika, na przykład tekstu, e -maila, hasła, przycisku, przesyłania i wielu innych. Wszystkie te typy wejściowe są wyposażone w różne funkcje. Ten artykuł zawiera kompleksowy przegląd niektórych najczęściej używanych typów wejściowych i rozważany wiele przykładów do lepszego zrozumienia.