Jak stworzyć formularz w HTML

Jak stworzyć formularz w HTML

Zbieranie danych od użytkownika serwisu może odbywać się na kilka różnych sposobów. Formularze na stronach internetowych mogą pełnić prostą funkcję, taką jak subskrypcja biuletynu użytkownika, lub bardziej złożoną, np. służyć jako formularz podania o pracę.





Jednak jedną rzeczą, która łączy wszystkie te proste i złożone formularze, jest HTML, a dokładniej HTML etykietka.



Korzystanie ze znacznika formularza

ten tag to element HTML używany jako kontener do umieszczania innych elementów, które można uznać za bloki konstrukcyjne formularzy. Niektóre z tych podstawowych elementów obejmują tag, tag, a etykietka.





ten tag ma ważny atrybut, który przyczynia się do jego funkcjonalności. Atrybut ten nazywany jest akcją i służy do identyfikacji pliku, do którego zostaną przekazane dane wprowadzone do formularza.

Korzystanie z przykładu tagu





Powyższy przykład pokazuje, jak używać tagu formularza w swoich projektach. Jednym z głównych wniosków jest to, że jeśli otworzysz tag formularza, pamiętaj, aby go zamknąć. Stworzy to strukturę formularza, a także zapewni prawidłowe przetwarzanie danych wprowadzonych do formularza.



Korzystanie z tagu

ten tag służy do opisu danych w każdym polu wejściowym formularza. Ten tag ma dla atrybut, który służy do zwiększenia funkcjonalności formularza.

Związane z: Najlepsze darmowe edytory HTML online do testowania kodu



Jeśli identyfikator przypisany do odpowiedniego pola wejściowego jest zgodny z dla wartość w tag, to pole wejściowe zostanie automatycznie podświetlone po kliknięciu etykiety.

Korzystanie z przykładu tagu


First Name:

W powyższym przykładzie widać, że dla atrybut ma przypisaną wartość fname . Dlatego jeśli utworzysz pole wejściowe za pomocą fname id, to pole będzie podświetlane za każdym razem, gdy klikniesz na Najpierw Nazwa etykieta.



Korzystanie z tagu

W swojej najbardziej podstawowej formie tag może być postrzegany jako pole tekstowe. ten tag przechwytuje dane od użytkownika, a jedną z jego ważniejszych funkcji jest rodzaj atrybut. ten rodzaj atrybut wskazuje typ danych, które to pole tekstowe może gromadzić.

Związane z: Jak utworzyć formularz ułożony w CSS

Istnieje kilka różnych wartości, które można przypisać do rodzaj atrybut, ale niektóre z bardziej popularnych są następujące.

  • Tekst
  • Numer
  • E-mail
  • Obraz
  • Data
  • Pole wyboru
  • Radio
  • Hasło

Korzystanie z tagu Przykład


First Name:

ten tag w powyższym kodzie ma trzy różne atrybuty, z których każdy ma unikalną funkcję. ten rodzaj atrybut ma przypisaną wartość tekstową, co oznacza, że ​​pole tekstowe akceptuje tylko znaki.

ten NS atrybut jest unikalnym identyfikatorem pola tekstowego i jest ważny, ponieważ zapewnia dostęp do tego elementu z pliku CSS. ten Nazwa atrybut jest również unikalnym identyfikatorem; jednak atrybut name jest używany do interakcji z elementem po stronie serwera.

ten NS oraz Nazwa atrybutom zazwyczaj przypisywana jest ta sama wartość, ponieważ jeden zapewnia dostęp do elementu po stronie klienta, a drugi po stronie serwera.

Korzystanie z elementu pola wyboru

Element pola wyboru jest bardzo wyjątkowy w porównaniu z innymi elementami, których można używać z etykietka. Pozwala użytkownikowi wybrać jedną lub więcej opcji z listy powiązanych wyborów. Pola wyboru są łatwe do zidentyfikowania, ponieważ są reprezentowane przez małe kwadratowe pola, które po zaznaczeniu zawierają czek.

Korzystanie z przykładowego elementu pola wyboru


Programming Languages:
Java
JavaScript
Python

W powyższym przykładzie każdy element pola wyboru ma atrybut wartości, co jest ważne, ponieważ pomaga odróżnić każdą opcję pola wyboru od kolekcji. Dlatego jeśli użytkownik wybierze „Java” z powyższych opcji, dane będą to odzwierciedlać.

Korzystanie ze znacznika i elementów radiowych

ten tag i elementy radiowe są podobne w tym sensie, że pozwalają użytkownikowi wybrać tylko pojedynczą wartość na raz; dlatego można powiedzieć, że pełnią tę samą funkcję. Jednak różnią się wyglądem.

Element radio jest bliższy wyglądowi elementu checkbox, jednak z elementem radio masz koła zamiast kwadratów.

ten tag tworzy coś, co jest zasadniczo rozwijanym polem, które pozwala użytkownikowi wybrać pojedynczą wartość.

Korzystanie z przykładu tagu i elementu radiowego


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

Korzystanie z elementu daty

Element daty tworzy małe pole tekstowe, które po kliknięciu generuje kalendarz. Za pomocą Data jako typ danych wejściowych w formularzach zabezpiecza przed potencjalnym wprowadzeniem przez użytkownika nieprawidłowej daty, co może potencjalnie prowadzić do gromadzenia błędnych danych.

Korzystanie z przykładu elementu daty


Korzystanie z elementu e-mail i hasło

Gdy programista przypisuje wartość adresu e-mail lub hasła do atrybutu typu an tag, każde z nich tworzy identyczne pole tekstowe. Jednak kiedy zaczniesz używać tych pudełek, różnice stają się widoczne.

Element e-mail monitoruje dane wprowadzane w polu tekstowym i zapewnia, że ​​każde zgłoszenie spełnia standardowe wymaganie adresu e-mail; co oznacza posiadanie części lokalnej, po której następuje symbol @, a na końcu domena.

Korzystanie z przykładu elementu wiadomości e-mail


W powyższym przykładzie jesteś wprowadzony do nowego atrybutu o nazwie symbol zastępczy , a ten atrybut przyjmuje wartość tekstową, która jest wyświetlana w polu tekstowym w kolorze wyblakłym szarym. Ten tekst służy do wskazania danych, które mają zostać umieszczone w polu tekstowym, jak pokazano w powyższym przykładzie.

Element hasła zamienia znaki w gwiazdki podczas wprowadzania ich do pola tekstowego. Dlatego jeśli ekran Twojego komputera jest widoczny dla innych osób, nie zobaczą one wprowadzonego hasła.

Korzystanie z przykładu elementu hasła


Używanie znacznika przycisku

W formularzu występują zwykle dwa różne typy przycisków. Pierwszym z nich jest przycisk prześlij, który przekazuje wprowadzone w formularzu dane do wartości przypisanej do atrybutu action (który znajduje się w < formularz> etykietka).

Przykład przycisku Prześlij

Submit

Drugi typ przycisku, który jest zwykle używany w formularzu, to przycisk resetowania, który czyści dane w formularzu, dzięki czemu użytkownik może wprowadzić nowe dane. ten tag ma rodzaj atrybut, który służy do wskazania funkcji przycisku. W powyższym przykładzie rodzaj atrybut ma przypisaną wartość Zatwierdź , zatem przycisk, który ma rodzaj wartość Resetowanie służy do resetowania formularza.

Przykład przycisku resetowania

Reset

Tworzenie formularza

Aby stworzyć prosty formularz w HTML, musisz zawrzeć wszystkie elementy wymienione powyżej w a etykietka.

Tworzenie przykładu formularza






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




Powyższy kod wygeneruje następujący formularz:

fajne rzeczy do zrobienia w pracy, gdy się nudzisz

Teraz możesz stworzyć prosty formularz w HTML

Ten artykuł zawiera wszystkie narzędzia do tworzenia funkcjonalnego formularza HTML. Identyfikuje różne znaczniki HTML używane podczas tworzenia formularzy i bada różne atrybuty, których można użyć z tymi znacznikami.

Jednak większość formularzy, które widzisz na stronach internetowych, ma jeden dodatkowy składnik; CSS, który służy do ożywienia formy i uczynienia jej bardziej estetyczną.

Udział Udział Ćwierkać E-mail Ściągawka z podstawowymi właściwościami CSS3

Opanuj podstawową składnię CSS dzięki naszej ściągawce do właściwości CSS3.

Czytaj dalej Powiązane tematy
  • Programowanie
  • HTML
  • Tworzenie stron internetowych
  • Poradniki kodowania
O autorze Kadeisha Kean(21 opublikowanych artykułów)

Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).

Więcej od Kadeishy Kean

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować