HTML5 - Web Forms 2.0

Web Forms 2.0 to rozszerzenie funkcji formularzy w HTML4. Elementy i atrybuty formularzy w HTML5 zapewniają większy stopień znaczników semantycznych niż HTML4 i uwalniają nas od wielu żmudnych skryptów i stylów, które były wymagane w HTML4.

Element <input> w HTML4

Elementy wejściowe HTML4 używają rozszerzenia type atrybut do określenia typu danych. HTML4 udostępnia następujące typy -

Sr.No.	Typ i opis
1	text Dowolne pole tekstowe, nominalnie wolne od podziałów wierszy.
2	password Dowolne pole tekstowe na poufne informacje, nominalnie wolne od podziałów wierszy.
3	checkbox Zestaw zawierający zero lub więcej wartości ze wstępnie zdefiniowanej listy.
4	radio Wyliczona wartość.
5	submit Dowolna forma przycisku inicjuje przesłanie formularza.
6	file Dowolny plik z typem MIME i opcjonalnie nazwą pliku.
7	image Współrzędna odnosząca się do rozmiaru konkretnego obrazu, z dodatkową semantyczną informacją, że musi to być ostatnia wybrana wartość i inicjuje przesłanie formularza.
8	hidden Dowolny ciąg, który normalnie nie jest wyświetlany użytkownikowi.
9	select Wyliczona wartość, podobnie jak typ radia.
10	textarea Dowolne pole tekstowe, nominalnie bez ograniczeń podziału wiersza.
11	button Dowolna forma przycisku, który może zainicjować dowolne zdarzenie związane z przyciskiem.

Poniżej znajduje się prosty przykład użycia etykiet, przycisków opcji i przycisków przesyłania -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

Element <input> w HTML5

Oprócz wyżej wymienionych atrybutów, elementy wejściowe HTML5 wprowadziły kilka nowych wartości dla typeatrybut. Są one wymienione poniżej.

NOTE - Wypróbuj wszystkie poniższe przykłady przy użyciu najnowszej wersji programu Opera przeglądarka.

Sr.No.	Typ i opis
1	datetime Data i czas (rok, miesiąc, dzień, godzina, minuta, sekunda, ułamki sekundy) zakodowane zgodnie z ISO 8601 ze strefą czasową ustawioną na UTC.
2	datetime-local Data i czas (rok, miesiąc, dzień, godzina, minuta, sekunda, ułamki sekundy) zakodowane zgodnie z ISO 8601, bez informacji o strefie czasowej.
3	data Data (rok, miesiąc, dzień) zakodowana zgodnie z ISO 8601.
4	miesiąc Data składająca się z roku i miesiąca zakodowana zgodnie z ISO 8601.
5	tydzień Data składająca się z roku i numeru tygodnia zakodowana zgodnie z ISO 8601.
6	czas Czas (godzina, minuta, sekundy, ułamki sekund) zakodowany zgodnie z ISO 8601.
7	numer Przyjmuje tylko wartość liczbową. Atrybut step określa dokładność, domyślnie 1.
8	zasięg Typ zakresu jest używany w przypadku pól wejściowych, które powinny zawierać wartość z zakresu liczb.
9	e-mail Akceptuje tylko wartość e-mail. Ten typ jest używany do pól wejściowych, które powinny zawierać adres e-mail. Jeśli spróbujesz przesłać prosty tekst, wymusza to podanie tylko adresu e-mail w formacie [email protected].
10	url Akceptuje tylko wartość adresu URL. Ten typ jest używany do pól wejściowych, które powinny zawierać adres URL. Jeśli spróbujesz przesłać prosty tekst, wymusza to wprowadzenie tylko adresu URL w formacie http://www.example.com lub http://example.com.

Element <output>

HTML5 wprowadził nowy element <output>, który jest używany do reprezentowania wyników różnych typów danych wyjściowych, takich jak dane wyjściowe napisane przez skrypt.

Możesz użyć foratrybut, aby określić związek między elementem wyjściowym a innymi elementami w dokumencie, które wpłynęły na obliczenia (na przykład jako dane wejściowe lub parametry). Wartość atrybutu for to rozdzielona spacjami lista identyfikatorów innych elementów.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

To da następujący wynik -

Atrybut zastępczy

HTML5 wprowadził nowy atrybut o nazwie placeholder. Ten atrybut w elementach <input> i <textarea> stanowi wskazówkę dla użytkownika, co można wprowadzić w polu. Tekst zastępczy nie może zawierać znaków powrotu karetki ani znaków nowego wiersza.

Oto prosta składnia atrybutu zastępczego -

<input type = "text" name = "search" placeholder = "search the web"/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

To da następujący wynik -

Atrybut autofocus

Jest to prosty, jednoetapowy wzorzec, łatwo zaprogramowany w JavaScript w momencie ładowania dokumentu, automatycznie skupia się na jednym określonym polu formularza.

HTML5 wprowadził nowy atrybut o nazwie autofocus który zostałby użyty w następujący sposób -

<input type = "text" name = "search" autofocus/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Wymagany atrybut

Teraz nie musisz mieć JavaScript do walidacji po stronie klienta, np. Puste pole tekstowe nigdy nie zostanie przesłane, ponieważ HTML5 wprowadził nowy atrybut o nazwie required który byłby używany w następujący sposób i nalegałby na posiadanie wartości -

<input type = "text" name = "search" required/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

To da następujący wynik -