HTML formuláre. Formuláre HTML Ktorý prvok vám umožňuje odoslať formulár

Formuláre v HTML sú najťažšou, ale na druhej strane možno najzaujímavejšou témou v HTML.

Webové formuláre umožňujú návštevníkom stránok zadávať určité informácie do špeciálnych polí a vývojár ich môže dostať vo forme, ktorá mu vyhovuje.

Príkladom formulára je kniha návštev, dotazník, online test. Formuláre sa vypĺňajú pri registrácii na webe, pri zadávaní objednávok v internetovom obchode atď.

Pomocou HTML môžete vytvoriť kostru formulára: textové polia, ponuky, zoznamy, tlačidlá, začiarkavacie políčka a prepínače. To znamená, že tie prvky, pomocou ktorých sa do formulára zadávajú určité informácie.

Údaje zadané vo formulári sa potom odošlú na server na spracovanie. Ale HTML je tu bezmocné - program alebo skript už pracuje na spracovaní formulára, ktorý je k nemu pripojený. Takéto programy sú zvyčajne napísané v jazyku php alebo javascript.

Atribúty formulára - značka

Na webovej stránke môže byť niekoľko formulárov ( toľko, koľko vývojár potrebuje). Každý z nich začína štítkom a končí sa zatváracou značkou .

Atribút action je vyžadovaný pre akýkoľvek formulár - určuje adresu súboru, ktorý slúži formuláru ( spracováva údaje, ktoré sú doň vložené).

Atribút method určuje, ako sa obsah formulára odošle. Existujú dve metódy - ZÍSKAŤ a POST. Teraz nemá zmysel zaoberať sa týmito parametrami, pretože téma odosielania informácií pomocou metód GET a POST sa týka jazykov spracovania údajov ( napríklad PHP). Stačí vedieť, že je to metóda prenosu údajov POST, ktorá sa vo väčšine prípadov používa vo väčšine foriem.

Atribút názvu značky

je voliteľné. Ale ak je v dokumente niekoľko formulárov, potom musí každý z nich obsluha nejako identifikovať. Preto je prítomnosť atribútu name v tomto prípade potrebná - nastavuje jedinečný názov pre formulár.

Môžete tiež nastaviť kódovanie vstupných údajov - za to zodpovedá atribút accept -charset, a tiež pomocou cieľového atribútu určiť okno, v ktorom sa zobrazí výsledok spracovania odoslaného formulára ( v novom alebo aktuálnom okne).

Ale samotná značka nedáva to zmysel, pretože formulár prenáša údaje, ktoré je potrebné najskôr niekde zadať!

Vstup dát. Polia formulára - značka

Označiť toto je najčastejšie používaná značka vo formulároch. Je určený na vytváranie rôznych prvkov, ktoré slúžia na zadávanie údajov do formulára: sú to textové polia, tlačidlá, začiarkavacie políčka, prepínače.

typ je hlavným atribútom značky ... Nastavuje typ poľa ( element) formy:

Hodnota atribútu type = "..."	Výsledok	Popis
		Jednoriadkové textové pole na zadávanie textu. Atribút size určuje šírku poľa v znakoch.
		Textové pole na zadanie hesla. Atribút maxlength určuje maximálny počet znakov, ktoré je možné zadať
		Prepnúť. Môžete si vybrať iba jednu z ponúkaných možností. Začiarknutý atribút definuje vopred označené pole.
		Začiarkavacie políčko. K dispozícii je niekoľko možností. Pripisovať zaškrtnuté definuje vopred začiarknuté pole.
		Tlačidlo. Atribút value nastavuje označenie na tlačidle.
		Tlačidlo reštart. Vráti polia formulára do pôvodného vzhľadu. Resetovanie zadaných údajov.
		Tlačidlo na odoslanie zadaných údajov.
		Pole pre zadanie názvu odovzdaného súboru.
		Obrazové tlačidlo. Slúži tiež na odosielanie údajov na server. Atribút src určuje adresu súboru s obrázkom.
		Skryté pole je pre používateľa neviditeľné.

Rozbaľovacia ponuka - Značky a

Označiť

ako aj štítok slúži na zber informácií - vytvára zoznam, z ktorého si môžete vybrať jednu alebo viac položiek. Každý prvok má zodpovedajúcu hodnotu, ktorá je odoslaná na server na spracovanie.

Typ vytvoreného zoznamu závisí od hodnoty atribútu size: keď size = "1" ( predvolené) zoznam bude rozbaľovací.

Odlišná hodnota pre atribút size bude zodpovedať počtu zobrazených položiek zoznamu. Napríklad pri veľkosti = "3" budú viditeľné tri položky. Ak chcete zobraziť ostatné položky zoznamu ( Ak nejaký), mali by ste použiť zvislý posúvač, ktorý sa pridá automaticky.

Štandardne je možné vybrať iba jednu položku zoznamu. Pridanie atribútu multiple do značky umožňuje vybrať niekoľko položiek v zozname pomocou myši a klávesov Ctrl a Shift.

Ak je prítomný atribút multiple, zobrazia sa všetky položky zoznamu alebo ich časť ( v závislosti od prehliadača), ak atribút size nie je nastavený na určitý počet viditeľných bodov.

Požadovaným prvkom rozbaľovacieho zoznamu je značka

... Nachádza sa vo vnútri štítku a vytvorí každú položku zoznamu.

Použitie atribútu name značky zoznam dostane názov a použije sa atribút hodnoty značky položke zoznamu je priradená hodnota. Na server sa teda odošle dvojica „name = value“ - názov zoznamu a hodnota vybratého prvku / prvkov.

Atribút vybraný značkou

definuje vopred zvolenú položku zoznamu a deaktivovaný atribút blokuje položku zoznamu - nemožno ju vybrať.

Svetová strana je jedným zo štyroch hlavných smerov:

Sever
Juh
Západ
Východ

7 divov sveta!

Cheopsova pyramída
Visuté záhrady v Babylone
Socha Dia v Olympii
Artemidin chrám v Efeze
mauzóleum v Halikarnase
Rhodský kolos
Alexandrijský maják

Viacriadkové textové pole - značka </h3> <p>Označiť <textarea>vytvorí viacriadkové textové pole. Je v ňom dovolené robiť prerušenia riadkov, ktoré sa ukladajú pri prenose údajov do obsluhy.</p> <p>Atribút názvu značky <textarea>je povinné - textovému poľu pomocou neho priradíte meno.</p> <p>Vypnutý atribút blokuje pole - obsah poľa nie je možné zmeniť a nie je k dispozícii. Atribút readonly označuje, že pole je len na čítanie - používateľ nemôže upravovať obsah, ale je k dispozícii - dá sa vybrať a napríklad skopírovať.</p> <p>Pomocou atribútov stĺpce a riadky môžete nastaviť šírku textového poľa v znakoch a výšku poľa v riadkoch.</p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Ak obsah poľa presiahne jeho veľkosť, zobrazí sa posuvník.</span>

Ak obsah poľa presiahne jeho veľkosť, zobrazí sa posuvník.

Príklad použitia formulára

Teraz sa pozrime, ako formulár funguje.

Formulár objednávky školiaceho videa:

Tvoje meno: *

Vaša objednávka:

HTML video návod
Video tutoriál CSS
Videonávod PHP

Vyberte médium:

CD

DVD

USB Flash

Tvoj email: *

Vaša adresa: *

HTML. Formy a ich atribúty

Prvky formulára poznajú všetci používatelia modernej globálnej siete. Ide o polia na zadávanie textu a hesla, štandardné tlačidlá, prepínače, začiarkavacie políčka, rozbaľovacie zoznamy atď. Najzrejmejšie prípady použitia sú: zadávanie kľúčových slov do vyhľadávacích nástrojov, práca s elektronickou poštou prostredníctvom webového rozhrania, registrácia na webovej stránke, webové profily, online testy. Ihneď poznamenávame, že používanie formulárov znamená interaktivitu, a preto je poskytovanie funkcií nevyhnutne spojené s programovaním (klient alebo server). Vo väčšine prípadov sa možno na prenos údajov na server používajú formuláre, na strane klienta však existujú úlohy, v ktorých je vhodné používať formuláre (napríklad kalendár alebo kalkulačka).

Úlohou HTML je popísať požadované prvky a usporiadať ich na stránke. Všetky atribúty foriem a ich prvkov, ktoré sú popísané pomocou HTML, sú preložené do zodpovedajúcich vlastností objektov DOM a použité v skriptovaní JavaScript.

Popisy ovládacích prvkov formulárov, ktoré sú navrhnuté tak, aby poskytovali potrebné funkcie, by mali byť umiestnené v kontajneri formulárov, ktorého atribúty sú vo fáze skriptovania nevyhnutné. Hlavné atribúty prvku formulára sú:

atribút	popis	možné hodnoty
názov	názov
akcie	adresa súboru skriptu servera, ktorý spracuje vyplnený a odoslaný formulár
metóda	spôsob prenosu údajov na server	dostať príspevok
enctype	typ obsahu použitý na odoslanie formulára na server	viacdielne / formulárové údaje
prijať-znakovú sadu	zoznam kódovaní znakov pre vstup údajov, ktoré bude server spracovávať
cieľ
onSubmit	Skript JavaScript sa spustí pred odoslaním údajov z formulára na server
onReset	JavaScript sa spustí, keď resetujete hodnoty prvkov formulára na ich predvolené hodnoty

Po starostlivom prečítaní popisov atribútov si všimnete, že väčšina z nich je relevantných pri spracovaní údajov formulára v skripte na strane servera. Tri atribúty majú predvolené hodnoty (čo je v HTML všeobecne neobvyklé).

Všetky vyššie uvedené atribúty sú však formálne voliteľné

• pri práci na strane klienta musíte zadať názov názvu formulára, aby ste mohli pristupovať k prvkom formulára z JavaScriptu;
• Odoslanie údajov z formulára na server vyžaduje aspoň atribút akcie, ktorý definuje skript na strane servera.

Význam najmenej dvoch atribútov je potrebné podrobnejšie vysvetliť.

Atribút metódy

Atribút method má dve hlavné možné hodnoty: get (predvolené) a post.

Význam týchto hodnôt je nasledujúci. Pri odosielaní údajov pomocou metódy get sa údaje formulára odošlú na server v hlavičke požiadavky a pri použití metódy post sa odošlú v tele žiadosti. Prenos textových údajov je možné vykonať ktoroukoľvek z týchto metód. Binárne údaje je však možné odoslať iba metódou post. Stáva sa to pri sťahovaní súboru z iného servera (každý rozumie príkladu - prílohe k e -mailu). Mimochodom, v tomto prípade je potrebné zadať enctype = ”multipart / form-data” (pozri ďalšie poznámky k atribútu enctype).

Takže okrem prípadu prenosu binárnych údajov je možné obe možné metódy použiť rovnako. To nijako neovplyvňuje zložitosť vývoja serverového skriptu, ktorý prijíma údaje z formulára. Aký je preferovaný spôsob? Má zmysel podrobne sa pozrieť na zdroje dostupné na webe a uistiť sa, že metóda get je používaná vo veľkej väčšine prípadov (napríklad vo vyhľadávačoch). Možno to považovať za nevyslovené pravidlo? Ak chcete odpovedať na túto otázku, mali by ste porovnať metódy získavania a odosielania najmenej v troch aspektoch: množstvo prenesených dát, zabezpečenie a jednoduchosť ovládania.

1. Je potrebné mať na pamäti, že maximálne množstvo údajov prenášaných metódou get je obmedzené, v závislosti od nastavení protokolu, a v žiadnom prípade nesmie prekročiť 8192 KB.
2. Odovzdávanie dôverných informácií pomocou metódy get určite predstavuje určité bezpečnostné riziko, pretože reťazec get zostáva v denníkoch všetkých medziľahlých serverov a servera proxy.
3. Na druhej strane môžete premýšľať o tom, ktorá možnosť je pre používateľa informačného zdroja výhodnejšia.

Keď používateľ prejde metódou get, má to potešenie vidieť údaje formulára v paneli s adresou. Znaky iné ako štandardná latinská abeceda sú kódované. Napríklad priestor je% 20. Každý z nás pri práci s vyhľadávačmi túto situáciu neustále pozoruje. Nastavme napríklad v Yandexe kombináciu kľúčových slov „ Jazyk HTML"A do panela s adresou pozrite:

Slovo " Jazyk"Je kódovaný sekvenciou% FF% E7% FB% EA a" HTML "je prenášaný tak, ako je. Po prijatí takejto žiadosti príslušný serverový program vstúpi do databázy a nakoniec vygeneruje a odošle zoznam výsledkov vyhľadávania do prehliadača. Je príjemné pozerať sa na taký panel s adresou? Nie Používateľ si však môže na vygenerovanú stránku uložiť jedinečnú záložku.

Pri odoslaní metódou odoslania sa údaje formulára odošlú aj na server. Užívateľ zároveň v paneli s adresou nevidí nič „nadbytočné“. Ale objavujú sa aj ďalšie problémy: pokus o obnovenie stránky spôsobuje správu, ktorá je pre väčšinu používateľov nepochopiteľná: „... stránku nie je možné obnoviť bez opätovného odoslania údajov ...“. Záložku neukladajte.

Zhrnutie. Zdá sa, že vo väčšine typických úloh by ste mali vo všetkých prípadoch zvoliť predvolenú metódu získania, okrem prevody na server:

• binárne údaje,
• dôverné informácie,
• veľké množstvo dát.

Atribút Enctype

Tento atribút má dva možné významy:

• application / x-www-form-urlencoded(predvolené)
• viacdielne / formulárové údaje

Prvá hodnota sa používa v prevažnej väčšine prípadov. Nemá zmysel to výslovne špecifikovať - ​​už sa to predvolene predpokladá. Druhý typ kódovania (multipart / form-data) je uvedený v jedinom prípade: pri odosielaní binárneho súboru na server. V tomto prípade je povinné nastaviť atribút method = "post".

Priradenie formulárov

Formuláre HTML sú navrhnuté tak, aby odosielali údaje od vzdialeného používateľa na webový server. S ich pomocou môžete zorganizovať najjednoduchší dialóg medzi používateľom a serverom, napríklad registráciou používateľa na serveri alebo výberom požadovaného dokumentu z poskytnutého zoznamu. Formuláre sú podporované všetkými obľúbenými prehliadačmi.

Syntax formulára

Dokument HTML na definovanie formulára používa značky

…

, Dokument môže obsahovať niekoľko formulárov, ale nemožno ich navzájom vkladať.

Označiť

má parametre akcie, metóda a enctype. Niektoré prehliadače (Netscape, Internet Explorer) podporujú ďalšie parametre, ako sú trieda, názov, štýl atď.

Vo všeobecnosti je formulár nastavený takto:

form_obsah

Parameter akcie je jediný požadovaný. Jeho hodnota je adresa URL programu CGI, ktorý spracuje informácie získané z tohto formulára.

Interakcia medzi prehliadačom a webovým serverom

Interakcia medzi klientským prehliadačom a webovým serverom sa vykonáva podľa pravidiel stanovených protokolom HTTP a pozostáva z požiadaviek klientov a odpovedí servera. Žiadosť je rozdelená na tri časti. Prvý riadok požiadavky obsahuje príkaz HTTP nazývaný metóda, adresu URL požadovaného súboru a číslo verzie protokolu HTTP. Druhá časť je hlavička žiadosti. Treťou časťou je telo žiadosti, skutočné údaje odoslané na server.

MIME typy

Jedným z prvých použití internetu bol e-mail, ktorý bol určený na odosielanie textových správ. Spolu s textom je často potrebné odosielať údaje v netextovom formáte, napríklad zabalený súbor zip, obrázok vo formáte GIF, JPEG atď. Na odoslanie takýchto súborov e-mailom bez skreslenia sú potrebné kódované podľa určitej normy ... Štandard MIME (Multipurpose Internet Mail Extensions) definuje množinu typov MIME, ktoré zodpovedajú rôznym typom údajov, a pravidlá pre ich odosielanie e -mailom. Na označenie typu MIME sa používa zápis typu / podtypu, kde typ definuje všeobecný typ údajov, napríklad text, obrázok, aplikáciu (typ aplikácie označuje konkrétny interný formát údajov používaný niektorým programom) a podtyp. je špecifický formát v rámci typu údajov, napríklad aplikácia / zip, obrázok / gif, text / html.

Typy MIME našli použitie na webe, nazývané aj typy médií, na identifikáciu formátu dokumentov prenášaných prostredníctvom protokolu HTTP. Vo formáte HTML parameter enctype definuje typ média, ktoré sa používa na kódovanie a preposielanie špeciálny dátový typ- obsah formulára.

Hodnota parametra enctype je typ média, ktorý určuje formát kódovania údajov pri ich prenose z prehliadača na server. Prehliadač šifruje údaje, aby sa zabránilo poškodeniu počas prenosu. Pre tento parameter existujú dve možné hodnoty: (predvolené) a multipart / form-data.

Druhá metóda je potrebná iba vtedy, ak je k obsahu formulára pripojený lokálny súbor vybraný pomocou prvku formulára ... V opačnom prípade použite predvolenú metódu kódovania.

Kódovanie adresy URL

Schéma kódovania application / x-www-form-urlencoded je rovnaký pre oba spôsoby prenosu (GET a POST) a je nasledujúci. Pre každý prvok formulára s názvom určeným parametrom name je vytvorený pár „name = hodnota“, kde hodnota je hodnota prvku zadaná používateľom alebo priradená predvolene. Ak neexistuje žiadna hodnota, zodpovedajúca dvojica je „name =“. Pre prepínače a prepínače sa použijú iba hodnoty vybratých položiek. Ak je vybratá položka a pre parameter hodnoty nie je zadaná žiadna hodnota, predvolená hodnota je „zapnuté“.

Všetky páry sú zreťazené do reťazca s oddeľovačom „&“. Keďže názvy a hodnoty sú obyčajný text, môžu obsahovať znaky, ktoré nie sú v adrese URL platné (metóda GET odosiela údaje ako súčasť adresy URL). Také znaky sú nahradené sekvenciou pozostávajúcou zo znaku% a ich hexadecimálneho kódu ASCII. Medzeru je možné nahradiť nielen kódom% 20, ale aj znamienkom + (plus). V poli sa našiel ukončovač linky textarea, sa nahrádza kódom% 0D% 0A. Toto kódovanie sa nazýva kódovanie URL.

Metódy prenosu dát

Kódované informácie sú odoslané na server jednou z metód GET alebo POST. Hlavným rozdielom je spôsob, akým metóda komunikuje informácie s programom CGI.

Pri použití metódy GET sa údaje formulára odošlú ako súčasť adresy URL žiadosti, ktorá sa pridá za znak „?“ ako súbor párov

premenná = hodnota,

oddelené „&“. V takom prípade môže prvý riadok dopytu vyzerať takto:

ZÍSKAŤ /cgi-bin/cgi-program.pl?name=Ivan&surname=Ivanov HTTP /1.1

Časť adresy URL za znakom „?“ sa nazýva reťazec dotazu. Webový server prijme požiadavku a priradí ju premenná prostredia QUERY_STRING hodnotu reťazca dopytu a zavolá program CGI uvedený v prvej časti adresy URL pred znakom „?“ ...

Pri použití metódy POST sa údaje formulára odošlú na server v tele žiadosti, potom sa odošlú serverom do programu CGI prostredníctvom štandardný vstup.

Metódy GET a POST majú svoje výhody a nevýhody. Metóda GET poskytuje najlepší výkon pri odosielaní formulárov s malou sadou krátkych polí. Pri odosielaní veľkého množstva údajov by ste mali použiť metódu POST, pretože prehliadač alebo server môže uložiť obmedzenia na veľkosť údajov prenášaných ako súčasť adresy URL a vyradiť niektoré údaje, ktoré presahujú hranice. Metóda POST je tiež spoľahlivejšia pri preposielaní. dôverné informácie.

Vstupné polia formulára

Formulár sa zobrazí v okne prehliadača ako sada štandardných ovládacích prvkov používaných na vyplnenie polí formulára hodnotami, ktoré sú potom odoslané na webový server. Hodnota je zadaná do vstupného poľa používateľom alebo je predvolene priradená. Na vytváranie polí pomocou HTML existujú špeciálne značky: , , < textarea> ktoré sa používajú iba vo vnútri značky

.

Označiť

Toto je najbežnejší tag, pomocou ktorého môžete vo formulári generovať polia na zadanie textu, hesla, názvu súboru, rôznych tlačidiel. Má dva požadované parametre: typ a meno. Parameter type definuje typ poľa: prepínač, tlačidlo Odoslať atď. Parameter name definuje názov priradený k poľu. Nezobrazuje sa v prehliadači, ale slúži ako identifikátor hodnoty odovzdanej webovému serveru. Ostatné parametre sa menia v závislosti od typu poľa. Nasleduje popis typov polí vytvorených pomocou značky , a vstupné prvky, ktoré generujú.

typ = "text"

Vytvorí prvok na zadanie riadka textu.

Ďalšie možnosti:

• maxlength = "n" - určuje maximálny povolený počet znakov v textovom poli. Štandardne - neobmedzené.
• size = "n" - maximálny počet zobrazených znakov.
• value = "(! LANG: start_value" !}... Počiatočná hodnota textového poľa.

typ = "heslo"

Vytvorí vstupný prvok textového reťazca, ktorý sa líši od predchádzajúceho iba v tom, že všetky vstupné znaky sú reprezentované ako znak *. Pole s heslom neposkytuje bezpečnosť zadaného textu, pretože je odoslané na server v nezašifrovanej forme.

typ = "súbory"

Vytvorí pole na zadanie názvu lokálneho súboru, za ktorým bude nasledovať tlačidlo Prehľadávať. Vybratý súbor je pri odoslaní na server pripojený k obsahu formulára. Názov súboru môžete zadať priamo alebo ho vybrať v dialógovom okne. Pre správny prenos pripojeného súboru nastavte hodnoty parametrov formulára na hodnotu enctype = "multipart / form-data" a method = "post". V opačnom prípade bude odovzdaný vstupný reťazec, tj. Cesta k súboru, nie jeho obsah. Ďalšie parametre maximálna dĺžka a veľkosť majú rovnaký význam ako pre prvky typu text a heslo.

typ = "začiarkavacie políčko"

Vytvorí pole na začiarknutie políčka. Prvky začiarkavacie políčko je možné skombinovať do skupiny nastavením rovnakej hodnoty pre parameter name.

Ďalšie možnosti:

• hodnota = "(! LANG: reťazec" . Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный параметр. Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра value всех установленных флажков.!}
• skontrolované. Ak je zadané začiarknuté, prvok je predvolene vybratý.

typ = "rádio"

Vytvorí prepínaciu položku, ktorá existuje iba ako súčasť skupiny podobných položiek, z ktorých je možné vybrať iba jednu. Všetky prvky skupiny musia mať rovnakú hodnotu pre parameter name.

Zobrazí sa ako okrúhle tlačidlo. Ďalšie možnosti:

• hodnota = "(! LANG: reťazec" . Обязательный параметр, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы .!}
• skontrolované. Nastaví položku, ktorá sa má predvolene vybrať. Tento parameter musí mať jedna a iba jedna položka v skupine.

typ = "odoslať"

Vytvorí tlačidlo odoslania, ktoré po kliknutí odošle celý obsah formulára na server. Štandardne sa zobrazuje ako obdĺžnikové tlačidlo s názvom Odoslať.

Ďalší parameter vám umožňuje zmeniť označenie na tlačidle. Parameter názvu pre tento prvok je možné vynechať. V tomto prípade hodnota tlačidla nie je zahrnutá v zozname parametrov formulára a nie je odoslaná na server.

Ak sú napríklad k dispozícii parametre názvu a hodnoty

,

potom je parameter submit_button = "ok" zahrnutý v zozname parametrov formulára odoslaných na server. Vo formulári môže existovať niekoľko tlačidiel na odoslanie.

typ = "reset"

Vytvorí tlačidlo reset, ktoré po kliknutí zruší všetky vykonané zmeny a obnoví hodnoty polí formulára do času, keď bol formulár načítaný. Štandardne sa zobrazuje ako obdĺžnikové tlačidlo s názvom Obnoviť. Titulok je možné zmeniť pomocou ďalšieho parametra

value = "(! LANG: button_name"!}

Hodnota tlačidla Reset sa nikdy neodošle na server, takže nemá parameter name.

typ = "obrázok"

Vytvorí grafickú položku, ktorá funguje ako tlačidlo Odoslať. Ďalšie možnosti:

• src = "URL_obrazu"... Určuje adresu URL súboru s grafickým obrázkom položky.
• align = "align_type"... Určuje typ zarovnania obrázku vzhľadom na aktuálny riadok textu.

Ak kliknete na obrázok prvku, súradnice ukazovateľa myši v názve formulára. X = n & name.y = m prehliadač zahrnie do zoznamu parametrov formulára odoslaných na server.

Viackrát sme videli webové stránky, na ktorých sme boli požiadaní o zadanie niektorých údajov do vstupných polí. HTML má mechanizmus na získavanie údajov od používateľa. Prirodzene, tieto údaje je ešte potrebné spracovať, ale to robia špecializované programy. Pozrime sa, ako interagujú s webovými stránkami.

Užívateľ teda odovzdal pre seba webovú stránku, ktorá obsahuje ovládacie prvky na zadávanie informácií. Všetky sú kombinované do spoločnej sady tzv forma. Každý formulár má tlačidlo, kliknutím na ktoré sa údaje zadané používateľom prenesú do programu na spracovanie. Tento program je hostený na webovom serveri, ktorý slúži tejto stránke. Také programy je možné vytvárať pomocou najrozmanitejších programovacích technológií. Spája ich iba jeden postup získavania údajov z webovej stránky. Údaje sa prenášajú pomocou rozhrania Common Gateway Interface (CGI). Preto sú spracovateľské programy často označované ako CGI aplikácie alebo CGI skripty.

Aplikácia teda prijíma údaje a spracováva ich. Potom môže buď odoslať e-mail, alebo vykonať nejakú operáciu v databáze, alebo odoslať používateľovi novú webovú stránku, možné akcie sú obmedzené iba vlastnosťami technológie a predstavivosťou programátora. S pomocou týchto programov fungujú všetky druhy registračných systémov, systémy spätnej väzby, knihy návštev, fóra, rozhovory. S ich pomocou sa vytvárajú rozvetvenejšie a komplexnejšie systémy, napríklad internetové obchody.

Aby ste mohli vytvárať takéto aplikácie, musíte byť stále schopní programovať a poznať príslušné pravidlá pre vytváranie aplikácií CGI. Kým nebudeme vedieť, ako to urobiť, musíme stále používať verejne dostupné skripty CGI. Ak však dostaneme tieto aplikácie, formulár na zadanie používateľa musí byť stále vykonávaný nezávisle. V tejto časti sa naučíme, ako to urobiť.

Formulár oddelený značkami a ... Medzi týmito značkami sú značky, ktoré vytvárajú vstupné ovládacie prvky, a značky na vytváranie normálneho obsahu webovej stránky, to znamená, že samotné vstupné ovládacie prvky je možné umiestniť do tabuľky, ktorá je zase úplne umiestnená vo formulári. Označiť

nevytvára žiadnu zobraziteľnú štruktúru. Je skôr určený na vnútorné zoskupovanie predmetov.

Označiť , samozrejme, má množstvo parametrov, ktoré nastavujú vlastnosti vytvoreného formulára. Uvažujme tieto parametre.

• Parameter akcie je povinné. Jeho hodnota je adresa URL smerujúca na umiestnenie aplikácie CGI, ktorá bude spracovávať údaje zadané používateľom pomocou ovládacieho prvku tohto formulára.
• Parameter metóda je určený na označenie spôsobu, akým budú údaje prenášané do spracovateľskej aplikácie. Ako hodnota parametra sa používa jedno z dvoch preddefinovaných kľúčových slov: dostať alebo príspevok... Teraz nemusíme zisťovať, ktoré mechanizmy sa implementujú pomocou tejto alebo tej metódy. Sprievodná dokumentácia k aplikácii CGI však určuje, ktorý spôsob prenosu údajov by sa mal použiť. Predvolená ikona je dostať.
• Parameter enctype slúži na označenie druhu údajov, ktoré sa majú odoslať z formulára. Vzhľadom na hodnotu to zvyčajne nie je potrebné používať application / x-www-form-urlencoded Predvolené nastavenie je ideálne pre drvivú väčšinu aplikácií CGI.
• Parameter prijať-znakovú sadu sa používa v prípadoch, keď používateľ prenáša z formulára do aplikácie nielen informácie, ale aj súbory. V tomto prípade môžeme výslovne určiť kódovanie prenášaných súborov. Ako hodnota tohto parametra sa používa textový reťazec, v ktorom je napísané jedno alebo viac kódovacích mien. V prípade, že sa použije niekoľko kódovaní, ich názvy sa oddelia medzerami alebo čiarkami. Predvolené je neznámy, ktorý serveru hovorí, že by mal zistiť kódovania, ktoré používa
• Parameter súhlasiť určuje typy súborov, ktoré sa majú prenášať. Obvykle sa nepoužíva, pretože server je celkom schopný sám dostatočne rozpoznať typ prijatého súboru.
• Parameter názov umožňuje zadať jedinečný názov pre formulár. Na jednej webovej stránke môže byť prirodzene niekoľko formulárov. V tomto prípade by hodnoty parametrov názvu nemali byť rovnaké.

Označiť s jeho krycím dvojčaťom v skutočnosti vytvorte kontajner na umiestnenie informačných vstupných orgánov. Väčšina týchto vstupov je implementovaná pomocou značky ... Ukážme to na malom príklade (obr. 1.32).

Výpis 1.33

"http://www.w3.org/TR/html4/strict.dtd">

<р>Pole na zadanie riadka textu< input type="text">

Ryža. 1,32. Okno prehliadača zobrazujúce súbor zobrazený v zozname 1.33

Na ilustrácii teda vidíte, že sa nám podarilo vytvoriť pole pre zadávanie textu a tlačidlo, po kliknutí na ktoré budú informácie zadané používateľom odoslané do aplikácie CGI na spracovanie. A keď sa pozrieme na kód záznamu, uvidíme, že tlačidlo aj vstupné pole boli vytvorené pomocou rovnakej značky ... Úprava vlastností tejto značky sa vykonáva pomocou jej mnohých parametrov, ktoré teraz zvážime.

• Parameter typ je možno kľúčovým parametrom. Pomocou jeho hodnoty môžeme nastaviť typ vytvoreného ovládacieho prvku. Ako hodnota sa používa jedno z nasledujúcich kľúčových slov: text, heslo, začiarkavacie políčko, rádio, odoslať, resetovať, súbor, skryté, obrázok, tlačidlo. Predvolené je text. Na tieto typy sa pozrieme podrobnejšie o niečo neskôr.
• Parameter názov navrhnuté tak, aby nastavovali jedinečné názvy pre každý ovládací prvok. Aj keď je tento parameter voliteľný, dôrazne sa odporúča ho použiť. V sprievodnej dokumentácii aplikácií CGI je povinné uviesť, ako by mali byť názvy príslušných vstupných orgánov.
• Parameter hodnotu slúži na zadanie predvolenej hodnoty zobrazenej pre tlačidlá a polia na zadávanie textu. Ak používame prepínače, potom hodnotu parametra hodnotu nebude pre používateľa viditeľný, ale práve túto hodnotu získa aplikácia na spracovanie CGI, ak používateľ zvolí príslušný prepínač.
• Parameter cheked používa sa iba pre začiarkavacie políčka a prepínače. Nastavuje ich počiatočný stav. Ak bude tento parameter zadaný do značky<vstup>, potom bude spínač zapnutý. Parameter sa používa bez hodnôt.
• Parameter zakázaný robí ovládanie nedostupným na použitie používateľom. Parameter sa používa bez hodnôt.
• Parameter iba na čítanie platí iba pre vstupné telá typov textových hesiel. Použitie tohto parametra znamená, že údaje zobrazené v týchto poliach nemožno zmeniť.
• Parameter veľkosť zvyčajne určuje veľkosť tela pre zadávanie údajov. Ale pre každý samostatný typ vstupných orgánov je jeho pôsobenie špecifické.
• Parameter maximálna dĺžka umožňuje nastaviť maximálny možný počet znakov, ktoré môže užívateľ zadať do polí na zadávanie textu. Hodnota parametra je kladné celé číslo.
• Parameter src používa sa v prípadoch, keď vytvárame vstupné telá súvisiace s grafikou. Hodnota tohto parametra je adresa URL grafického súboru, ktorý obsahuje zobrazený obrázok.
• Parameter alt umožňuje vytvárať krátke popisy vytvoreného tela údajov. Tento popis je možné zobraziť ako malú nápovedu, keď používateľ prejde myšou nad daný vstupný orgán.
• Parameter tabindex nastavuje číslo ovládacieho prvku v poradí všetkých objektov, pričom posúva vstupné zameranie, medzi ktorými sa vykonáva postupným stláčaním tabuľkového klávesu.
• Parameter Prístupový kľúč umožňuje nastaviť „horúcu klávesu“, keď ju používateľ stlačí, vstupné zameranie prejde na tento ovládací prvok.

Pozreli sme sa teda na parametre použité v značke ... Ale už vieme, že pomocou tejto značky môžeme vytvárať rôzne objekty vo forme. Je načase sa nimi podrobne zaoberať.

Objekty zahrnuté vo formulári sú rozdelené do dvoch typov - orgány na zadávanie údajov a tlačidlá, ktoré vykonávajú rôzne akcie. Najprv sa pozrime, ako môžeme vytvoriť vstupné orgány.

Jedným z najbežnejších objektov formulára je jednoriadkové vstupné pole. V zozname 1.33 sme videli, že je vytvorený pomocou parametra typu s textom hodnoty. Zároveň pomerne často musíme nastaviť limity pre maximálny možný počet znakov, ktoré môže užívateľ do tohto poľa zadať. Toto obmedzenie je implementované pomocou parametra maxlength.

Existuje modifikácia jednoriadkového poľa na zadávanie textu, ktoré je navrhnuté špeciálne na zadávanie tajných informácií, napríklad hesiel. Zobrazia zadaný text a nahradia ho hviezdičkami. Takéto vstupné polia sú vytvorené pomocou nasledujúcej konštrukcie:

Použitie typu začiarkavacie políčko umožňuje vytvárať nezávislé prepínače. Predstavujú všetky známe štvorce, v ktorých kliknutím myši môžeme nastaviť a zrušiť začiarknutie políčok. Toto používa parameter value. Ak používateľ začiarkne toto políčko, hodnota tohto parametra bude odoslaná aplikácii na spracovanie CGI.

Môžeme tiež vytvoriť skupiny prepínačov, ktoré sa často nazývajú závislé prepínače. V tejto skupine môže používateľ vybrať a začiarknuť iba jeden prepínač. Každý prepínač je vytvorený značkou s parametrom typ, ktorej je priradená hodnota rádio. Aby prehliadač pochopil, že niekoľko prepínačov patrí do rovnakej skupiny, ich hodnoty pre parameter name musia byť rovnaké. Ale zároveň musia mať rôzne hodnoty parametrov hodnoty.

Zoberme si príklad pravidiel na vytváranie a zobrazovanie uvažovaných vstupných telies informácií.

Výpis 1.34

:! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN"
http: //www.w3.Qrg/TR/html4/strict.dtd ">
,

1 bod
2 bod
3 bod



/ html>

Ryža. 1,34. Okno prehliadača zobrazujúce súbor zobrazený v zozname 1.35

Zostáva zvážiť iba jeden prvok zadávania údajov. Toto je viacriadkové pole na zadávanie textu. Implementuje sa pomocou značky textareax Táto značka vytvára vstupnú oblasť, ktorá môže byť dosť veľká a zvyčajne sa používa na zadávanie stredného až veľkého množstva textových informácií. Značka sa nezaobíde bez parametrov. A určite ich zvážime.

• Parameter názov umožňuje nastaviť jedinečný názov pre daný prvok zadávania údajov,
• Parameter riadky nastavuje počet riadkov, ktoré sa majú zobraziť pre vytvorené vstupné pole. V skutočnosti je to jeho výška, ale je umiestnená v riadkoch. Tento parameter je povinný. Ako hodnota sa používa kladné celé číslo.
• Parameter cols nastavuje v znakoch šírku generovaného poľa na zadávanie textu. Tento parameter je tiež povinný.
• Parameter zakázaný používa sa, ak je potrebné, aby bolo pole nedostupné na použitie.
• Parameter iba na čítanie slúži na vytváranie polí s neupraviteľným textom. Text v týchto vstupných poliach je možné iba zobraziť, ale používateľ ho nemôže zmeniť.
• Parameter tabindex nastaví poradové číslo prvku vstupu údajov v slede objektov, medzi ktorými sa prechod vstupného zamerania vykoná pomocou tabuľkového kľúča.
• Parameter Prístupový kľúč umožňuje nastaviť klávesu, po stlačení sa vstupné zameranie automaticky prenesie do tohto vstupného poľa.

Teraz sa pozrime, ako sa také vstupné polia vytvárajú (obr. 1.35).

Výpis 1.36

"http://www.w3.org/TR/html4/strict.dtd">

<br>Text, ktorý sa má zobraziť vo viacriadkovom poli, zadajte

Okrem týchto vstupných polí existuje ešte jeden objekt, ktorý sa týka vytvárania formulárov. Pre niektoré oprávnenia na zadávanie údajov môžeme vytvoriť takzvané textové štítky.

V skutočnosti sú prepínače a začiarkavacie políčka pomerne malé a na ich aktiváciu je nežiaduce presne umiestniť myš do ich aktívnej oblasti. Nie je to vždy pohodlné. Preto v mnohých programoch s premysleným používateľským rozhraním môžete takéto ovládacie prvky aktivovať dokonca aj kliknutím na ich textové názvy. HTML nám dáva presne rovnakú príležitosť.

Ryža. 1, 35. Okno prehliadača zobrazujúce výsledok zobrazenia súboru v zozname 1 .36

Na vytvorenie podobných textových štítkov a nadpisov spojených s konkrétnymi prvkami zadávania údajov môžeme použiť značku Takéto označenia však môžeme viazať iba na tie orgány na zadávanie údajov, pre ktoré sme explicitne nastavili identifikačné ID. Práve na ňom je stanovená korešpondencia medzi štítkom a predmetom formulára. Hlavný parameter značky slúži ako parameter for, ktorého hodnota je hodnotou parametra id objektu, ku ktorému je daný textový štítok viazaný. Ukážme si príklad vytvorenia takéhoto spojenia. Najprv vytvoríme začiarkavacie políčko a potom k nemu pripojíme priradený textový nadpis. Podobná operácia sa vykonáva pomocou nasledujúceho útržku kódu:

Nezávislý vypínač
Typ vstupu = "začiarkavacie políčko" názov = "kontrola" hodnota = "(! LANG: začiarknuté" id="checkl"> !}

Bez parametra for sa však môžete zaobísť, ak je medzi tagy umiestnená značka deklarujúca priradené telo vstupu údajov
A tu môžeme skončiť s prehľadom postupu pri vytváraní formulárov na vkladanie údajov do statických dokumentov HTML.

Na webových stránkach často nájdete stránky, na ktorých sú umiestnené formuláre HTML. Webové formuláre sú pohodlný spôsob, ako získať informácie od návštevníkov vašich stránok. Príkladom je - poskytuje spätnú väzbu návštevníkom a vývojárom stránok. Formuláre sú vhodné aj pre vývojárov stránok pri vývoji CMS, ktorý umožňuje zachovanie hlavnej vlastnosti webu - relevancie. Tento článok je venovaný základom vytvárania formulárov HTML, ich spracovaniu a metódam prenosu údajov z obrazovkových formulárov do skriptov PHP.

1) Vytvorenie jednoduchého formulára

Tagy:

a

nastavte začiatok a koniec formulára. Začiatočná značka formulára

obsahuje dva atribúty: akcie a metóda... Atribút action obsahuje adresu URL skriptu, ktorý je potrebné zavolať na spracovanie skriptu. Pripisovať metóda informuje prehliadač, aký typ požiadavky HTTP má použiť na odoslanie formulára; možné hodnoty POST a ZÍSKAJTE.

Komentovať

Hlavný rozdiel medzi metódami POST a GET je v spôsobe prenosu informácií. Pri metóde GET sa parametre prechádzajú cez panel s adresou, t.j. v skutočnosti v hlavičke požiadavky HTTP, zatiaľ čo v metóde POST, parametre prechádzajú telom požiadavky HTTP a nijako sa neodrážajú vo forme panela s adresou.

$ text = nl2br ($ _POST ["mytext"]);
?>

Úloha: Povedzme, že chcete vytvoriť rozbaľovací zoznam s rokmi 2000 až 2050.
Riešenie: Na spracovanie formulára je potrebné vytvoriť HTML formulár s prvkom SELECT a skript PHP.

Diskusia:

Najprv vytvoríme dva súbory: form.html a action.php... V súbore form.html bude obsahovať html formulár s rozbaľovacím zoznamom. Hodnoty v zozname je navyše možné zadať dvoma spôsobmi:

I. Ručné zadávanie údajov:

2000
2001
2002
……………………………………………
2050

II. Zadávanie údajov pomocou slučky:

$ rok = 2000;
pre ($ i = 0; $ i<= 50 ; $i ++) // Slučka od 0 do 50
{
$ new_years = $ rok + $ i; // Vytvorte novú hodnotu
ozvena " ". $ new_years."" ; // Vytvorte nový riadok
}
?>

Ako vidíte, druhý príklad so slučkou je kompaktnejší. Myslím si, že nie je potrebné prinášať skript handlera tohto formulára, pretože je spracovaný rovnako ako textové pole, t.j. hodnoty zoznamu je možné získať zo superglobálneho poľa $ _POST.

Popis:

Vytvoríme formulár HTML na odoslanie súboru na server.

Tento html formulár obsahuje prvok listovať, ktoré otvára dialógové okno pre výber súboru, ktorý sa má nahrať na server. Stlačením tlačidla "Prenos súboru", súbor sa odovzdá skriptu obsluhy.

Potom musíte napísať skript action.php... Pred napísaním obsluhy sa musíte rozhodnúť, do ktorého adresára skopírujeme súbor:

if (isset ($ _ FILES ["myfile"])) // Ak súbor existuje
{
$ catalog = "../image/"; // Náš katalóg
if (is_dir ($ catalog)) // Ak taký adresár existuje
{
$ myfile = $ _FILES ["myfile"] ["tmp_name"]; // Dočasný súbor
$ myfile_name = $ _FILES ["myfile"] ["name"]; // Názov súboru
if (! copy ($ myfile, $ catalog)) echo "Chyba pri kopírovaní súboru"... $ myfile_name // Ak sa súbor nepodarilo skopírovať
}
else mkdir ("../image/"); // Ak taký adresár neexistuje, vytvoríme ho
}
?>

Komentovať

Ak dôverujete používateľom, že nahrajú akékoľvek súbory na váš server, musíte byť veľmi opatrní. Útočníci môžu vložiť „zlý“ kód do obrázku alebo súboru a odoslať ho na server. V takýchto prípadoch musíte prísne kontrolovať sťahovanie súborov.

Tento príklad ukazuje, ako vytvoriť adresár a skopírovať súbor do tohto adresára na serveri.

Chcel by som tiež predviesť príklad s týmto prvkom začiarkavacie políčko... Tento prvok sa mierne líši od ostatných prvkov v tom, že ak nie je jedným z prvkov začiarkavacie políčko‘A nie je vybrané, potom je superglobal $ _POST vráti prázdnu hodnotu:

Modrá
čierna
biely

if (! empty ($ _ POST ["mycolor"])) echo $ _POST ["mycolor"]; // Ak je vybratá aspoň 1 položka
inak ozvena „Vyberte hodnotu“;
?>