Uformuj elementy w HTML

Elementy formularza HTML pomagają w tworzeniu formularza o różnych funkcjonalnościach. Formularz wejściowy zawiera wejście, wyjście, przycisk, Wybierz, TextArea, Etykieta, DataList, FieldSetetc,. Wśród nich znacznik wejściowy jest najczęściej używanym elementem i jest uważany za podstawową część formy HTML. Podczas gdy inne elementy formularzy mają własną funkcjonalność. Uważając elementy formularzy, ten artykuł zawiera następujące wyniki uczenia się.

• Podstawowe informacje i użycie każdego elementu formularza
• różne przykłady dla każdego elementu

Uformuj elementy w HTML

Ta sekcja zawiera listę różnych elementów form, które odgrywają kluczową rolę w generowaniu formularzy. Zakłtujmy się w nich jeden po drugim:

Element wejściowy

Ten element jest uważany za element podstawowy form HTML i jest całkiem niemożliwe do prześledzenia formularza, który nie zawiera żadnego elementu wejściowego. Funkcjonalność elementów wejściowych zależy od zestawu podpisanych przez nich atrybutów. Na przykład atrybut typu określa typ (pola tekstowe, radio-przycisk, pole wyboru) pola wejściowego.

Przykład

Za pomocą kodu HTML następujące wiersze kodu tworzą pole tekstowe z elementem wejściowym.

Oprócz elementu wejściowego użyliśmy atrybutu (symbol zastępczego) elementu wejściowego.

Wyjście

Wyjście pokazuje, że pole tekstowe jest tworzone za pomocą elementu wejściowego. Ponieważ używaliśmy atrybutu zastępczego, manekin jest również wyświetlany w polu tekstowym.

Element etykiety

Element etykiety określa cel różnych elementów form dla użytkowników końcowych. Element etykiety można zadeklarować za pomocą następującej składni.

Podobnie jak większość elementów HTML, zawartość elementu etykiety jest zapisywana między znacznikami.

Przykład:

Wykorzystanie elementu etykiety jest opracowane przy użyciu następującego kodu.

Etykieta jest tworzona, aby kojarzyć ją z polem tekstowym, które otrzymuje nazwę użytkownika. dla atrybutu (elementu etykiet) i id (elementu wejściowego) Musi mieć te same wartości, aby mogły być wiązane razem.

Wyjście

Dane wyjściowe zawiera etykietę, która kieruje Cię do wprowadzenia nazwy w polu tekstowym.

Wybierz element

Element Select tworzy listę rozwijaną różnych opcji. Element generuje wiele opcji na liście rozwijanej.

Przykład

Poniższy kod ćwicz element Wybierz, aby utworzyć listę rozwijaną.

Powyższy kod jest opisany jako,

• Po pierwsze, zadeklarowany jest znacznik etykiety (tylko ze względu na prowadzenie użytkownika końcowego).
• Tag wybierany jest zdefiniowany i zawiera trzy tag opcji

Wyjście

Wyjście pokazuje etykietę, menu rozwijane i przycisk.

Element TextArea

Element TextArea tworzy pole tekstowe, które umożliwia pisanie wielu wierszy. Chociaż element wejściowy może utworzyć pole tekstowe, ale obsługuje tylko wejścia jednokierunkowe.

Przykład

Poniższy kod pokazuje użycie elementu TextArea

Powyższy kod tworzy etykietę dla pola tekstowego i pola tekstowego za pomocą elementu TextArea. Początkowo wykonywana jest domyślna wysokość i szerokość elementu TextArea. Możesz jednak użyć atrybutu wysokości i szerokości, aby uzyskać niestandardowy rozmiar elementu TextArea.

Wyjście

Element przycisku

Można utworzyć przycisk, za pomocą elementu przycisków formularzy HTML.

Przykład

Kod napisany poniżej praktykuje element przycisku

Kod napisany powyżej tworzy dwa przyciski za pomocą elementów przycisków.

Wyjście

Element Fieldset

Ten element służy do grupowania wielu elementów formularza w pojedynczym polu.

Przykład

Powyższy kod tworzy Fieldset za pomocą elementu Fieldset w HTML, a jego podpis jest zdefiniowany za pomocą elementu legendy. Element Fieldset zawiera dwa elementy wejściowe, które otrzymują nazwę i e -mail użytkownika.

Wyjście

Element danych

DataList Element rozszerza funkcjonalność elementu wejściowego. DataList Element zawiera listę wstępnie zdefiniowanych wpisów do wyboru wpisu z nich (lub możesz również wprowadzić własną wartość).

Przykład

Kod podany poniżej praktykuje użycie elementu danych

W powyższym kodzie,

• Lista wejściowa jest tworzona, a następnie zadeklarowany element danych
• Wewnątrz elementu danych, znacznik służy do tworzenia opcji dla elementu Datalist.

Wyjście

Element wyjściowy

Ten element służy do wyświetlania wyjścia dowolnego działania (przesłanie formularza).

Przykład

Poniższy kod praktykuje atrybut wyjściowy, aby uzyskać sumę dwóch pól liczbowych.

W powyższym kodzie,

• Dwa typy wejściowe = ”numer"Są zdefiniowane o identyfikatorze a i b odpowiednio
• wyjście Element rozważa oba identyfikatory do przetwarzania
• oninput zdarzenie elementu formularza dodaje zarówno liczbę (gdy są one wstawione)

Wyjście

Przechodząc do tego artykułu, nauczyłbyś się tworzyć funkcjonalny formularz HTML.

Wniosek

Elementy formularzy są kluczowym interesariuszem w tworzeniu szczegółowej formy. Elementy formularza obejmują wejście, etykieta, textArea, przycisk i wiele innych. W tym artykule wymieniono elementy formularza w HTML i podano również przykład każdego elementu. Można utworzyć prosty formularz HTML za pomocą kilku elementów formularzy. Jeśli jednak chcesz formularza ze szczegółowymi funkcjami, w tym przewodniku dostarczono wiele elementów formularzy HTML.