Odpovede vedcov html. Popis objektu Response. Opýtajte sa profesora Markupa
Preklad: Vlad Merževič
Každý vie o webových formulároch, však? Vložíme štítok, niekoľko, možno, všetko doplníme tlačidlom a máte hotovo.
Polovicu z toho nepoznáš. HTML5 definuje viac ako tucet nových typov polí, ktoré môžete použiť vo svojich formulároch. A keď hovorím „použitie“, myslím tým, že sa dajú použiť okamžite – bez akýchkoľvek trikov, hackov alebo riešení. Nebojte sa príliš, nehovorím, že všetky tieto vzrušujúce nové funkcie sú skutočne podporované v každom prehliadači. Absolútne nie, nemyslím tým všetkým. V moderných prehliadačoch áno, vaše formuláre ukážu všetko, čoho sú schopné. Ale v starších prehliadačoch budú vaše formuláre stále fungovať, aj keď nie naplno. To znamená, že tieto funkcie sa ladne zhoršujú v každom prehliadači. Dokonca aj v IE6.
Promptný text| I.E. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Prvým vylepšením HTML5 týkajúcich sa formulárov je možnosť nastaviť text výzvy vo vstupnom poli. Tento text sa zobrazí vo vstupnom poli, ak je pole prázdne a nie je aktívne. Hneď ako kliknete do vstupného poľa (alebo doň prejdete cez Tab), text rady zmizne.
Pravdepodobne ste už videli text výzvy. Napríklad, Mozilla Firefox obsahuje pomocný text adresný riadok s nápisom „Hľadať v záložkách a denníku“.
Keď kliknete na panel s adresou, text rady zmizne.
Tu je návod, ako môžete do formulárov zahrnúť sugestívny text.
Prehliadače, ktoré nepodporujú zástupný atribút, ho jednoducho ignorujú. Žiadna ujma alebo porušenie.
Opýtajte sa profesora Markupa☞ Otázka: Môžem použiť HTML značky pre zástupný atribút? Chcem vložiť obrázok alebo možno zmeniť farby.
Odpoveď: Atribút zástupného symbolu môže obsahovať iba text, žiadny kód HTML. Existujú však špeciálne rozšírenia CSS, ktoré umožňujú nastaviť štýl textu v niektorých prehliadačoch.
Polia automatického zaostrovania| I.E. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Webové stránky môžu používať JavaScript automatický príjem zamerať sa v prvom poli formulára. Napríklad na hlavnej stránke Google.com Pole pre zadávanie kľúčových slov pre vyhľadávanie má automatické zaostrovanie. Aj keď je to pohodlné pre väčšinu ľudí, môže to byť nepríjemné pre pokročilých používateľov a ľudí so špeciálnymi potrebami. Ak počas čakania na rolovanie stránky stlačíte medzerník, rolovanie sa neuskutoční, pretože zameranie je na vstupnom poli formulára (namiesto rolovania sa do poľa napíše medzera). Ak počas načítavania stránky presuniete zameranie na iné vstupné pole, skript automatického zaostrovania lokality môže „užitočne“ presunúť zameranie späť do pôvodného vstupného poľa, čím preruší písanie a spôsobí, že budete písať na nesprávnom mieste.
Pretože automatické zaostrovanie funguje prostredníctvom JavaScriptu, môže byť ťažké zvládnuť tieto extrémne prípady a málo možností pre ľudí, ktorí nechcú, aby im webová stránka „ukradla“ zameranie.
Na vyriešenie týchto problémov HTML5 zavádza atribút autofocus pre všetky prvky formulára. Atribút autofocus robí presne to, čo znie: hneď ako sa stránka načíta, presunie zameranie na určené pole. Ale keďže ide len o označenie a nie o skript, správanie bude konzistentné na všetkých stránkach. Okrem toho výrobcovia prehliadačov (alebo autori rozšírení) môžu používateľom ponúkať spôsob, ako vypnúť automatické zaostrovanie.
Tu je návod, ako môžete nastaviť pole formulára na automatické zaostrovanie.
Prehliadače, ktoré nepodporujú atribút autofocus, ho budú ignorovať.
Čo sa stalo? Povedzte, že chcete, aby automatické zaostrovanie fungovalo všade, nielen v luxusných prehliadačoch HTML5? Aktuálny skript môžete ponechať s automatickým zaostrovaním, stačí vykonať dve malé zmeny:
- pridať atribút autofocus do HTML kódu;
- Skontrolujte, či prehliadač podporuje atribút autofocus, a ak nie, spustite vlastný skript.
Automatické zaostrovanie s alternatívou
if (!("autofocus" v document.createElement("input")) ) (
document.getElementById("q").focus();
}
Mnoho webových stránok čaká na spustenie funkcie window.onload a nastavenie zamerania. Udalosť window.onload sa však nespustí, kým sa nenačítajú všetky obrázky. Ak má vaša stránka veľa obrázkov, takéto naivné skripty potenciálne zmenia zameranie, keď používateľ začne interagovať s inou časťou vašej stránky. To je dôvod, prečo pokročilí používatelia nenávidia skripty automatického zaostrovania.
Napríklad v predchádzajúcej časti bol skript automatického zaostrovania umiestnený hneď za pole formulára, na ktoré odkazoval. Toto optimálne riešenie, ale môže uraziť vašu citlivosť, ak do stredu stránky umiestnite blok kódu JavaScript (alebo čo je všednejšie, váš systém nemusí byť taký flexibilný). Ak nemôžete vložiť skript do stredu stránky, mali by ste nastaviť zameranie pomocou vlastnej udalosti ako $(document).ready() v jQuery namiesto window.onload .
Automatické zaostrovanie cez jQuery
$(document).ready(function() (
$("#q").focus();
}
});
Vlastná udalosť jQuery sa spustí hneď, ako je DOM prístupný – to znamená, že čaká na načítanie textu stránky, ale nečaká na načítanie všetkých obrázkov. Toto nie je optimálny prístup – ak je stránka nezvyčajne veľká resp sieťové pripojenie pomalé, používateľ môže stále interagovať so stránkou pred spustením skriptu zamerania. Ale stále je to oveľa lepšie ako čakať, kým sa stane udalosť window.onload.
Ak súhlasíte a ste ochotní vložiť skript s jedným príkazom do kódu vašej stránky, ide o kompromis, ktorý je menej škaredý ako prvá možnosť a lepší ako druhá možnosť. Vlastné udalosti jQuery môžete použiť na nastavenie vlastných udalostí, povedzme autofocus_ready. Potom môžete túto udalosť spustiť manuálne, len čo bude k dispozícii pole automatického zaostrovania. Ďakujem E.M. Shtenbergovi, že ma naučil túto techniku.
Automatické zaostrovanie s alternatívnou vlastnou udalosťou
$(document).bind("autofocus_ready", function() (
if (!("autofocus" v document.createElement("input"))) (
$("#q").focus();
}
});
$(document).trigger("autofocus_ready");
Toto riešenie je optimálne, rovnako ako prvý prístup. Zameranie sa nastaví na pole formulára hneď, ako to bude technicky možné, kým sa text stránky stále načítava. Časť aplikačnej logiky (zameranie v poli formulára) bola presunutá z tela stránky do sekcie. Tento príklad je založený na jQuery, ale koncept vlastných udalostí nie je jedinečný pre jQuery. Ostatné knižnice JavaScriptu ako YUI a Dojo ponúkajú podobné možnosti.
Poďme si to zhrnúť.
- Dôležité je správne nastavenie zaostrenia.
- Ak je to možné, nechajte prehliadač použiť atribút autofocus na poli, na ktoré chcete zaostriť.
- Ak používate alternatívny kód pre staršie prehliadače, definujte podporu pre atribút autofocus, aby sa skript spúšťal iba v starších prehliadačoch.
- Zamerajte sa čo najskôr. Vložte skript zamerania do kódu hneď za pole formulára. Ak vám to neprekáža, vložte knižnicu JavaScript, ktorá podporuje vlastné udalosti, a uveďte udalosť v kóde hneď za pole formulára. Ak to nie je možné, použite udalosť ako $(document).ready() z jQuery.
- Za žiadnych okolností nečakajte, kým window.onload získa zameranie.
Formuláre už viac ako desaťročie obsahujú len niekoľko typov polí. Najbežnejšie sú nasledujúce.
Všetky tieto typy polí stále fungujú v HTML5. Ak „upgradujete na HTML5“ (možno zmenou !DOCTYPE ), nebudete musieť urobiť jedinú zmenu vo svojich formulároch. Hurá za spätnú kompatibilitu!
HTML5 však definuje 13 nových typov polí a nie je dôvod ich nezačať používať.
Prvý z týchto nových typov e-mailových adries. Vyzerá to asi takto.
Chcel som napísať vetu, ktorá začala „v prehliadačoch, ktoré nepodporujú type="email" ..., ale prestala. prečo? Pretože si nie som istý, či prehliadače nepodporujú type="email" . Všetky prehliadače "podporujú" type="email" . Možno nerobia nič zvláštne, ale prehliadače, ktoré nerozpoznajú type="email" s ním budú zaobchádzať ako s type="text" a vykreslia ho ako normálne textové pole.
Zdôrazním, aké je to dôležité. Na internete sú milióny formulárov, ktoré od vás žiadajú zadanie vašej e-mailovej adresy a všetky používajú . Uvidíte textové pole, zadajte do neho svoju e-mailovú adresu a je to. A potom prichádza HTML5, ktoré definuje type="email" . Zbláznili sa prehliadače? Nie Každý prehliadač na Zemi považuje atribút neznámeho typu za typ="text" – dokonca aj IE6. Takže môžete svoje formuláre "obnoviť" pomocou type="email" hneď teraz.
Čo sa stane, ak povieme, že prehliadač podporuje type="email" ? No, môže to znamenať čokoľvek. Špecifikácia HTML5 nevyžaduje žiadne špecifické používateľské rozhranie pre nové typy polí. Opera pridá do poľa formulára malú ikonu. Iné prehliadače HTML5, ako sú Safari a Chrome, sa vykresľujú ako textové pole – rovnako ako type="text" – takže vaši používatelia si nevšimnú rozdiel (kým sa nepozrú na zdrojový kód).
A potom je tu iPhone.
iPhone nemá fyzickú klávesnicu. Všetko „písanie“ sa vykonáva kliknutím na klávesnicu na obrazovke, ktorá sa objaví vo vhodnom čase, napríklad keď prejdete do poľa formulára na webovej stránke. Apple urobil niečo šikovné Prehliadač iPhone. Rozpoznáva niektoré nové polia HTML5 a dynamicky mení klávesnicu na obrazovke, aby optimalizoval vstup.
Napríklad e-mailová adresa je textová, však? Samozrejme, ale toto je špeciálny typ textu. Takmer všetky e-mailové adresy teda obsahujú symbol @ a podľa najmenej, jedna bodka (.), ale je nepravdepodobné, že budú obsahovať medzeru. Keď teda používate iPhone a prejdete na , získate klávesnicu na obrazovke, ktorá obsahuje menší medzerník, ako aj špeciálne klávesy pre symboly. A @.
Zhrniem to. Okamžité preloženie všetkých vašich polí nie je nevýhodou emailové adresy v type="email" . To si nevšimne takmer nikto okrem používateľov iPhonov, ktorí si to zrejme tiež nevšimnú. Ale tí, ktorí si to všimnú, sa potichu usmejú a poďakujú vám, že ste im trochu uľahčili prácu.
Webové adresyWebová adresa – ktorú geekovia štandardne nazývajú URL, s výnimkou niekoľkých pedantov, ktorí volali URI – je ďalším typom špecializovaného textu. Syntax webovej adresy je obmedzená na príslušný internetový štandard. Ak vás niekto požiada o zadanie webovej adresy do formulára, očakáva niečo ako „http://www.google.com/“, nie „125 Farwood Road“. Časté sú šikmé čiary – aj v domovskej stránke Google ich má tri. Časté sú aj bodky, ale medzery sú zakázané. A každá webová adresa má príponu domény ako „.com“ alebo „.org“.
A tak... (bubon prosím)... . Na iPhone to vyzerá takto.
iPhone zmenil svoje virtuálna klávesnica, rovnako ako som to urobil pre e-mailovú adresu, ale teraz som ju optimalizoval na zadávanie webovej adresy. Medzerník bol úplne nahradený tromi virtuálnymi klávesmi: lomítko, bodka a „.com“ (podržaním klávesu „.com“ môžete vybrať inú príponu, napríklad „.org“ alebo „.net“).
Prehliadače, ktoré nepodporujú HTML5, budú považovať type="url" za type="text" , takže použitie tohto typu pre všetky polia, do ktorých je potrebné zadať webovú adresu, nie je nevýhodné.
Čísla ako počítadláĎalší krok: čísla. Žiadosť o číslo je zložitejšia ako žiadosť o e-mail alebo webovú adresu. Po prvé, čísla sú zložitejšie, ako si myslíte. Rýchlo vyberte číslo. -1? Nie, myslel som číslo medzi 1 a 10,7 ½? Nie, nie, nebuď zlomok, hlupák. π? Teraz ste si vybrali iracionálne číslo.
Chcel by som poznamenať, že sa vás často nepýtajú „len číslo“. Je pravdepodobnejšie, že si vypýtajú číslo v určitom rozsahu. Môžete chcieť len určité typy čísel v tomto rozsahu - možno celé čísla, ale nie zlomky alebo desatinné čísla alebo niečo exotickejšie, napríklad násobky 10. HTML5 to všetko pokrýva.
Vyberte si číslo, takmer akékoľvek
Pozrime sa na jeden atribút naraz.
- type="číslo" znamená, že ide o číselné pole.
- min="0" určuje minimálnu povolenú hodnotu pre toto pole.
- max="10" je maximálna povolená hodnota.
- step="2" v kombinácii s minimálnou hodnotou definuje platné čísla v rozsahu: 0, 2, 4 atď., až po maximálnu hodnotu.
- value="6" predvolená hodnota. Malo by vám to byť povedomé, ide o rovnaký atribút, ktorý sa vždy používa na definovanie hodnôt polí formulára. Spomínam to tu ako východiskový bod, na ktorom je založené HTML5 predchádzajúce verzie HTML. Nemusíte sa znova učiť robiť to, čo ste už urobili.
Toto je kód pre číselné pole. Majte na pamäti, že všetky tieto atribúty sú voliteľné. Ak máte minimum, ale nie maximum, môžete zadať atribút min, ale nie atribút max. Predvolená hodnota kroku je 1 a atribút kroku môžete vynechať, kým nebude potrebná iná hodnota kroku. Ak neexistuje žiadna predvolená hodnota, atribút value môže byť prázdny riadok alebo dokonca úplne vynechať.
HTML5 však nekončí. Za rovnako nízke nízka cena slobodu, ktorú získate pomocou týchto pohodlných metód JavaScriptu.
- input.stepUp(n) zvýši hodnotu poľa o n.
- input.stepDown(n) zníži hodnotu poľa o n.
- input.valueAsNumber vráti aktuálnu hodnotu ako číslo s pohyblivou rádovou čiarkou (vlastnosťou input.value je vždy reťazec).
Problémy so zobrazením? Správne rozhranie na správu čísel je v prehliadačoch implementované inak. Na iPhone, kde je písanie náročné, prehliadač opäť optimalizuje virtuálnu klávesnicu na zadávanie čísel.
V počítačovej verzii Opery sa pole type="number" zobrazuje ako počítadlo s malými šípkami nahor a nadol, na ktoré môžete kliknúť a zmeniť hodnoty.
Opera rešpektuje atribúty min , max a step, takže vždy dosiahnete prijateľnú číselnú hodnotu. Ak zvýšite hodnotu na maximum, šípka nahor na počítadle sa zmení na sivú.
Rovnako ako všetky ostatné vstupné polia, o ktorých som hovoril v tejto kapitole, prehliadače, ktoré nepodporujú type="číslo" s nimi budú zaobchádzať ako s type="text" . Predvolená hodnota sa zobrazí v poli (tak, ako je uložená v atribúte value), ale ostatné atribúty ako min a max budú ignorované. Môžete ich implementovať sami alebo použiť rámec JavaScriptu, ktorý už implementuje správu počítadiel. Najprv skontrolujte tu.
if (! .inputtypes.number) (
// žiadna natívna podpora pre pole typ=číslo
// môže skúsiť Dojo alebo iný rámec JavaScriptu
}
Počítadlo nie je jediná cesta reprezentácie číselného vstupu. Pravdepodobne ste tiež videli posúvač, ktorý vyzerá takto.
Teraz môžete mať na formulári aj posúvač. Kód vyzerá zvláštne podobne ako pole počítadla.
Všetky dostupné atribúty sú rovnaké ako pre type="number" - min , max , step , value - a znamenajú to isté. Jediný rozdiel je používateľské rozhranie. Očakáva sa, že prehliadače namiesto vstupného poľa zobrazia ako posuvník type="range". V čase písania najnovšie verzie S týmto pracovali Safari, Chrome a Opera. Bohužiaľ, iPhone sa zobrazuje ako jednoduchý textové pole, neoptimalizuje ani svoju klávesnicu na obrazovke na zadávanie čísel. Všetky ostatné prehliadače jednoducho považujú pole za type="text" , takže nie je dôvod začať tento typ okamžite používať.
HTML 4 neobsahuje výber dátumu cez kalendár. Rámce JavaScript vám umožňujú obísť to (Dojo, jQuery UI, YUI, Closure Library), ale, samozrejme, každé z týchto riešení vyžaduje „implementáciu“ rámca pre akýkoľvek vstavaný kalendár.
HTML5 konečne definuje spôsob, ako povoliť natívny výber dátumu bez akéhokoľvek skriptovania. V skutočnosti je ich šesť: dátum, mesiac, týždeň, čas, dátum + čas a dátum + čas s časovým pásmom.
Zatiaľ je podpora... mizivá.
| type="date" | 9.0+ | - |
| type="mesiac" | 9.0+ | - |
| type="týždeň" | 9.0+ | - |
| type="time" | 9.0+ | - |
| type="datetime" | 9.0+ | - |
| type="datetime-local" | 9.0+ | - |
Opera sa zobrazuje takto:
Ak potrebujete čas spolu s dátumom, Opera tiež podporuje:
Ak potrebujete mesiac plus rok (napríklad dátum vypršania platnosti kreditnej karty), Opera môže zobraziť:
Menej bežné, ale dostupné je výber týždňa v roku pomocou:
V neposlednom rade je načasovanie s:
Výber dátumu s alternatívou
...
var i = document.createElement("vstup");
i.setAttribute("typ", "dátum");
if (i.type == "text") (
// Žiadna podpora natívneho výberu dátumu :(
// Na vytvorenie použite Dojo/jQueryUI/YUI/Closure,
// potom dynamicky nahraďte prvok
}
Je pravdepodobné, že ostatné prehliadače budú nakoniec podporovať tieto typy. Podobne ako type="email" a iné typy sa tieto polia formulára zobrazia ako obyčajný text v prehliadačoch, ktoré nerozpoznajú type="date" a jeho varianty. Ak chcete, môžete jednoducho použiť , urobiť radosť používateľom Opery a počkať, kým to ostatné prehliadače dobehnú. Je realistickejšie použiť to, ale skontrolujte, či má prehliadač natívnu podporu výberu dátumu a zahrňte alternatívne riešenie vo forme skriptu podľa vášho výberu (Dojo, jQuery UI, YUI, Closure Library alebo iné možnosti).
Vyhľadávacie oknoTakže hľadaj. Nielen vyhľadávania z Google alebo Yahoo (teda aj tie). Zamyslite sa nad ľubovoľným vyhľadávacím poľom, na akejkoľvek stránke, na akejkoľvek webovej lokalite. Amazon má vyhľadávacie pole, Yandex má vyhľadávacie pole a väčšina blogov tiež. Ako sa vyrábajú? , rovnako ako akékoľvek iné textové pole na webe. Poďme to napraviť.
Hľadajte novú generáciu
V niektorých prehliadačoch si nevšimnete žiadny rozdiel od bežného textového poľa. Ale ak používate Safari na Mac OS X, bude to vyzerať takto.
Našli ste rozdiel? Vstupné pole má zaoblené rohy! Viem, viem, len ťažko dokážeš ovládať svoje pocity. Ale počkajte, je toho viac! Keď do poľa začnete písať type="search", Safari vloží na pravú stranu okna malé tlačidlo "x". Kliknutím na „x“ vymažete obsah poľa. Google Chrome, ktorý má pod kapotou rovnakú techniku, sa správa rovnako. Oba tieto malé triky vyzerajú a správajú sa podobne ako natívne vyhľadávanie v iTunes a iných klientskych aplikáciách Mac OS X.
Apple.com používa vyhľadávanie na stránke, aby pomohla stránkam sprostredkovať pocit „milovania papagájov“. Ale tu nie je nič špecifické pre Mac. Je to len kód, takže každý prehliadač na každej platforme si môže vybrať spôsob vykresľovania podľa konvencií platformy. Rovnako ako všetky ostatné nové typy, prehliadače, ktoré nerozpoznajú type="search" budú s ním zaobchádzať ako s type="text" , takže nie je absolútne žiadny dôvod, aby ste dnes nezačali používať type="search" pre všetky svoje vyhľadávacie polia .
Hovorí profesor MarkupV predvolenom nastavení Safari nepoužíva väčšinu štýlov. Ak chcete prinútiť Safari, aby s vyhľadávacím poľom zaobchádzalo ako s bežným textovým poľom (takže môžete použiť svoje vlastné štýly), pridajte toto pravidlo do svojej šablóny štýlov.
vstup(
-webkit-vzhľad:textové pole;
}
Ďakujem Johnovi Laneovi, že ma naučil tento trik.
Výber fariebHTML5 tiež definuje pole, ktoré vám umožňuje vybrať farbu a vracia ju v šestnástkovej sústave. Žiadny prehliadač nepodporuje výber farieb, čo je škoda, pretože palety Mac OS som vždy miloval. Možno jedného dňa.
Poznámka prekladateľ Opera 11 túto funkciu podporuje.
Overenie formuláraV tejto kapitole som hovoril o nových prvkoch formulárov a nových funkciách, ako je automatické zaostrovanie, ale nespomenul som snáď najvzrušujúcejšiu časť formulárov HTML5: automatická kontrola vstupné Data. Uvažujme bežné problémy zadaním e-mailovej adresy do formulára. Pravdepodobne máte overenie na strane klienta prostredníctvom JavaScriptu, po ktorom nasleduje overenie na strane servera prostredníctvom PHP, Pythonu alebo iného jazyka na strane servera. HTML5 nikdy nenahradí overenie na strane servera, ale jedného dňa môže nahradiť overenie na strane klienta.
Existujú dva veľké problémy s overením e-mailovej adresy v JavaScripte:
Vážne, pomýlite si adresu. Určenie, že sada náhodných znakov je platná e-mailová adresa, je neuveriteľne ťažké. Čím usilovnejšie sa pozeráte, tým je to ťažšie. Spomenul som, že je to veľmi, veľmi ťažké? Nie je jednoduchšie zavesiť túto bolesť hlavy na váš prehliadač?
Opera kontroluje type="email"
Tu je snímka obrazovky z Opery 11, aj keď funkcia je prítomná od Opery 9. Kód zahŕňa nastavenie e-mailovej hodnoty pre atribút type. Keď sa používateľ Opery pokúsi odoslať formulár pomocou , prehliadač automaticky skontroluje e-mailovú adresu, aj keď sú skripty zakázané.
HTML5 tiež ponúka overenie webových adries pomocou poľa a čísel pomocou . Overenie čísla zohľadňuje hodnoty atribútov min a max, takže prehliadače vám neumožnia odoslať formulár, ak zadáte príliš veľké číslo.
Neexistuje žiadny kód, ktorý by umožňoval overenie formulára v HTML5, robí sa to štandardne. Ak chcete zakázať overenie, použite atribút novalidate.
Neskúšaj ma
Prehliadače pomaly začleňovali podporu overovania formulárov v HTML5. Firefox 4 bude mať plnú podporu. Bohužiaľ, Safari a Chrome sú implementované len čiastočne: overujú prvky formulára, ale nezobrazujú žiadne viditeľné správy, keď overenie poľa formulára zlyhá. Inými slovami, ak zadáte nesprávny (alebo nesprávne napísaný) dátum v type="date" , Safari a Chrome neodošlú formulár, ale nepovedia vám, prečo to tak nebolo. Zamerajú sa na pole, ktoré obsahuje neplatnú hodnotu, ale nezobrazia chybové hlásenie ako Opera alebo Firefox 4.
Povinné políčka| I.E. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Overenie formulára v HTML5 nie je obmedzené na typ každého poľa. Môžete tiež určiť, že niektoré polia sú povinné. Pred odoslaním formulára musia mať tieto polia hodnotu.
Kód pre povinné polia je taký jednoduchý, ako len môže byť.
Prehliadače môžu zmeniť pôvodný vzhľad požadovaného poľa. Tu je príklad toho, ako to vyzerá v prehliadači Mozilla Firefox 4.0.
Okrem toho, ak sa pokúsite odoslať formulár bez vyplnenia požadovanej hodnoty, Firefox zobrazí informačnú lištu s informáciou, že pole je povinné a nemôže byť prázdne.
Generovanie odpovede z ovládačov
Potom, čo kontrolór dokončí spracovanie požiadavky, zvyčajne potrebuje vygenerovať odpoveď. Keď vytvoríme nízkoúrovňový kontrolér priamou implementáciou rozhrania IController, musíme prevziať zodpovednosť za každý aspekt spracovania požiadaviek vrátane generovania odpovede klientovi.
Ak chcete napríklad odoslať odpoveď HTML, museli by ste vytvoriť a zostaviť údaje HTML a potom ich odoslať klientovi pomocou metódy Response.Write(). Podobne, ak chcete presmerovať prehliadač používateľa na inú adresu URL, budete musieť zavolať metódu Response.Redirect() a odovzdať jej požadovanú adresu URL. Oba prístupy sú demonštrované v kóde nižšie, ktorý zobrazuje rozšírenia triedy BasicController, ktoré sme vytvorili v staršom článku implementáciou rozhrania IController:
pomocou System.Web.Mvc; pomocou System.Web.Routing; menný priestor ControllersAndActions.Controllers ( verejná trieda BasicController: IController ( public void Execute(RequestContext requestContext) ( string controller = (string)requestContext.RouteData.Values["controller"]; string action = (string)requestContext.RouteData.Values["action "]; if (action.ToLower() == "presmerovanie") ( requestContext.HttpContext.Response.Redirect("/Derived/Index"); ) else ( requestContext.HttpContext.Response.Write(string.Format("Controller) : (0), Metóda akcie: (1)", ovládač, akcia)); ) ) ) )
Rovnaký prístup je možné použiť aj v prípade dedenia ovládača z triedy Controller. Trieda HttpResponseBase, ktorá sa vráti pri čítaní vlastnosti requestContext.HttpContext.Response v metóde Execute(), je prístupná prostredníctvom vlastnosti Controller.Response, ako je znázornené v príklade nižšie, ktorý rozširuje triedu DerivedController, tiež vytvorenú predtým dedenie z triedy Controller:
Používanie systému; pomocou System.Web; pomocou System.Web.Mvc; menný priestor ControllersAndActions.Controllers ( verejná trieda DerivedController: Controller ( public ActionResult Index() ( // ... ) public void ProduceOutput() ( if (Server.MachineName == "ProfesorWeb") Response.Redirect("/Basic/Index" ); else Response.Write("Ovládač: odvodené, metóda akcie: ProduceOutput");
Metóda ProduceOutput() používa hodnotu vlastnosti Server.MachineName na rozhodnutie, akú odpoveď poslať klientovi. ("ProfessorWeb" je názov môjho vývojového stroja.)
Hoci tento prístup generovania odpovede používateľovi funguje, je s ním niekoľko problémov:
Triedy radičov musia obsahovať informácie o HTML štruktúra alebo URL, čo sťažuje čítanie a údržbu tried.
Kontrolér, ktorý generuje odozvu priamo na výstup, sa ťažko testuje. Budete musieť vytvoriť falošné implementácie objektu Response a potom byť schopný spracovať výstup z radiča, aby ste určili, čo to je. To môže znamenať napríklad potrebu analyzovať HTML značky Kľúčové slová, čo je dlhý a únavný proces.
Spracovanie malých detailov každej odpovede týmto spôsobom je zložité a náchylné na chyby. Niektorí programátori majú radi absolútnu kontrolu poskytovanú vytvorením nízkoúrovňového ovládača, ale zvyčajne sa to veľmi rýchlo skomplikuje.
Našťastie má MVC Framework šikovný nástroj, ktorý rieši všetky tieto problémy – výsledky akcií. Nasledujúce časti vysvetľujú a zobrazujú koncept výsledkov akcie rôznymi spôsobmi jeho použitie na generovanie odpovedí z ovládačov.
Výsledky akcieVýsledky akcií v rámci MVC sa používajú na oddelenie vyhlásení o zámere od vykonania zámeru (ospravedlňujeme sa za tautológiu). Koncept sa bude zdať jednoduchý, keď ho pochopíte, ale kvôli určitej nepriamosti trvá nejaký čas, kým ho pochopíte.
Namiesto toho, aby sa metódy akcie zaoberali priamo objektom Response, vracajú objekt triedy odvodený od ActionResult, ktorý popisuje, aká by mala byť odpoveď z kontroléra – napríklad vykreslenie zobrazenia alebo presmerovanie na inú adresu URL alebo metódu akcie. Avšak (toto je práve tá nepriamosť) odpoveď nie je priamo generovaná. Namiesto toho sa vytvorí objekt ActionResult, ktorý MVC Framework spracuje na vytvorenie výsledku po zavolaní metódy akcie.
Systém výsledkov akcií je príkladom návrhového vzoru Command. Tento vzor predstavuje scenáre, v ktorých ukladáte a odovzdávate objekty, ktoré popisujú vykonávané operácie.
Keď MVC Framework prijme objekt ActionResult z metódy akcie, zavolá Metóda ExecuteResult()., definovaný v triede tohto objektu. Implementácia výsledkov akcie potom funguje na objekte Response a generuje výstup, ktorý zodpovedá vášmu zámeru. Aby sme to demonštrovali v praxi, vytvorte priečinok Infrastructure a pridajte doň nový súbor triedy s názvom CustomRedirectResult.cs s vlastnou implementáciou ActionResult, ktorá je znázornená v príklade nižšie:
pomocou System.Web.Mvc; menný priestor ControllersAndActions.Infrastructure ( verejná trieda CustomRedirectResult: ActionResult ( verejný reťazec Url ( get; set; ) verejné prepísanie void ExecuteResult(ControllerContext context) ( string fullUrl = UrlHelper.GenerateContentUrl(Url, context.HttpContext.Respontse.Context); context.HttpContext (fullUrl);
Táto trieda je založená na spôsobe fungovania triedy System.Web.Mvc.RedirectResult. Jedna z výhod open source Rámec MVC je o schopnosti preskúmať vnútorné fungovanie čohokoľvek. Trieda CustomRedirectResult je oveľa jednoduchšia ako jej ekvivalent MVC, ale na účely tohto článku je dostatočná.
Pri vytváraní inštancie triedy RedirectResult odovzdávame adresu URL, na ktorú má byť používateľ presmerovaný. Metóda ExecuteResult(), ktorá bude vykonaná rámcom MVC po dokončení metódy akcie, prijme objekt Response pre požiadavku prostredníctvom objektu ControllerContext poskytnutého rámcom a zavolá buď metódu RedirectPermanent() alebo metódu Redirect() (toto je presne to, čo sa urobilo v rámci nízkoúrovňovej implementácie IController v príklade vyššie v článku).
Použitie triedy CustomRedirectResult je znázornené v príklade nižšie, ktorý ukazuje zmeny, ktoré boli vykonané na odvodenom ovládači:
// ... using ControllersAndActions.Infrastructure; menný priestor ControllersAndActions.Controllers ( public class DerivedController: Controller ( public ActionResult Index() ( // ... ) public ActionResult ProduceOutput() ( if (Server.MachineName == "MyMachineName") vráti nový CustomRedirectResult ( Url = "/Basic/ Index" ); else ( Response.Write("Ovládač: odvodené, metóda akcie: ProduceOutput"); return null; ) ) ) )
Všimnite si, že sme boli nútení zmeniť výsledok metódy akcie na návrat ActionResult. Vrátime hodnotu null, ak nechceme, aby MVC Framework urobil čokoľvek, keď sa vykoná naša metóda akcie, čo sme urobili, ak sa inštancia CustomRedirectResult nevrátila.
Testovanie jednotiek Ovládače a akcie
Mnohé časti rámca MVC sú navrhnuté tak, aby uľahčili testovanie jednotiek, a to platí najmä pre akcie a ovládače. Existuje niekoľko dôvodov pre túto podporu:
Akcie a ovládače môžete testovať mimo webového servera. Kontextové objekty sú prístupné prostredníctvom ich základných tried (ako je HttpRequestBase), čo sa dá ľahko zosmiešniť.
Ak chcete otestovať výsledky metódy akcie, nemusíte analyzovať označenie HTML. Aby ste sa uistili, že získate očakávané výsledky, môžete skontrolovať vrátený objekt ActionResult.
Emulácia požiadaviek klientov nie je potrebná. Systém viazania modelu MVC Framework vám umožňuje písať metódy akcií, ktoré dostávajú vstup vo svojich parametroch. Ak chcete otestovať metódu akcie, jednoducho ju zavoláte priamo a poskytnete príslušné hodnoty parametrov.
Budúce články o generovaní údajov z kontrolórov vám ukážu, ako vytvoriť jednotkové testy pre rôzne typy výsledkov akcií.
Nezabudnite, že testovanie jednotiek je len časť obrazu. Zložité správanie v aplikácii nastáva, keď sa metódy akcie volajú postupne. Jednotkové testovanie funguje najlepšie v kombinácii s inými testovacími prístupmi.
Teraz, keď viete, ako funguje špeciálny výsledok akcie presmerovania, môžete prejsť na jeho ekvivalent, ktorý ponúka rámec MVC, ktorý je výkonnejší a bol dôkladne testovaný spoločnosťou Microsoft. Požadovaná zmena odvodeného ovládača je uvedená nižšie:
// ... public ActionResult ProduceOutput() ( return new RedirectResult("/Basic/Index"); ) // ...
Podmienený príkaz bol odstránený z metódy akcie, čo znamená, že po spustení aplikácie a prechode na URL ako /Derived/ProduceOutput bude prehliadač presmerovaný na URL ako /Basic/Index. Na zjednodušenie kódu metódy akcie obsahuje trieda Controller pohodlné metódy na generovanie rôznych druhov objektov ActionResult. Takže napríklad môžeme dosiahnuť rovnaký efekt ako vo vyššie uvedenom príklade vrátením výsledku metódy Redirect():
// ... public ActionResult ProduceOutput() ( return Redirect("/Basic/Index"); ) // ...
Na systéme výsledkov akcií nie je nič mimoriadne zložité, no v konečnom dôsledku pomáha vytvárať jednoduchší, čistejší a konzistentnejší kód, ktorý sa dá ľahko čítať a testovať. Napríklad v prípade presmerovania môžete jednoducho skontrolovať, či metóda akcie vracia inštanciu RedirectResult, ktorej vlastnosť Url obsahuje očakávaný cieľ.
Rámec MVC definuje mnoho vstavaných typov výsledkov akcií, ktoré sú popísané v tabuľke nižšie:
| ViewResult | Vykreslí zadanú alebo štandardnú šablónu zobrazenia |
Vyhliadka() |
| PartialViewResult | Vykreslí zadanú alebo štandardnú šablónu čiastočného zobrazenia |
PartialView() |
| RedirectToRouteResult | Problémy HTTP presmerovanie 301 alebo 302 na metódu akcie alebo zadaný záznam trasy, vygenerovanie adresy URL podľa konfigurácie smerovania |
RedirectToAction() RedirectToActionPermanent() RedirectToRoute() RedirectToRoutePermanent() |
| RedirectResult | Vydáva presmerovanie HTTP 301 alebo 302 na danú adresu URL |
Redirect() RedirectPermanent() |
| ContentResult | Vráti do prehliadača neformátované textové údaje a navyše nastaví hlavičku typu obsahu |
obsah() |
| FileResult | Prenáša binárne dáta (napríklad súbor na disku alebo bajtové pole v pamäti) priamo do prehliadača |
súbor() |
| JsonResult | Serializuje objekt .NET na formát JSON a odošle ho ako odpoveď. Odpovede tohto typu sa častejšie generujú pri použití nástrojov Web API a AJAX |
Json() |
| JavaScriptResult | Odošle časť zdrojového kódu JavaScript, ktorý má prehliadač spustiť |
JavaScript() |
| HttpUnauthorizedResult | Nastaví stavový kód odpovede HTTP na 401 (čo znamená „neoprávnené“), čo spôsobí, že zavedený mechanizmus overovania (overenie pomocou formulárov alebo overenie systému Windows) vyzve návštevníka, aby sa prihlásil |
Nie |
| HttpNotFoundResult | Návraty Chyba HTTP s kódom 404 - Nenájdené (nenájdené) |
HttpNotFound() |
| HttpStatusCodeResult | Vráti zadaný kód HTTP |
Nie |
| EmptyResult | Ničnerobenie |
Nie |
Všetky tieto typy sú odvodené od triedy ActionResult a mnohé z nich majú pohodlné pomocné metódy v triede Controller. Využitie týchto typov výsledkov si ukážeme v nasledujúcich článkoch.
Opísaný objekt je veľmi užitočný a výkonný nástroj. Tento objekt má niekoľko metód, ich popis je uvedený nižšie:
zbierky: Metódy: Vlastnosti: Response.Cookies zbierkaKolekcia súborov cookie nastavuje hodnoty pre súbory cookie. Ak zadané súbory cookie neexistujú, vytvorí ich. Ak súbor cookie existuje, získa novú hodnotu a zničí starú.
Response.Cookies(cookie) [(kľúč) | . atribúty ] = hodnota
Možnosti:
- cookie – názov súboru cookie
- kľúč - Voliteľný parameter. Ak je zadaný, potom cookie je adresár (vnorený) a kľúč je množina hodnôt.
- atribúty – Špecifikované informácie o samotných súboroch cookie. Tento parameter môže byť jeden z nasledujúcich:
- hodnota – určuje hodnotu, ktorá sa má priradiť tomuto kľúču alebo atribútu.
| názov | Popis |
| doména | Iba nahrávanie. Ak je to uvedené, súbory cookie sa odosielajú iba na požiadanie z tejto domény. |
| Platnosť vyprší | Iba nahrávanie. Dátum vypršania platnosti súboru cookie. Tento dátum musí byť nastavený, aby sa do klienta zapisovali cookies HDD po skončení relácie. Ak tento atribút nie je nastavený, predpokladá sa dátum vypršania platnosti súboru cookie aktuálny dátum. Platnosť cookies vyprší ihneď po ukončení relácie. |
| HasKey | Iba čítanie. Označuje, či súbor cookie obsahuje daný kľúč. |
| Cesta | Iba nahrávanie. Ak je to uvedené, súbory cookie sa odosielajú iba na požiadanie z tejto cesty. Ak parameter nie je nastavený, použije sa cesta aplikácie. |
| Zabezpečiť | Iba nahrávanie. Označuje, či budú súbory cookie chránené alebo nie. |
komentár:
Ak sa kľúčový súbor cookie vytvorí tak, ako je to znázornené v nasledujúcom skripte,
potom sa odošle nasledujúca hlavička:
Set-Cookie:MYCOOKIE=TYPE1=sugar&TYPE2=cookies
Ak priradíte hodnotu súboru mycookie bez použitia kľúčov, potom táto akcia zničí kľúče type1 a type2. Napr.:
V predchádzajúcom príklade budú kľúče type1 a type2 zničené a ich hodnoty budú stratené. Mycookie bude teraz obsahovať hodnotnú čokoládovú marshmallow.
Existenciu konkrétneho kľúča môžete skontrolovať aj nasledujúcim spôsobom:
Ak je zobrazené TRUE, potom takýto kľúč existuje, ak je FALSE, neexistuje.
Metóda Response.WriteResponse.Write variable_or_value
Možnosti:
- variable_or_value – Údaje, ktoré sa majú zobraziť na obrazovke prehliadača prostredníctvom HTML. Tento parameter môže byť akéhokoľvek typu podporovaného VisualBasic Scripting Edition. To znamená, že údaje môžu byť nasledujúcich typov: dátum, reťazec, znak, číselné hodnoty. Význam tento parameter nemôže obsahovať kombinácie %>. Namiesto toho môžete použiť ekvivalentnú kombináciu %\>. Webový server po spustení skriptu prevedie túto sekvenciu na požadovanú.
Nasledujúci príklad ukazuje, ako metóda Response.write pracuje na výstupe správy pre klienta.
Poviem ti len: A tvoje meno
Nasledujúci príklad pridá značku HTML na webovú stránku. Keďže táto metóda nemôže obsahovať kombináciu %>, použijeme postupnosť %\>. Takže príklad skriptu:
Výstupom bude riadok:
