HTML - formularze

Formularze HTML są wymagane, gdy chcesz zebrać dane od osoby odwiedzającej witrynę. Na przykład podczas rejestracji użytkownika chciałbyś zebrać informacje takie jak imię i nazwisko, adres e-mail, karta kredytowa itp.

Formularz pobierze dane wejściowe od odwiedzającego witrynę, a następnie wyśle je do aplikacji wewnętrznej, takiej jak CGI, skrypt ASP lub skrypt PHP itp. Aplikacja zaplecza wykona wymagane przetwarzanie na przekazanych danych w oparciu o zdefiniowaną wewnątrz logikę biznesową Aplikacja.

Dostępne są różne elementy formularza, takie jak pola tekstowe, pola tekstowe, menu rozwijane, przyciski opcji, pola wyboru itp.

HTML <form> tag służy do tworzenia formularza HTML i ma następującą składnię -

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Atrybuty formularza

Oprócz typowych atrybutów, poniżej znajduje się lista najczęściej używanych atrybutów formularza -

Sr.No	Atrybut i opis
1	action Skrypt zaplecza gotowy do przetwarzania przekazanych danych.
2	method Metoda, która ma być używana do przesyłania danych. Najczęściej używane są metody GET i POST.
3	target Określ docelowe okno lub ramkę, w której zostanie wyświetlony wynik działania skryptu. Przyjmuje wartości takie jak _blank, _self, _parent itp.
4	enctype Możesz użyć atrybutu enctype, aby określić, w jaki sposób przeglądarka koduje dane przed wysłaniem ich na serwer. Możliwe wartości to - application/x-www-form-urlencoded - Jest to standardowa metoda, której większość formularzy używa w prostych scenariuszach. mutlipart/form-data - Jest to używane, gdy chcesz przesłać dane binarne w postaci plików takich jak obraz, plik tekstowy itp.

Note- Możesz zapoznać się z Perl i CGI, aby uzyskać szczegółowe informacje na temat przesyłania danych formularza.

Kontrolki formularza HTML

Istnieją różne typy formantów formularzy, których można używać do zbierania danych za pomocą formularza HTML -

Kontrolki wprowadzania tekstu
Kontrolki pól wyboru
Sterowanie skrzynką radiową
Wybierz opcję Box Controls
Pola wyboru pliku
Ukryte elementy sterujące
Klikalne przyciski
Przycisk przesyłania i resetowania

Kontrolki wprowadzania tekstu

Istnieją trzy typy wprowadzania tekstu używane w formularzach -

Single-line text input controls- Ten element sterujący jest używany w przypadku elementów, które wymagają tylko jednego wiersza wprowadzania danych przez użytkownika, takich jak pola wyszukiwania lub nazwy. Są tworzone za pomocą HTML<input> etykietka.
Password input controls- Jest to również jednowierszowe wprowadzanie tekstu, ale maskuje znak, gdy tylko użytkownik go wprowadzi. Są również tworzone za pomocą tagu HTMl <input>.
Multi-line text input controls- Stosowany, gdy użytkownik jest zobowiązany do podania szczegółów, które mogą być dłuższe niż jedno zdanie. Wielowierszowe kontrolki wprowadzania danych są tworzone przy użyciu języka HTML<textarea> etykietka.

Jednowierszowe kontrolki wprowadzania tekstu

Ta kontrolka jest używana w przypadku elementów, które wymagają tylko jednego wiersza wprowadzania danych przez użytkownika, takich jak pola wyszukiwania lub nazwy. Są tworzone za pomocą tagu HTML <input>.

Przykład

Oto podstawowy przykład jednowierszowego wprowadzania tekstu używanego do wpisywania imienia i nazwiska -

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów dla znacznika <input> służących do tworzenia pola tekstowego.

Sr.No	Atrybut i opis
1	type Wskazuje typ kontrolki wprowadzania tekstu i dla kontrolki wprowadzania tekstu, na jaką zostanie ustawiona text.
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Może to służyć do podania wartości początkowej w formancie.
4	size Umożliwia określenie szerokości kontrolki wprowadzania tekstu w postaci znaków.
5	maxlength Pozwala określić maksymalną liczbę znaków, które użytkownik może wprowadzić w polu tekstowym.

Kontrola wprowadzania hasła

Jest to również jednowierszowe wprowadzanie tekstu, ale maskuje znak, gdy tylko użytkownik go wprowadzi. Są również tworzone za pomocą znacznika HTML <input>, ale atrybut type jest ustawiony napassword.

Przykład

Oto podstawowy przykład jednowierszowego wprowadzenia hasła używanego do wpisania hasła użytkownika -

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów znacznika <input> służących do tworzenia pola hasła.

Sr.No	Atrybut i opis
1	type Wskazuje typ kontroli wejścia i dla kontroli wprowadzania hasła, na jaki zostanie ustawiony password.
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Może to służyć do podania wartości początkowej w formancie.
4	size Umożliwia określenie szerokości kontrolki wprowadzania tekstu w postaci znaków.
5	maxlength Pozwala określić maksymalną liczbę znaków, które użytkownik może wprowadzić w polu tekstowym.

Wielowierszowe kontrolki wprowadzania tekstu

Jest to używane, gdy użytkownik jest zobowiązany do podania szczegółów, które mogą być dłuższe niż jedno zdanie. Wielowierszowe kontrolki wprowadzania są tworzone za pomocą znacznika HTML <textarea>.

Przykład

Oto podstawowy przykład wielowierszowego wprowadzania tekstu używanego do opisu przedmiotu -

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów dla znacznika <textarea>.

Sr.No	Atrybut i opis
1	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
2	rows Wskazuje liczbę wierszy pola obszaru tekstowego.
3	cols Wskazuje liczbę kolumn w polu obszaru tekstowego

Kontrola pola wyboru

Pola wyboru są używane, gdy wymagane jest wybranie więcej niż jednej opcji. Są również tworzone za pomocą znacznika HTML <input>, ale atrybut type jest ustawiony nacheckbox..

Przykład

Oto przykładowy kod HTML dla formularza z dwoma polami wyboru -

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów dla tagu <checkbox>.

Sr.No	Atrybut i opis
1	type Wskazuje typ kontroli wejścia i dla kontroli wejścia pola wyboru, na jaki zostanie ustawiony checkbox..
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Wartość, która będzie używana, jeśli pole wyboru jest zaznaczone.
4	checked Ustaw zaznaczone, jeśli chcesz je wybrać domyślnie.

Sterowanie przyciskiem radiowym

Przyciski opcji są używane, gdy spośród wielu opcji wystarczy wybrać tylko jedną. Są również tworzone za pomocą znacznika HTML <input>, ale atrybut type jest ustawiony naradio.

Przykład

Oto przykład kodu HTML dla formularza z dwoma przyciskami opcji -

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów przycisku opcji.

Sr.No	Atrybut i opis
1	type Wskazuje typ sterowania wejściem, a dla sterowania wejściem pola wyboru zostanie ustawiony na radio.
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Wartość, która będzie używana, jeśli pole wyboru jest zaznaczone.
4	checked Ustaw zaznaczone, jeśli chcesz je wybrać domyślnie.

Wybierz opcję Box Control

Pole wyboru, nazywane również rozwijanym polem, które umożliwia wyświetlenie różnych opcji w postaci listy rozwijanej, z której użytkownik może wybrać jedną lub więcej opcji.

Przykład

Oto przykład kodu HTML dla formularza z jednym rozwijanym oknem

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista ważnych atrybutów tagu <select> -

Sr.No	Atrybut i opis
1	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
2	size Może to służyć do prezentowania przewijanej listy.
3	multiple Jeśli ustawione na „wiele”, umożliwia użytkownikowi wybranie wielu elementów z menu.

Poniżej znajduje się lista ważnych atrybutów tagu <option> -

Sr.No	Atrybut i opis
1	value Wartość, która zostanie użyta, jeśli opcja w polu wyboru jest zaznaczona.
2	selected Określa, że ta opcja powinna być początkowo wybraną wartością podczas ładowania strony.
3	label Alternatywny sposób oznaczania opcji

Okno przesyłania plików

Jeśli chcesz zezwolić użytkownikowi na przesłanie pliku do Twojej witryny internetowej, musisz użyć pola przesyłania plików, znanego również jako pole wyboru plików. Jest to również tworzone przy użyciu elementu <input>, ale atrybut type jest ustawiony nafile.

Przykład

Oto przykładowy kod HTML dla formularza z jednym polem do przesyłania plików -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista ważnych atrybutów pola przesyłania plików -

Sr.No	Atrybut i opis
1	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
2	accept Określa typy plików, które akceptuje serwer.

Przyciski sterujące

W HTML istnieje wiele sposobów tworzenia klikalnych przycisków. Możesz również utworzyć przycisk klikalny za pomocą tagu <input>, ustawiając jego atrybut type nabutton. Atrybut type może przyjmować następujące wartości -

Sr.No	Typ i opis
1	submit Tworzy to przycisk, który automatycznie przesyła formularz.
2	reset Tworzy to przycisk, który automatycznie resetuje kontrolki formularza do ich początkowych wartości.
3	button Tworzy to przycisk, który jest używany do wyzwalania skryptu po stronie klienta, gdy użytkownik kliknie ten przycisk.
4	image Tworzy to klikalny przycisk, ale możemy użyć obrazu jako tła przycisku.

Przykład

Oto przykład kodu HTML dla formularza z trzema typami przycisków -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Ukryte kontrolki formularza

Ukryte kontrolki formularzy służą do ukrywania danych na stronie, które później można przekazać na serwer. Ta kontrolka jest ukryta w kodzie i nie pojawia się na rzeczywistej stronie. Na przykład następujący ukryty formularz jest używany do zachowania bieżącego numeru strony. Gdy użytkownik kliknie następną stronę, wartość ukrytej kontroli zostanie wysłana do serwera WWW i tam zadecyduje, która strona zostanie wyświetlona jako następna na podstawie przekazanej bieżącej strony.

Przykład

Oto przykładowy kod HTML pokazujący użycie ukrytej kontroli -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

To da następujący wynik -