Dobrý den, milí čtenáři tohoto blogu. V pokračování naší studie přejdeme k zvážení formulářových a vstupních značek s jejich atributy (), pomocí kterých můžete vytvořit širokou škálu formulářů pro web.
Bez ohledu na téma a obsah toho či onoho webového zdroje bude s největší pravděpodobností obsahovat formuláře v té či oné podobě: textová pole, rozevírací nabídky, různá tlačítka nebo spínače. Mimochodem, v jedné z publikací jsem již hovořil o prvcích, které pomáhají diverzifikovat formy.
Jaký je praktický účel všech možných forem? V první řadě jsou potřeba k tomu, aby uživatelsky zadaná data odeslali na server za účelem dalšího zpracování pomocí speciálně vytvořeného skriptu (handleru).
HTML formuláře - jak jsou vytvořeny pomocí formuláře a vstupu
Jak jsem řekl na začátku, na každém více či méně rozvinutém webu musí být nějaký webový formulář, nebo dokonce několik najednou. Abychom pochopili, jak důležité jsou ve světle souladu s webovými zdroji moderní požadavky, stačí vám dát hned tři objekty, které používají formuláře založené na formulářových a vstupních značkách, které už jen svým názvem nenechají na pochybách o jejich nezbytnosti pro projekt toho či onoho směru:
Pokud budete sledovat například odkaz na článek o tvorbě zpětná vazba(umožňuje všem uživatelům posílat zprávy do administrace webu), poté je tam uveden HTML kód s formulářem, který má otvor (
) Část:
Zde hraje formulář zásadní roli, protože spouští instalaci webového formuláře. Sama o sobě nezobrazuje oblast na webové stránce, ale slouží jako kontejner obsahující další značky.
V našem případě (viz snímek obrazovky výše) jich je několik vstup(tato značka HTML je jednoduchá, jinými slovy nemá uzavírací komponentu) a také textarea s různými sadami atributů. Každý z nich definuje svůj vlastní prvek obsažený ve formuláři.
16. Autofokus(bez parametrů) je logický atribut, který nastaví fokus na pole ihned po načtení webové stránky, díky čemuž můžete zadávat data, aniž byste na ně klikali. Nelze použít pouze na input type="hidden".
17. Zakázáno(bez hodnot) - zakáže uživateli formulářový prvek, do kterého byl přidán. Nejčastěji se používá ve spojení se skripty, kde jsou specifikovány podmínky, za kterých bude nepřístupný prvek aktivován.
18. Formulář— přidruží prvek k formuláři, když je umístěn mimo kontejner
. Pro propojení se do tagu formuláře přidá atribut globálního id a do tagu input se přidá atribut form, jehož hodnoty jsou stejné (například id="data" a form="data") .19. Násobek(bez parametrů) - sady příležitost více možností pro uživatele a používá se pouze ve spojení s type="file" a type="email".
Pokud použijete pole pro nahrání souboru, můžete vybrat několik souborů z počítače najednou pomocí klávesy Ctrl nebo Shift. Pokud se zobrazí pole pro zadání adresy E-mailem(type="email"), pak e-maily zadávejte oddělené čárkami.
20. Požadované(žádné hodnoty) – aktivuje požadavek na zadání dat uživatelem. Prohlížeč tedy zablokuje odeslání webového formuláře, pokud požadované pole zůstane prázdné, a zobrazí odpovídající zprávu o nutnosti jeho vyplnění.
Tento atribut nepoužívá se pro grafické a standardní tlačítka(type="button | image"), stejně jako pro skryté vstupní pole (type="hidden").
21. Velikost— definuje šířku textové pole ve znacích (vhodné pouze pro prvky typu s parametry "email | heslo | hledat | tel | text | url"). Výchozí hodnota je 20 znaků.
Další čtyři atributy (22-25) pro vstupní značka nesou téměř stejnou funkcionalitu jako pro , ale pro úplnost se o nich krátce zmíním.
22. Maximální délka- ukládá limit na maximální částka znaky, které můžete zadat při vyplňování textového pole. Pokud se pokusíte překročit tento limit, další vstup bude zablokován. Tento atribut je použitelný pouze pro textové prvky s type="e-mail | heslo | hledat | tel | text | url".
23. Mindélka— omezuje minimální počet znaků, které je třeba zadat do textové oblasti. Při pokusu o odeslání dat obsahujících méně znaků se objeví krátká zpráva o nutnosti doplnění obsahu formuláře a informace o počtu již zadaných znaků. Podmínky použití jsou úplně stejné jako v případě maxlength.
24. Zástupný symbol— přímo do textového pole můžete umístit nápovědu (bude sloužit jako parametr), která zmizí v okamžiku, kdy uživatel začne zadávat znaky. Pouze pro pole, která jsou tvořena pomocí parametrů email, heslo, hledání, text, tel, url typ atributu vstupní značky.
25. Pouze ke čtení(bez parametrů) - označuje, že text dříve zadaný do pole je k dispozici pouze pro čtení a kopírování. Obvykle se používá ve spojení se skripty, kde jsou specifikovány podmínky, které při splnění mohou aktivovat tento formulářový prvek.
A nakonec několik dalších atributů, které doplňují funkčnost různých formulářových prvků:
26. Vzor- v roli svůj význam odráží regulární výraz, na jehož základě jsou nastavena pravidla pro zadávání informací. Doporučuje se dodatečně přidat globální atribut názvu, jehož parametrem je přidání vysvětlujícího textu, který uživatelům usnadní vyplňování polí. Vzor se použije pouze na prvky e-mail, heslo, vyhledávání, text, tel, url. Pojďme to pochopit na příkladu. Zde je kód pro zjednodušený registrační formulář (s ):
|
Přihlásit se Heslo |
Pro pole přihlášení (type="text") je jako hodnota vzoru uveden regulární výraz (5,), který implikuje použití znaků latinky, a je třeba zadat alespoň pět znaků.
Ve vztahu k textové oblasti pro heslo (type="password") je hodnota nastavena na (8,), což určuje zadávání výhradně latinských znaků v každém případě (velká a malá písmena), stejně jako číslice, přičemž celkový počet všech znaků by neměl být menší než osm.
V případě porušení dané podmínky zadání, prohlížeč vám nedovolí odesílat data a zobrazí odpovídající varování:
27. Src— definuje cestu k obrázku (URL, což je jeho hodnota) pro zobrazení grafického tlačítka „image“ (viz tabulka parametrů typu vstupu výše).
28. Krok— nastavuje krok pro prvky, které vyžadují výběr číselné hodnoty(input type="date | datetime-local | měsíc | číslo | rozsah | tel | čas | týden.").
Může mít libovolné celé číslo nebo zlomkové číslo. Výchozí krok = "1". Pro nastavení konečného vstupního rozsahu můžete opět použít výše zmíněné atributy min a max. Pro přehlednost v zkušební formulář zahrneme 2 prvky type="číslo". Pro první nastavte step="2" a pro druhý krok="0,1":
|
Zadejte hodnotu od -10 do 10: Zadejte hodnotu mezi 0 a 1: |
29. Hodnota— nastavuje hodnotu prvku formuláře, který bude předán obslužné rutině. Na server je odeslána dvojice „název-parametr“, kde je název určen atributem název štítku input a parametrem je atribut value. Navíc pro různé tvarové prvky hodnota bude hrát různé role:
- for type="button | reset | submit" - nastaví textový popis tlačítek;
- for type="checkbox | radio | image" - identifikuje každé zaškrtávací políčko, přepínač nebo grafické tlačítko při odesílání a zpracování dat na serveru;
- for type="password | text" - ihned při načítání formuláře zobrazí v poli předběžný text, který může uživatel změnit nebo zcela smazat;
- for type="file" (nahrání souboru) se nepoužije, protože tento prvek neovlivňuje.
Příklad použití pro každou z výše uvedených možností:
|
Vyberte CMS: W.P. Joomla |
Tady value atribut value definuje následující součásti každého prvku: displeje textový fragment pro pole type="text" ("Vaše jméno") identifikuje každý z přepínačů ("1" a "2") nastavených s type="radio" a také aktivuje štítek na tlačítku ("Odeslat" ).
Příklad vytvoření krásného HTML formuláře
Dále se vám pokusím představit vzorový webový formulář, jehož kód obsahuje nejen kombinace vstupních typů s různými hodnotami, které tvoří standardní textová pole a tlačítka, ale také například, které umožňují iniciovat zaměření na prvek nejen přímým kliknutím myši, ale také kliknutím na text.
Vezměte prosím na vědomí, že chcete získat jedinečný design jednotlivé komponenty jsou umístěny formuláře, z nichž každý má sady:
Zpět (max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- bottom:10px; width:100%).in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; background-position:10px 10px) .form-4 input (display:block; height:50px; font-size:24px; width:100%; kurzor: ukazatel)
Výsledkem je, že takový webový formulář má následující obrys:
Více úplné informace vytvořit tento konkrétní formulář tato stránka(mimochodem, tam si můžete nejen ověřit funkčnost jednotlivých textových oblastí zadáváním dat do nich, ale také experimentovat s webovým formulářem úpravou HTML kódu a/nebo Vlastnosti CSS zcela nebo částečně mění svůj vzhled).
Mým cílem bylo představit vám algoritmus pro použití různých hodnot atributu type a formulářová značka vytvářet různé HTML formuláře Online. Doufám, že je úkol splněn. V každém případě se podělte o své názory na toto různorodé téma v komentářích.
Samozřejmě, že v následujících publikacích budu pokračovat v popisu hlavních značek hypertextového značení, takže se nezapomeňte přihlásit k odběru aktualizací blogu prostřednictvím e-mailu. Chcete-li to posílit, podívejte se na další lekci Evgeniy Popova o vytváření kontaktního formuláře.
Štítek (z angličtiny formulář- formulář) nainstaluje formulář na webovou stránku.
Formulář je určen pro výměnu dat mezi uživatelem a serverem. Rozsah použití formulářů není omezen na odesílání dat na server, pomocí klientských skriptů můžete přistupovat k libovolnému prvku formuláře, měnit jej a aplikovat podle svého uvážení.
Dokument může obsahovat libovolný počet formulářů, ale na server lze současně odeslat pouze jeden formulář. Z tohoto důvodu musí být data formuláře na sobě nezávislá.
Pro odeslání formuláře na server použijte tlačítko Odeslat, totéž lze provést stisknutím klávesy Enter ve formuláři. Pokud ve formuláři chybí tlačítko Odeslat, Zadejte klíč napodobuje jeho použití.
Když je formulář odeslán na server, je řízení dat přeneseno do programu určeného atributem akce prvku
Závěrečná značka je povinná.
WAI ARIA
Výchozí hodnota role: formulář
Platné hodnoty rolí:
- žádný
- prezentace
- Vyhledávání
Atributy
- accept-charset – Nastavuje kódování, ve kterém může server přijímat a zpracovávat data.
- akce – Adresa programu nebo dokumentu, který zpracovává data formuláře.
- autocomplete – Umožňuje automatické doplňování polí formuláře.
- enctype – Způsob kódování dat formuláře.
- metoda - metoda protokolu HTTP.
- jméno – Název formuláře.
- novalidate - Zruší vestavěnou validaci dat formuláře pro správnost zadání.
- target – Název okna nebo rámce, kam obslužná rutina načte vrácený výsledek.
přijmout-znakovou sadu
Nastavuje kódování, ve kterém může server přijímat a zpracovávat data formuláře.
Syntax
Hodnoty
Název kódování, například Windows-1251, UTF-8 atd.
Výchozí hodnota
Kódování nastavené pro stránku.
akce
Určuje obslužnou rutinu, ke které se přistupuje k datům formuláře, když jsou odeslána na server. Může působit jako psovod serverový program nebo HTML dokument, který obsahuje skripty na straně serveru (např. Parser). Poté, co obslužná rutina provede akce s daty formuláře, vrátí nový dokument HTML.
Pokud atribut akce chybí, aktuální stránku znovu načte a vrátí všechny prvky formuláře na jejich výchozí hodnoty.
Syntax
Hodnoty
Hodnota se bere jako plná resp relativní cesta do souboru serveru.
Výchozí hodnota
automatické doplňování
Řídí automatické vyplňování polí formuláře. Hodnota může být přepsána atributem autocomplete specifické prvky formuláře.
Automatické vyplňování provádí prohlížeč, který si pamatuje hodnoty zapsané při prvním zadání a poté je nahradí, když je znovu zadáte do polí formuláře. V tomto případě lze automatické doplňování zakázat v nastavení prohlížeče a nelze jej v tomto případě změnit pomocí atributu autocomplete.
Po zadání prvních písmen textu se zobrazí seznam dříve uložených hodnot, ze kterého si můžete vybrat, co potřebujete.
Syntax
Hodnoty
- on - Povolí automatické vyplňování formulářů.
- vypnuto – deaktivuje automatické vyplňování. Tato hodnota se obvykle používá k tomu, aby prohlížeč neukládal důležitá data (hesla, čísla bankovních karet), stejně jako zřídka zadávaná nebo jedinečná data (captcha).
Výchozí hodnota
enctype
Určuje, jak jsou data formuláře zakódována při odeslání na server. Obvykle není potřeba nastavovat atribut enctype, data jsou na straně serveru chápána zcela správně. Pokud však používáte pole pro odeslání souboru (input type="file"), měli byste definovat atribut enctype jako multipart/form-data .
Syntax
Hodnoty
- application/x-www-form-urlencoded - Místo mezer vložte + , symboly jako ruská písmena jsou kódovány jimi hexadecimální hodnoty(například %D0%90%D0%BD%D1%8F místo Anya).
- multipart/form-data - Data nejsou zakódována. Tato hodnota se používá při odesílání souborů.
- text/plain - Mezery jsou nahrazeny znaménkem +, písmena a další znaky nejsou kódovány.
Výchozí hodnota
application/x-www-form-urlencoded
metoda
Atribut method informuje server o metodě požadavku.
Syntax
Hodnoty
Hodnota atributu method nerozlišuje malá a velká písmena. Existují dva způsoby – získat a odeslat.
- get - Tato metoda je jednou z nejběžnějších a je určena k získání požadovaných informací a přenosu dat do adresní řádek. Páry jméno=hodnota jsou pak připojeny k adrese za otazníkem a odděleny znakem ampersand (symbol &). Pohodlí použití metody get spočívá v tom, že adresu se všemi parametry lze opakovaně používat, ukládat si ji například do záložek prohlížeče a také můžete měnit hodnoty parametrů přímo v adresním řádku.
- post – metoda post odesílá data na server v požadavku prohlížeče. To vám umožní odeslat velké množství data, než jsou k dispozici pro metodu get, protože příspěvek nemá limit 4 KB. Na fórech se používá velké množství dat, poštovní služby, plnění databáze, při odesílání souborů atp.
Výchozí hodnota
název
Definuje jedinečné jméno formuláře. Název formuláře se obvykle používá pro přístup k jeho prvkům prostřednictvím skriptů.
Syntax
Hodnoty
Jméno je sada znaků, včetně čísel a písmen. JavaScript rozlišuje velká a malá písmena, takže při přístupu k formuláři podle názvu prostřednictvím skriptů použijte stejný pravopis jako atribut name.
Výchozí hodnota
novalidovat
Ruší vestavěné ověření správnosti údajů zadaných uživatelem do formuláře. Tuto kontrolu provádí prohlížeč automaticky při odeslání formuláře na server a u polí , , stejně jako v případě, že existuje vzor nebo povinný atribut.
Syntax
Hodnoty
Výchozí hodnota
Ve výchozím nastavení je tento atribut zakázán.
cílová
Poté, co obslužný program formuláře obdrží data, vrátí výsledek jako dokument HTML. Můžete definovat rámec, do kterého se výsledná webová stránka načte. K tomuto účelu se používá cílový atribut, jeho hodnota je název rámce. Pokud cíl není nastaven, vrácený výsledek se zobrazí na aktuální kartě.
Syntax
Hodnoty
Hodnota je název rámce určený atributem name prvku