Formuláře formuláře html. HTML formuláře
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 konkrétního webového zdroje bude s největší pravděpodobností obsahovat formuláře v té či oné podobě: textová pole, rozbalovací nabídky, různá tlačítka nebo přepí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 webového zdroje s moderními požadavky, stačí vám poskytnout 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í nikoho na pochybách o jejich nutnost pro projekt jednoho nebo druhého směru:
Pokud se budete řídit například odkazem na článek o vytváření zpětné vazby (umožnění všem uživatelům posílat zprávy správě webu), pak HTML kód s formulářem, který má otvor (
) Část:
Zde hraje formulář zásadní roli, protože iniciuje 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 možnost vícenásobného výběru 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 z počítače vybrat několik souborů najednou pomocí kláves Ctrl nebo Shift. Pokud se zobrazí pole pro zadání e-mailové adresy (type="email"), e-maily by měly být zadávány 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 se nepoužívá pro grafická a standardní tlačítka (type="button | obrázek") ani pro skrytá vstupní pole (type="hidden").
21. Velikost— určuje šířku textového pole ve znacích (vhodné pouze pro typové prvky s parametry "email | heslo | vyhledávání | tel | text | url"). Výchozí hodnota je 20 znaků.
Další čtyři atributy (22-25) pro vstupní značku nesou téměř stejnou funkcionalitu jako pro , ale pro úplnost je také krátce zmíním.
22. Maximální délka— omezuje maximální počet znaků, které lze 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="email | password | search | 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— jako jeho hodnota odráží regulární výraz, na jehož základě jsou nastavena pravidla pro zadávání informací. V tomto případě se doporučuje dodatečně přidat atribut globálního názvu, jehož parametr můžete přidat vysvětlující text, 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.
Pokud jsou zadané vstupní podmínky porušeny, prohlížeč vám nedovolí odesílat data a zobrazí příslušné 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é poskytují výběr číselných hodnot (input type="date | datetime-local | měsíc | číslo | rozsah | tel | čas | týden.").
Jako parametr 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 zařadíme do testovacího formuláře 2 prvky type="number". 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 název je určen atributem name vstupní značky a parametr je určen atributem 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ává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: zobrazí textový fragment pro pole type="text" ("Vaše jméno"), identifikuje každý z přepínačů ("1" a "2") nastavených pomocí type="radio", a také aktivuje nápis 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 pro získání jedinečného designu jsou umístěny jednotlivé součásti formuláře, každá se sadami:
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:
Podrobnější informace o vytvoření tohoto konkrétního formuláře naleznete na tato stránka(mimochodem, tam si můžete nejen otestovat 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 vlastností CSS, zcela či částečně změnit jeho vzhled).
Mým cílem bylo představit vám algoritmus pro použití různých hodnot atributu type a značky formuláře k vytváření různých formulářů HTML na webu. 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.
Formuláře jsou určeny k odesílání dat od uživatele na webový server. Formuláře v HTML mohou obsahovat textová pole a textové oblasti, zaškrtávací políčka a přepínače a rozevírací seznamy. To vše jsou prvky formy. Každý prvek slouží k předání určitého významu webu.
HTML formulář je ve své podstatě webová stránka, na které vidíte oblasti pro zadávání vašich informací. Po vyplnění formuláře a kliknutí na tlačítko Odeslat jsou informace z formuláře zabaleny a odeslány na webový server ke zpracování skriptem na straně serveru (souborem handleru). Po zpracování se vám jako odpověď vrátí další webová stránka. Následující obrázek jasně ukazuje, jak formulář funguje:
Na vytváření HTML formulářů není nic složitého. Nejjednodušší způsob, jak získat představu o formulářích, je analyzovat malý kód HTML a poté zjistit, jak to funguje. Následující příklad ukazuje syntaxi pro vytvoření jednoduchého formuláře HTML:
Příklad: Jednoduchý HTML formulář
- Zkus to sám "
Moje první forma:
Název:
Příjmení:
Živel
Formuláře se do webových stránek vkládají pomocí prvku . Poskytuje kontejner pro veškerý obsah formuláře, včetně prvků, jako jsou textová pole a tlačítka, a také jakékoli další značky HTML. Nemůže však obsahovat jiný prvek
.
Pro odeslání formuláře na server použijte tlačítko „Odeslat“, stejný výsledek získáte, pokud ve formuláři stisknete klávesu „Enter“. Pokud se na formuláři nenachází tlačítko "Odeslat", lze k odeslání použít klávesu "Enter".
Většina atributů prvků ovlivnit zpracování formuláře, nikoli jeho design. Nejběžnější z nich jsou akce A metoda. Atribut akce obsahuje URL, na kterou budou informace ve formuláři odeslány ke zpracování serverem. Atribut metoda je metoda HTTP, kterou musí prohlížeče použít k odeslání dat formuláře.
Živel
Téměř všechna pole formuláře jsou vytvořena pomocí prvku (z anglického input - input). Vzhled prvku měnit v závislosti na hodnotě jeho atributu typ:
Zde jsou některé hodnoty atributů typ:
Zadání textu a hesla
Jedním z nejjednodušších typů formulářových prvků je textové pole, určené pro zadávání textu na jeden řádek. Tento typ zadávání textu je standardně nastaven, a proto je to jednořádkové pole, které se zobrazí, pokud zapomenete zadat atribut typ. Chcete-li do formuláře přidat jednořádkové textové vstupní pole, měli byste uvnitř prvku zaregistrovat atribut typ s textovou hodnotou:
Pole pro zadání hesla je typ běžného textového pole. Podporuje stejné atributy jako jednořádkové textové pole. Atribut název nastavuje název pole pro zadání hesla, které bude odesláno na server spolu s heslem zadaným uživatelem. Chcete-li vytvořit pole hesla, musíte nastavit atribut hesla na typ(heslo (anglicky) - heslo):
Příklad vytvoření formuláře s polem pro heslo:
Příklad: Pole hesla
- Zkus to sám "
Vaše přihlašovací jméno:
Heslo:
Atribut můžete použít ve spojení s tímto atributem maxdélka, jehož hodnota určuje maximální počet znaků, které lze zadat do daného řetězce. Pomocí atributu můžete také nastavit délku vstupního pole velikost. Ve výchozím nastavení omezuje většina prohlížečů šířku textového pole na 20 znaků. Chcete-li řídit šířku nových prvků formuláře, namísto atributu velikost, doporučujeme použít kaskádové styly (CSS).
Atribut hodnota určuje hodnotu, která se ve výchozím nastavení zobrazí v textovém poli při načtení formuláře. Zadáním výchozí hodnoty do pole můžete uživateli přesně vysvětlit, jaké údaje a v jakém formátu zde má uživatel zadávat. Je to jako vzorek, protože pro uživatele je mnohem pohodlnější vyplnit formulář a vidět příklad před sebou.
Vypínače (rádio)
Živel typ rádio vytváří přepínače, které používají logický princip "OR", což vám umožňuje vybrat pouze jednu z několika hodnot: pokud vyberete jednu pozici, všechny ostatní se stanou neaktivními. Základní syntaxe přepínacího prvku je:
Atribut název pro přepínače je vyžadován a hraje důležitou roli při kombinování několika prvků přepínače do skupiny. Chcete-li zkombinovat přepínače do skupiny, musíte nastavit stejnou hodnotu atributu název a jinou hodnotu atributu hodnota. Atribut hodnota nastavuje hodnotu vybraného přepínače, který má být odeslán na server. Hodnota každého prvku přepínače musí být v rámci skupiny jedinečná, aby server věděl, jakou možnost odezvy uživatel zvolil.
Přítomnost atributu kontrolovány(z angličtiny - nainstalováno) u prvku switch označuje, která z navrhovaných možností by měla být v případě potřeby standardně vybrána při načítání stránky. Tento atribut lze nastavit pouze pro jeden prvek přepínače ze skupiny:
- Zkus to sám "
Kolik je Vám let?
- pod 18
- od 18 do 24
- od 25 do 35
- více než 35
Atribut akce.
Hlavní pro prvek je atribut akce, který určuje obsluhu dat pro formulář. Obslužná rutina dat je soubor, který popisuje, co dělat s daty formuláře. Výsledkem tohoto zpracování je nová stránka HTML, která se vrátí do prohlížeče. Jinými slovy, v atributu akce určuje cestu URL k souboru obslužné rutiny na serveru (někdy nazývané stránka skriptu) pro zpracování formuláře. Syntaxe je následující:
Zpracovací soubor je umístěn na serveru mytestserver.com ve složce jmenná složka a název skriptu serveru, který bude data zpracovávat - obrabotchik.php. Budou mu přeneseny všechny údaje, které jste zadali do formuláře na webové stránce. Přípona .php označuje, že zadaný formulář je zpracován skriptem napsaným v PHP. Samotný handler může být napsán v jiném jazyce, například to může být skriptovací jazyk Python, Ruby atd.
Je vhodné vždy nastavit hodnotu atributu akce. Pokud má formulář předávat hodnoty stejné stránce, kde se nachází, zadejte prázdný řetězec jako hodnotu atributu action: action="".
atribut metody
Atribut metoda určuje, jak mají být informace přenášeny na server. Způsob odeslání formuláře, který zvolíte, závisí na datech, která chcete s formulářem odeslat. Velkou roli zde hraje objem těchto dat. Nejoblíbenější jsou dva způsoby přenosu zdrojových dat formuláře z prohlížeče na server: DOSTAT A POŠTA. Metodu lze nastavit na libovolnou, a pokud ji nezadáte, použije se výchozí DOSTAT. Zvažme použití každého z nich.
Metoda POST
Metoda POŠTA balíčky tvoří data a odešle je na server, aniž by si toho uživatel všiml, protože data jsou obsažena v těle zprávy. Webový prohlížeč, při použití metody POŠTA odešle požadavek na server sestávající ze speciálních hlaviček následovaných daty formuláře. Protože obsah tohoto požadavku je dostupný pouze serveru, metoda POŠTA slouží k přenosu důvěrných údajů, jako jsou hesla, údaje o bankovních kartách a další osobní údaje uživatelů. Metoda POŠTA vhodné také pro odesílání velkých objemů informací, protože na rozdíl od metody DOSTAT, nemá žádná omezení na počet přenášených znaků.
metoda GET
Jak již víte, hlavním úkolem prohlížeče je přijímat webové stránky ze serveru. Takže když použijete metodu DOSTAT, váš prohlížeč jednoduše načte webovou stránku jako vždy. Metoda DOSTAT také zabalí data formuláře, ale před odesláním požadavku na server je připojí na konec adresy URL. Abychom pochopili, jak metoda funguje DOSTAT, podívejme se na to v akci. Otevřete první příklad z této lekce (Příklad: Jednoduchý formulář HTML) v programu Poznámkový blok (například Notepad++) a proveďte malou změnu v kódu HTML:
Atributy
Nastavuje kódování, ve kterém může server přijímat a zpracovávat data. Adresa programu nebo dokumentu, který zpracovává data formuláře. Umožňuje automatické vyplňování polí formuláře. Metoda pro kódování dat formuláře. Metoda protokolu HTTP. Název formuláře. Přepíše vestavěnou kontrolu správnosti zadávání dat formuláře. Název okna nebo rámce, kam obslužná rutina načte vrácený výsledek.Uzavírací štítek
Požadované.
HTML5 IE Cr Op Sa Fx
Výsledek tohoto příkladu je znázorněn na Obr. 1.
Rýže. 1. Pohled na prvky formuláře v okně prohlížeče
HTML tagy, které definují HTML formuláře na webu
Vytváříme webové stránky a jednotlivé stránky na internetu komunikovat s návštěvníky.
HTML formuláře se používají k registraci návštěvníků na webu, k interaktivním průzkumům a hlasování, umožňují posílat zprávy, nakupovat a tak dále. HTML Formulář je vytvořen pro jeden účel: shromažďování a následné předávání informací ke zpracování pomocí softwarového skriptu nebo prostřednictvím e-mailu.
Příklad HTML formuláře | Zadejte web
Značky, atributy a hodnoty
- - určit tvar.
- name="" - definuje název formuláře.
- method="" - definuje způsob odeslání dat z formuláře. Hodnoty: "get" (výchozí) a "post" . Často se používá metoda „post“, protože umožňuje přenos velkého množství dat.
- action="" - definuje adresu URL, na kterou jsou data odeslána ke zpracování. V našem případě - enter_data.php ..
- - definovat takové prvky formuláře, jako jsou tlačítka, přepínače, textová pole pro zadávání dat.
- type="text" - definuje textové pole pro zadávání dat.
- type="password" - definuje pole pro zadání hesla, přičemž text se zobrazuje ve formě hvězdiček nebo kroužků.
- type="checkbox" - definuje přepínač.
- type="hidden" - definuje skrytý formulářový prvek - slouží k přenosu dalších informací na server.
- size="25" - délka textového pole ve znacích.
- maxlength="30" - maximální povolený počet zadaných znaků.
- value="" - definuje hodnotu, která bude odeslána ke zpracování, pokud se týká přepínačů nebo přepínačů. Hodnota tohoto atributu jako součásti textového pole nebo tlačítka se ve výše uvedeném příkladu zobrazí jako například Vasya nebo Login.
Příklad HTML formuláře | Komentáře na webu
|
|