Pri vytváraní webových aplikácií je dôležité brať bezpečnosť vážne, najmä keď musíte riešiť získavanie údajov od používateľov.

Všeobecným bezpečnostným pravidlom je nedôverovať nikomu, takže sa nemôžete spoliehať na to, že používatelia budú do formulárov vždy zadávať správne hodnoty. Napríklad namiesto zadania správnej e-mailovej adresy do poľa môže používateľ zadať nesprávnu adresu alebo dokonca nejaké škodlivé údaje.

Pokiaľ ide o overenie používateľských údajov, môže to byť vykonané buď na strane klienta (vo webovom prehliadači) alebo na strane servera.

Predtým bolo možné overenie na strane klienta vykonávať iba pomocou JavaScriptu. Všetko sa však zmenilo (alebo takmer zmenilo), keďže pomocou HTML5 je možné overenie vykonať v prehliadači bez nutnosti písať zložité overovacie skripty v JavaScripte.

Overenie formulára pomocou HTML5

HTML5 poskytuje pomerne robustný mechanizmus založený na nasledujúcich atribútoch značiek: typ, vzor a vyžadovať. Pomocou týchto nových atribútov môžete presunúť niektoré funkcie overovania údajov na prehliadač.

Pozrime sa na tieto atribúty, aby sme pochopili, ako môžu pomôcť pri overovaní formulárov.

atribút typu

Tento atribút hovorí, ktoré vstupné pole sa má zobraziť na spracovanie údajov, napríklad známe pole

Niektoré vstupné polia už poskytujú štandardné metódy overenia bez potreby písať ďalší kód. Napríklad skontroluje pole, aby sa uistil, že zadaná hodnota sa zhoduje so šablónou platnej e-mailovej adresy. Ak je do poľa zadaný nesprávny znak, formulár nemožno odoslať, kým sa hodnota neopraví.

Skúste sa pohrať s hodnotami e-mailových polí v ukážke nižšie.

Existujú aj ďalšie štandardné typy polí, napríklad , a na overenie čísel, adries URL a telefónnych čísel.

Poznámka: Formáty telefónnych čísel sa v jednotlivých krajinách líšia v dôsledku rozdielov v počte číslic v telefónnych číslach a rozdieloch vo formátoch. Výsledkom je, že špecifikácia nedefinuje algoritmus na kontrolu telefónnych čísel, takže v čase písania je táto funkcia prehliadačmi nedostatočne podporovaná.

Našťastie pre nás je možné overenie telefónneho čísla vykonať pomocou atribútu vzor, ​​ktorý berie ako argument regulárny výraz, na ktorý sa pozrieme ďalej.

atribút vzoru

Atribút vzor pravdepodobne spôsobí, že mnohí vývojári front-endu budú skákať od radosti. Tento atribút akceptuje regulárny výraz (podobný formátu regulárneho výrazu JavaScript), ktorý sa použije na kontrolu správnosti údajov zadaných do poľa.

Regulárne výrazy sú jazyk používaný na analýzu a manipuláciu s textom. Často sa používajú na zložité operácie vyhľadávania a nahrádzania, ako aj na kontrolu správnosti zadaných údajov.

Dnes sú regulárne výrazy zahrnuté vo väčšine populárnych programovacích jazykov, ako aj v mnohých skriptovacích jazykoch, editoroch, aplikáciách, databázach a pomôckach príkazového riadku.

Regulárne výrazy (RegEX) sú výkonný, stručný a flexibilný nástroj na porovnávanie reťazca textu, ako sú jednotlivé znaky, slová alebo vzory znakov.

Odovzdaním regulárneho výrazu ako hodnoty atribútu vzor môžete určiť, aké hodnoty sú prijateľné pre dané vstupné pole, ako aj informovať používateľa o chybách.

Pozrime sa na niekoľko príkladov použitia regulárnych výrazov na overenie hodnoty vstupných polí.

Telefónne čísla

Ako už bolo spomenuté, typ poľa tel nie je plne podporovaný prehliadačmi z dôvodu nezrovnalostí vo formátoch telefónnych čísel v rôznych krajinách.

Napríklad v niektorých krajinách je formát telefónnych čísel xxxx-xxx-xxxx a samotné telefónne číslo bude vyzerať takto: 0803-555-8205.

Regulárny výraz, s ktorým sa tento vzor zhoduje, je: ^\d(4)-\d(3)-\d(4)$ . V kóde to možno zapísať takto:

Telefónne číslo:

Alfanumerické hodnoty Vyžaduje sa atribút

Toto je boolovský atribút používaný na označenie toho, že na odoslanie formulára musí byť vyplnená hodnota daného poľa. Keď pridáte tento atribút do poľa, prehliadač bude vyžadovať, aby používateľ toto pole pred odoslaním formulára vyplnil.

To nás šetrí od implementácie overovania poľa pomocou JavaScriptu, čo môže vývojárom ušetriť čas.

Napríklad: alebo (pre kompatibilitu s XHTML)

Všetky ukážky, ktoré ste videli vyššie, používajú požadovaný atribút, takže si to môžete vyskúšať tak, že sa pokúsite odoslať formulár bez vypĺňania akýchkoľvek polí.

Záver

Podpora prehliadača na overenie formulárov je celkom dobrá a pre staršie prehliadače môžete použiť polyfilly.

Stojí za zmienku, že spoliehanie sa iba na overenie na strane prehliadača je nebezpečné, pretože tieto kontroly môžu útočníci alebo roboti ľahko obísť.

Nie všetky prehliadače podporujú HTML5 a nie všetky údaje odoslané do vášho skriptu budú pochádzať z vášho formulára. To znamená, že pred konečným prijatím údajov od používateľa je potrebné skontrolovať ich správnosť na strane servera.

Pred odoslaním údajov z formulára na ďalšie spracovanie je veľmi dôležité overiť vstup do formulára. Keď je vo formulári veľa polí, validačný skript PHP sa stáva príliš zložitým. Navyše, keďže robíte rovnakú alebo podobnú validáciu pre väčšinu formulárov, ktoré vytvárate, na validáciu formulárov sa vynakladá príliš veľa duplicitného úsilia.

O tomto všeobecnom skripte na overenie formulára PHP

Tento všeobecný skript na overenie formulárov PHP veľmi uľahčuje pridávanie overení do formulára.

Ku každému prvku vo formulári vytvárame a priraďujeme súbor „validačných deskriptorov“. „Deskriptor overenia“ je reťazec špecifikujúci typ overenia, ktoré sa má vykonať. Napríklad „req“ znamená povinné, „alfa“ znamená povolené len abecedné znaky atď.

Každé pole vo formulári môže mať nula, jedno alebo viac validácií. Napríklad vstup by nemal byť prázdny, mal by mať menej ako 25 znakov, mal by byť alfanumerický atď.

Ku každému vstupnému poľu vo formulári môžete priradiť sadu validačných deskriptorov.

Stiahnite si skript na overenie formulára PHP

Nižšie si môžete stiahnuť skript na overenie formulára PHP:
Súbor zip obsahuje skript na overenie formulára formvalidator.php, dokumentáciu a ukážky použitia.

Pomocou skriptu na overenie formulára PHP

Zahrňte formvalidator.php do skriptu na spracovanie formulára

require_once "formvalidator.php"

Vytvorte objekt FormValidator a pridajte deskriptory overenia formulára.

$validator = new FormValidator(); $validator->addValidation("Name","req","Vyplňte meno"); $validator->addValidation("E-mail","email", "Vstup pre e-mail by mal byť platnou hodnotou e-mailu"); $validator->addValidation("E-mail","req","Vyplňte prosím e-mail");

Prvým argumentom je názov vstupného poľa vo formulári. Druhým argumentom je deskriptor validácie, ktorý hovorí o type požadovanej validácie. Tretím argumentom je chybové hlásenie, ktoré sa zobrazí, ak overenie zlyhá.

Overte formulár volaním funkcie ValidateForm().

if(!$validator->ValidateForm()) ( echo "Chyby overenia:"; $error_hash = $validator->GetErrors(); foreach($error_hash ako $inpname => $inp_err) ( echo "

$inpname: $inp_err

\n"; ) ) Príklad

Nasledujúci príklad objasní myšlienku

Meno: Email:

Pridanie vlastného overenia

Ak chcete pridať vlastné overenie, ktoré nie je poskytované deskriptormi overenia, môžete tak urobiť. Tu sú kroky:

Vytvorte triedu pre vlastné overenie a prepíšte funkciu DoValidate().

class MyValidator rozširuje CustomValidator ( funkcia DoValidate(&$formars,&$error_hash) ( if(stristr($formars["Comments"],"http://")) ( $error_hash["Comments"]="Nie sú povolené žiadne adresy URL v komentároch"; return false; ) return true; ) )

Pridajte objekt vlastnej validácie

$validator = new FormValidator(); $validator->addValidation("Name","req","Vyplňte meno"); $validator->addValidation("E-mail","email", "Vstup pre e-mail by mal byť platnou hodnotou e-mailu"); $validator->addValidation("E-mail","req","Vyplňte prosím e-mail"); $custom_validator = new MyValidator(); $validator->AddCustomValidator($custom_validator);

Vlastná overovacia funkcia sa zavolá automaticky po iných overeniach.

Tabuľka deskriptorov validácie

Tu je zoznam všetkých validačných deskriptorov:

Validačný deskriptor	Použitie
req	Pole by nemalo byť prázdne
maxlen=???	skontroluje dĺžku zadávaných údajov na maximum. Ak je napríklad maximálna povolená veľkosť 25, uveďte deskriptor overenia ako „maxlen=25“
minlen=???	skontroluje dĺžku zadaného reťazca na požadované minimum. príklad „minlen=5“
alnum	Skontrolujte, či údaje neobsahujú iné znaky ako abecedné alebo číselné znaky
alnum_s	Povoľuje iba abecedné, numerické a medzerové znaky
č	Skontrolujte číselné údaje
alfa	Skontrolujte abecedné údaje.
alfa_s	Skontrolujte abecedné údaje a povoľte medzery.
email	Toto pole je pole e-mailu a overuje platnosť údajov.
lt=??? menej ako =???	Overte, či sú údaje menšie ako odovzdaná hodnota. Platí len pre číselné polia. príklad: ak by hodnota mala byť menšia ako 1000, uveďte popis overenia ako „lt=1000“
gt=??? väčšie ako =???	Overte, či sú údaje väčšie ako odovzdaná hodnota. Platí len pre číselné polia. príklad: ak by hodnota mala byť väčšia ako 10, uveďte popis overenia ako „gt=10“
regexp=???	Pomocou regulárneho výrazu skontrolujte, či by sa hodnota mala zhodovať s regulárnym výrazom. príklad: „regexp=^(1.20)$“ povoľuje až 20 abecedných znakov.
nevyberaj=??	Tento deskriptor overenia je určený pre vybrané vstupné položky (zoznamy) Za normálnych okolností budú polia so zoznamom obsahovať jednu položku s názvom „Vybrať jednu“. Používateľ by si mal vybrať inú možnosť ako túto. Ak je hodnota tejto možnosti „Vybrať jednu“, popis overenia by mal byť „dontselect=Vybrať jednu“
dontselectchk	Tento deskriptor overenia je určený pre začiarkavacie políčka. Používateľ by nemal začiarknuť dané políčko. Zadajte hodnotu začiarkavacieho políčka namiesto ?? Napríklad dontselectchk=on
shouldselchk	Tento deskriptor overenia je určený pre začiarkavacie políčka. Používateľ by mal začiarknuť príslušné políčko. Zadajte hodnotu začiarkavacieho políčka namiesto ?? Napríklad shouldselchk=on
nevyberať rádio	Tento deskriptor overenia je určený pre prepínače. Používateľ by nemal vybrať daný prepínač. Zadajte hodnotu prepínača namiesto ?? Napríklad dontselectradio=NO
výberové rádio	Tento deskriptor overenia je určený pre prepínače. Používateľ by mal vybrať daný prepínač. Zadajte hodnotu prepínača namiesto ?? Napríklad selectradio=yes
selmin=??	Vyberte aspoň n počet začiarkavacích políčok zo skupiny začiarkavacích políčok. Napríklad: selmin=3
selone	Nastaví rádiovú skupinu ako povinnú. Používateľ by mal vybrať aspoň jednu položku zo skupiny rádia.
eqelmnt=???	porovnajte dva prvky vo formulári a uistite sa, že hodnoty sú rovnaké, napríklad „heslo“ a „potvrdiť heslo“. Vymeniť ??? s názvom druhého vstupného prvku. Napríklad: eqelmnt=confirm_pwd

Budeme hovoriť o overovaní údajov POST alebo GET, aj keď v zásade to možno použiť aj na údaje prijaté inými metódami, ako sú súbory cookie. Pri vývoji akejkoľvek webovej aplikácie musíte napísať rozhranie na interakciu s používateľmi a prirodzene vytvárať rôzne formuláre pre používateľov na odosielanie údajov na server. môžu to byť napríklad komentáre. Myslím, že každému je jasné a zrejmé, že prijaté údaje je potrebné skontrolovať, či zodpovedajú typu, veľkosti a špecifikovanému rozsahu. V prvom rade je to potrebné pre bezpečnosť systému, webovej stránky alebo databázy, pretože... Nesprávne prenesené údaje alebo zámerne zle vytvorená požiadavka môžu útočníkovi otvoriť prístup.

Po druhé, neoverené údaje, ak sú nesprávne, môžu spôsobiť nestabilnú prevádzku skriptu, systému alebo celého servera. Všetky údaje je preto potrebné kontrolovať a preverovať, možno si niekto povie, že netreba prehnanú paranoju, ale ja verím, že v tejto veci to prehnané byť jednoducho nemôže.

Pod žiadnou zámienkou a za žiadnych okolností neverte údajom prijatým od používateľov. Stáva sa, že sme jednoducho príliš leniví na to, aby sme ešte raz napísali kód, ktorý skontroluje prijaté údaje, alebo dúfame, že existujúce metódy overovania stačia, v dôsledku čoho robíme ústupky sami sebe.

Malá odbočka od témy:
Práca na projektoch, vývoj a programovanie webstránok, skriptov a iných systémov mi zaberá takmer všetok voľný čas (okrem pracovného času), inak povedané, venujem sa tejto práci maximálne možnému počtu hodín denne. Z času na čas je potrebné niečo otestovať, pre zábavu alebo len pre zaujímavosť. Výsledkom je, že stránky vytvorené narýchlo pomocou domácich motorov alebo CMS starých verzií sa stávajú podobnými testovacími laboratórnymi potkanmi. Samozrejme, všetko spomenuté trpí krivo napísaným kódom, nedostatočnou kontrolou dát a jednoducho sa to len hemží rôznymi chybami. V skutočnosti sa mi vo väčšine prípadov za hodinu mojich experimentov na takýchto stránkach podarí nájsť niekoľko vážnych zraniteľností a väčšina z nich spočíva v nedostatočnom overení prichádzajúcich dát. V poslednej dobe sa to často nachádza v skriptoch, ktoré spracúvajú údaje POST prijaté z JavaScript + Ajax.

Zdá sa, že programátori, ktorí napísali tieto skripty pomocou Ajaxu, veria, že keďže sa všetky požiadavky vyskytujú na pozadí, bez vedomia používateľa alebo jednoducho bez opätovného načítania stránky, údaje nie je potrebné zvlášť kontrolovať.

Spravidla sa ukáže, že nemálo týchto skriptov je tak plných dier, že sa im bez väčšej námahy podarí urobiť väčšiu dieru a zatopiť si škrupinu. samozrejme, len za účelom experimentovania a nič viac (správa takýchto stránok je vždy informovaná o existujúcich zraniteľnostiach).

Myslím si, že dôležitosť validácie je každému jasná. Dlho som písal zakaždým ten istý kus kódu, potom som použil svoje vlastné funkcie overovania údajov, z ktorých mnohé boli veľmi primitívne a spravidla roztrúsené v rôznych častiach (zahrnutých) súborov. Čoskoro som sa začal zoznamovať s PHP frameworkami Zend, CI, Kohana, z ktorých každý implementoval svoju vlastnú triedu na validáciu dát, ktoré som si požičal pre svoje projekty. Nakoniec som sa rozhodol, že si jednu z CI tried ušijem na mieru, no ukázalo sa, že autor jedného z programátorských blogov sa už o to postaral. Ďalej zdieľam jeho diela, konkrétne upravenú knižnicu CodeIgniter.

Pozrime sa na nasledujúci kód:

Zobraziť kód PHP

require_once "validator.class.php" ; $validator = new Validator() ; $validator -> set_rules ("meno" , "Vaše meno" , pole ("povinné" => , "alfa" => ) ) ; $validator -> set_rules ("email" , "Váš e-mail" , pole ("požadované" => "Pole %s je povinné" , "valid_email" => ) ) ; if ($validator -> run () ) ( echo "Overenie bolo úspešné" ; ) else ( echo $validator -> get_string_errors () ; )

Ako môžete vidieť z príkladu, v prvom riadku zahrnieme súbor triedy validator.calss.php do nášho scenára. Ďalej vytvoríme inštanciu triedy a uložíme objekt do premennej $validator.
Potom pomocou metódy $validator->set_rules($field, $label, $rules) nastavte polia na overenie.

Táto metóda má 3 parametre:

$pole- názov overovacieho poľa (hodnota atribútu name v značke)

$label- názov validačného poľa, bude vložený do chybových hlásení

$pravidlá- pole overovacích pravidiel, v ktorých sa ako kľúč používa overovacie pravidlo a ako hodnota sa používa chybové hlásenie pre toto pravidlo

Po nastavení všetkých polí na validáciu spustíme validátor pomocou metódy $validator->run(). Ak bola validácia úspešná, táto metóda vráti hodnotu PRAVDA, inak, ak sa vyskytnú nejaké chyby, vráti sa FALSE.

Chybové hlásenia môžete prijímať tromi spôsobmi:

get_string_errors()- vráti všetky chybové hlásenia ako reťazec

get_array_errors()— vráti všetky správy ako pole, kde sa ako kľúč použije názov poľa a ako hodnota sa použije popis chyby pre toto pole.

form_error($field)- vráti chybovú správu pre pole zadané ako parameter $field

V predvolenom nastavení sú chybové správy zabalené do značky . Ak chcete nastaviť svoj dizajn, použite metódu set_error_delimiters($prefix, $suffix). Napríklad takto:

Chybové hlásenia sa teraz budú zobrazovať ako div s triedou "chyba"

Ako vidíte, všetko je veľmi jednoduché.

Zobraziť kód PHP

$validator -> set_error_delimiters ( " " , " " ) ;

Ak chcete nastaviť pravidlá overovania, môžete použiť metódu set_rules($fields) prejsť viacrozmerné asociatívne pole. Pozrime sa na príklad:

Zobraziť kód PHP

$rules = pole ( pole ( "pole" => "meno" , "label" => "Vaše meno" , "pravidlá" => pole ( "povinné" => "Pole %s je povinné" , "alpha" = > "Pole %s musí obsahovať iba písmená" ), pole ( "pole" => "e-mail" , "štítok" => "Váš email" , "pravidlá" => pole ( "požadované" => "Pole % s je povinné" , "valid_email" => "Pole %s musí obsahovať platnú e-mailovú adresu" ) ) ); $validator -> set_rules ($rules ) ;

Ako vidíte, zapísal som si rovnaké overovacie pravidlá ako v prvom príklade, len vo forme viacrozmerného asociatívneho poľa. Môžete použiť ktorýkoľvek zo spôsobov, ktorý vám v danej situácii najviac vyhovuje.

Aké pravidlá overovania teda táto trieda podporuje?

Na túto hodinu som priniesol najčastejšie overovacie pravidlá, s ktorými sa každý stretáva. Tu je úplný zoznam týchto pravidiel:

požadovaný	Ak je pole prázdne, vráti hodnotu FALSE
celé číslo	Ak hodnota nie je celé číslo, vráti hodnotu FALSE
plavák	Vráti FALSE, ak hodnota nie je číselná hodnota
platná_url	Ak hodnota nie je platnou adresou URL, vráti hodnotu FALSE
platný email	Ak hodnota nie je platnou e-mailovou adresou, vráti hodnotu FALSE
platná_ip	Ak adresa IP nie je platná, vráti hodnotu FALSE
zápasy	Vráti hodnotu FALSE, ak sa prvok nezhoduje s hodnotou iného prvku poľa
alfa	Vráti FALSE, ak prvok obsahuje viac ako len písmená
valid_captcha	Vráti hodnotu FALSE, ak sa hodnota v poli relácie nerovná hodnote poľa formulára
platný dátum	Ak prvok obsahuje neplatný dátum, vráti hodnotu FALSE

Väčšina týchto pravidiel používa filtre, ktoré sa stali dostupnými v PHP 5.

Ak chcete, vždy môžete rozšíriť sadu pravidiel pre overenie pridaním potrebných funkcií do triedy Validator.

Ak chcete získať spracovanú hodnotu údajov POST, použite nasledujúcu metódu:

Zobraziť kód PHP

Zvyčajne sa táto metóda volá na vymazanie formulára po úspešnom spracovaní formulára.

Dobrý večer všetkým (skôr noc – pozn. red.). Dnes to trochu vylepšíme. Najprv sa naučme, ako vykonať overenie formulárov v PHP a urobiť nejaké bezpečnostné manipulácie.

Pozrite sa teda na kód nižšie a všimnite si nasledujúce zmeny a nasledujúce dôvody zmien. Všetky nové riadky som zvýraznila farbou.

Názov polí formulára bol zmenený. Môžete sa opýtať – prečo to do pekla potrebujeme? Je to jednoduché, odpoviem ti. Pokiaľ viem, niektorí spamoví roboti prehľadávajú stránky, hľadajú formuláre a vypĺňajú ich na základe názvov týchto polí. Teoreticky, ak nenájdu zhodu, potom idú domov, čo je to, čo chceme. Samozrejme, nemyslím si, že stupeň tejto ochrany je obzvlášť veľký, ale neublíži nám to a ak sa spamové e-maily znížia o 1 písmeno, bude to dobré =).

Kontrola, či je e-mailová adresa zadaná správne. V riadku 17 sa používa operátor elseif, ktorý sa skontroluje, ak sa nám vráti kladná odpoveď, teda že e-mailová adresa vôbec chýba, teda nie je zadaná. Tu využívame funkciu preg_match, ktorá nám umožňuje porovnať zadanú adresu s regulárny výraz. Možno o regulárnych výrazoch krátko napíšem neskôr, ale nateraz stojí za to vedieť, že regulárny výraz vytvára akúsi šablónu, podľa ktorej sa kontroluje náš reťazec. A ak sa v našom prípade zadaná adresa nezhoduje s výrazom, opäť sa zobrazí chyba. Tu je napríklad niekoľko ďalších regulárnych výrazov:
|^[-а-яе\s\.,;:\?!]+$|i– tento regulárny výraz vám umožňuje používať iba ruskú abecedu a niektoré znaky, ako je medzera, bodka, čiarka atď.
#http://[-a-z0-9_.]+[-a-z0-9_:@&?=+,.!/~*’%$]*\.(html?|php)#i– a tento výraz vám umožňuje skontrolovať správnosť pravopisu adresy na internete.

Ďalej používame operátora else, kde už bol prenesený celý náš kód na odoslanie listu. Verifikačné pravidlá si môžete vytvárať sami v akomkoľvek množstve, stačí ak pridáte nové, napríklad na kontrolu e-mailovej adresy, a budete spokojní.

Kontaktná osoba:

Kontaktný email:

Správa:

Takto môžete overiť svoje formuláre PHP bez toho, aby ste sa uchýlili k niečomu cudziemu. Myslím, že nabudúce v príspevku na tému formulárov sa bude brať do úvahy validácia formulárov v jQuery. Zatiaľ čakám na vaše pripomienky a želania. Dobrú noc a dobré ráno všetkým =).

Táto a ďalšie kapitoly ukazujú, ako používať PHP na overenie údajov formulárov.

Overenie formulára PHP

Myslite na BEZPEČNOSŤ pri spracovaní formulárov PHP!

Tieto stránky ukážu, ako spracovávať formuláre PHP s ohľadom na bezpečnosť. Správna validácia údajov formulára je dôležitá na ochranu vášho formulára pred hackermi a spamermi!

HTML formulár, s ktorým budeme v týchto kapitolách pracovať, obsahuje rôzne vstupné polia: povinné a voliteľné textové polia, prepínače a tlačidlo odoslania:

Pravidlá overenia vyššie uvedeného formulára sú nasledovné:

Pravidlá overenia poľa

názov	Požadovaný. + Musí obsahovať iba písmená a medzery
Email	Požadovaný. + Musí obsahovať platnú e-mailovú adresu (s @ a .)
webové stránky	Voliteľné. Ak existuje, musí obsahovať platnú webovú adresu
Komentujte	Voliteľné. Viacriadkové vstupné pole (textová oblasť)
rod	Požadovaný. Musíte vybrať jednu

Najprv sa pozrieme na obyčajný HTML kód pre formulár:

Textové polia

Polia mena, e-mailu a webovej lokality sú prvky na zadávanie textu a pole komentára je textová oblasť. HTML kód vyzerá takto:

Názov:
Email:
Webstránka:
komentár:

Prepínače

Polia pohlavia sú prepínače a kód HTML vyzerá takto:

Rod:
Žena
Muž
Iné

Prvok formulára

HTML kód formulára vyzerá takto: