Webový formulář

Webový formulář je v informatice označení pro speciální vstupní prvky zobrazitelné ve webovém prohlížeči, které umožňují uživateli odeslat data na webový server, kde jsou následně zpracována. Webové formuláře se podobají klasickým papírovým nebo databázovým formulářům – obsahují vstupní pole pro text, přepínače, vyskakovací menu i tlačítka. Formulář může být použit například pro odeslání dodací adresy, vyplněné objednávky nebo při vyhledání části textu na webové stránce.

Webové formuláře jsou definovány ve formálních programovacích jazycích jako HTML, Perl, PHP, Java, Javascript nebo .NET (včetně ASP.NET). Implementace formulářů v těchto jazycích často automaticky využívá styly uživatelského rozhraní, jako jsou mřížky, minimalizuje programovací čas, náklady a rizika.

XHTML/HTML formuláře

Příklad formuláře vyrenderovaného v prohlížeči Mozilla Firefox.

Formulář v XHTML nebo HTML je nejběžnější způsob online použití. Formulář může být vytvořen pomocí následujících prvků:

  • vstupní pole
    • textové – jednoduché textové pole, které umožňuje vložit řádek textu (alternativou je heslo, kdy je místo jednotlivých znaků zobrazován nejčastěji symbol hvězdičky nebo puntíku)
    • checkbox – dovoluje vybrat žádnou, jednu nebo více možností
    • přepínač (anglicky radio button) – dovoluje vybrat jednu možnost z více nabízených
    • soubor – slouží pro odeslání souboru na server
    • reset – slouží pro nastavení výchozích hodnot formuláře
    • odeslat – vykoná akci přiřazenou formuláři (typicky odešle data na server)
  • textové pole – podobně jako textové vstupní pole, s tím rozdílem, že umožňuje vložit víceřádkový text
  • select – zobrazí roletkový seznam, ze kterého si může uživatel vybrat jednu možnost

Na obrázku vpravo jsou zobrazeny následující elementy:

  • textbox pro zadání jména
  • dva radio buttony pro zvolení pohlaví
  • roletkový seznam pro výběr barvy očí
  • dva check boxy pro zatržení odpovídající vlastnosti
  • textové pole pro popsání atletických dovedností
  • tlačítko pro odeslání formuláře

XForms

XForm je alternativní standard navržený pro reprezentaci nové generace HTML/XHTML formulářů. Tento standard je dostatečně obecný, aby mohl být použitý samostatným způsobem nebo při prezentaci v jiných jazycích než HTML nebo XHTML. Na rozdíl od HTML/XHTML používá XForms návrhového vzoru Model-view-controller.

Xform dokument může být stejně jednoduchý jako HTML/XHTML formulář. Oproti nim však nabízí mnoho pokročilých vlastností. Formulář může například reagovat v reálném čase a získávat vkládané informace už během zobrazení formuláře, bez použití samostatných skriptovacích jazyků. Formulář může specifikovat jak mají být data ověřena, nebo jaké části formuláře se mohou měnit v závislosti na vložených datech v jiné části formuláře.

Standard XForms v současnosti není podporován v dostupných webových prohlížečích.

Kombinace se skriptovacími jazyky

Formuláře mohou být propojeny s různými skriptovacími jazyky, které umožňují vytvořit dynamické webové stránky.

Na straně klienta

Za standardní jazyk pro skriptování na straně klienta je de facto považován jazyk JavaScript. JavaScript využívá DOM, což umožňuje dynamické chování a změny webové stránky v prohlížeči.

Jelikož jsou možnosti jazyků pro skriptování na straně klienta v kombinaci s formuláři omezené, často slouží pro ověření správnosti dat ještě před odesláním na server. Také se používají k předzpracování dat před jejich předáním aplikaci na serveru (např. pro uložení do databáze).

Na straně serveru

Programy spouštěné na straně serveru mohou vykonávat širokou škálu příkazů za účelem vytvoření dynamických webových stránek – přes autentizaci přihlašovacích údajů (např. LDAP), načítání a ukládání dat v databázích, kontrolu pravopisu až po odesílání e-mailů). Některé skripty prováděné na straně serveru musí projít přes rozhraní CGI (Common Gateway Interface), aby mohly splnit požadovaný úkol.

Výhodou skriptování na straně serveru je přenesení funkcionality na jeden počítač (server) namísto spoléhání na různé implementace stejných funkcí v mnoha webových prohlížečích.

Běžně jsou aplikace používané na webových stránkách psané ve skriptovacích jazycích. Je ale také možné použít kompilované jazyky.

Některé z běžně používaných skriptovacích jazyků:

Některé z běžně používaných kompilovaných jazyků:

PHP

PHP je jeden z nejběžněji používaných jazyků pro psaní webových aplikací na straně serveru a je jeden z mála jazyků určených právě pro serverové aplikace.

PHP skript může:

  • zobrazit informace na jiné stránce (např. uživatel vloží jméno a to se následně zobrazí na webové stránce)
  • sloužit jako přihlašovací rozhraní
  • uložit data do databáze (např. MySQL, ASCII soubor a další)
  • uložit informace o uživatelově počítači v HTTP cookie
  • vygenerovat e-mail na základě vložených dat, včetně připojení přílohy

Hodnota atributu action určuje soubor, který zpracuje odeslaná data. Cílový PHP soubor obdrží data pomocí metody POST nebo GET. V příkladu je ukázán jednoduchý formulář, který předá uživatelské jméno pomocí metody GET.

form.html

<html>
<body>
 <form action="form_handler.php" method="get">
   Uživatelské jméno: <input name="user" type="text" />
   <input type="submit" />
 </form>
</body>
</html>

form_handler.php

<html>
<body>
<?php
 /* 
  * Tento skript vypíše text, který byl odeslán pomocí formuláře na stránce form.html.
  */
 $name = $_GET['user'];
 echo "Hello, ". $name ."!";
?>
</body>
</html>

Ve výše uvedeném skriptu je nutné použít příkaz $_GET[''] nebo $_POST[''] podle toho, která metoda byla použita ve formuláři, zatímco $_REQUEST[''] je možné použít pro obě metody. Hodnota atributu input name="" HTML formuláře musí být shodná s hodnotou indexu $GET[''].


Formuláře a bezpečnost

Pomocí neošetřených vstupů ve formulářích lze provádět útoky na webové stránky. Patří mezi ně Cross-site scripting (XSS) a SQL injection.

Cross-site scripting

Související informace naleznete také v článku Cross-site scripting.

Jedná se o vložení části škodlivého kódu do napadené stránky. V případě, kdy není ošetřen vstup formuláře, je možné odeslat speciální znaky (např. < a >). Pokud je takovýto text následně vypsán na webové stránce, považuje ho prohlížeč za součást html kódu a vykreslí ho do výsledné stránky. Proto je nutné takovéto znaky zaměnit za správné html entity (např. < za &lt;).

SQL injection

Související informace naleznete také v článku SQL injection.

Tento typ útoku se zaměřuje na databáze. Pokud není ošetřen vstup formuláře, pomocí kterého se odesílají data do databáze, je možné odeslat místo předpokládaného vstupu, část SQL příkazu. Pokud je tato část příkazu vhodně sestavena může být při následném odeslání pochopena databází jako součást původního příkazu. Databáze pak může provést zcela jinou akci než původně programátor zamýšlel. Pomocí tohoto útoku se dá například získat přístup k datům v databázi nebo ji úplně vymazat.

Reference

V tomto článku byl použit překlad textu z článku Form (web) na anglické Wikipedii.

Související články

Externí odkazy

Média použitá na této stránce

Sample web form.png
(c) File Upload Bot from en.wikipedia.org, CC BY-SA 3.0
A sample form in HTML and generated with Mozilla Firefox.

This form shows a combined sample of (in order from top to bottom):

HTML

The following is the HTML used to create this form: 

 <FORM method="post" action="bar.php">
  <TABLE border="1">
   <TR bgcolor="#CCCCFF">
    <TH>Name</TH>
    <TH>Value</TH>
   </TR>
   <TR>
    <TD>Name</TD>
    <TD>
     <input type="text" name="name" size="25">
    </TD>
   </TR>
   <TR>
    <TD>Sex</TD>
    <TD>
     <input type="radio" name="sex" value="male"> Male
     <br>
     <input type="radio" name="sex" value="female" checked> Female
    </TD>
   </TR>
   <TR>
    <TD>Eye color</TD>
    <TD>
     <select name="eye color">
      <option>blue</option>
      <option>brown</option>
      <option selected>green</option>
      <option>other</option>
     </select>
    </TD>
   </TR>
   <TR>
    <TD>Check all that apply</TD>
    <TD>
     <input type="checkbox" name="height" value="1"> Over 6 feet tall</input>
     <br>
     <input type="checkbox" name="weight" value="1"> Over 200 pounds</input>
    </TD>
   </TR>
   <TR>
    <TD colspan="2">Describe your athletic ability:<br>
     <textarea name="athletic" cols="50" rows="4"></textarea>
    </TD>
   </TR>
   <TR>
    <TD colspan="2" align="center">
     <input type="submit" value="Enter my information">
    </TD>
   </TR>
  </TABLE>
 </FORM>

Image Licensing

This picture/image was taken/created by me. See my User:Cburnett page for attribution or for other licenses.