HTML tagy, ktoré definujú HTML formuláre na stránke

Vytvárame webové stránky a jednotlivé stránky na internete komunikovať s návštevníkmi.

HTML formuláre sa používajú na registráciu návštevníkov na stránke, na interaktívne ankety a hlasovanie, umožňujú vám posielať správy, nakupovať atď. HTML Formulár je vytvorený za jedným účelom: zber a následný prenos informácií na spracovanie do programového skriptu resp e-mail.

Vzorový HTML formulár | Prihlásiť sa

Značky, atribúty a hodnoty

• - určiť formu.
• name="" - definuje názov formulára.
• method="" - určuje spôsob odosielania údajov z formulára. Hodnoty: "get" (predvolené) a "post" . Metóda „post“ sa používa častejšie, pretože umožňuje prenášať veľké množstvo dát.
• action="" - určuje adresu URL, pomocou ktorej sa údaje odosielajú na spracovanie. V našom prípade - enter_data.php ..
• - definovať také prvky formulára, ako sú tlačidlá, prepínače, textové polia na zadávanie údajov.
• type="text" - definuje textové pole pre zadávanie údajov.
• type="password" - definuje pole pre zadanie hesla, pričom text sa zobrazuje ako hviezdičky alebo krúžky.
• type="checkbox" - definuje prepínač.
• type="hidden" - definuje skrytý prvok formuláre – slúžia na odosielanie dodatočných informácií na server.
• size="25" - dĺžka textové pole v znakoch.
• maxlength="30" - maximálny povolený počet vstupných znakov.
• value="" - definuje hodnotu, ktorá bude odoslaná na spracovanie, ak odkazuje na prepínače alebo prepínače. Hodnota tohto atribútu ako súčasti textového poľa alebo tlačidla sa zobrazí ako napríklad John alebo Login v príklade vyššie.

Vzorový HTML formulár | Komentáre na stránke

Značky, atribúty a hodnoty

• action="http://site/comments.php" - určuje url, na ktorý sa budú odosielať údaje z formulára.
• id="" - definuje názov, identifikátor prvku formulára.
• name="" - definuje názov prvku formulára.
• - definujte textové pole vo formulári.
• cols="" - určuje počet stĺpcov textového poľa formulára.
• rows="" - Určuje počet riadkov pre textové pole formulára.

Ak medzi vložte text, zobrazí sa vo vnútri poľa ako príklad, ktorý sa dá ľahko odstrániť.

Vzorový HTML formulár | Rozbaľovací zoznam

Značky, atribúty a hodnoty

• - definujte zoznam s položkami, z ktorých si môžete vybrať.
• size="" - určuje počet viditeľných pozícií zoznamu. Ak je hodnota 1, máme čo do činenia s rozbaľovacím zoznamom.
• - definovať pozície (body) zoznamu.
• value="" - obsahuje hodnotu, ktorá bude odoslaná formulárom na zadanú url na spracovanie.
• selected="selected" - vyberie položku zoznamu ako príklad.

Vzorový HTML formulár | Zoznam s posúvačom

Zvýšením hodnoty atribútu size="" dostaneme zoznam s posuvníkom:

Pre túto možnosť používame príznak multiple="multiple", ktorý umožňuje vybrať viacero položiek. Jeho absencia umožňuje vybrať iba jednu položku.

Pozri dodatočne:

Zdravím vás, milí čitatelia blogovej stránky. Dnes chcem hovoriť o veciach, ako sú HTML formuláre. Bez ohľadu na engine vašej stránky (cms), určite bude používať formuláre vytvorené pomocou značiek Form a Input, ako aj Button, Checked, Value, Checkbox, Radio, Checkbox, Submit atribútov a parametrov .

No a k tomu môžete pridať aj prvky na vytváranie rozbaľovacích zoznamov a textových polí – Select, Option, Textarea, Label, Fieldset, Legend.

Prečo sú potrebné formuláre a ako fungujú na moderných stránkach

Pomocou týchto značiek sa vytvorí rovnaký reťazec vyhľadávania na stránke () a vyhľadávanie tohto reťazca vo vašom projekte bude povinné. Preto pochopenie toho, ako sú usporiadané a práca, nebude narúšať vašu úspešnú prácu na dizajne a nebude to zbytočné pre vlastnú propagáciu a propagáciu.

Takže s odôvodnením potreby študovať tieto prvky si myslím, že by už nemali byť žiadne otázky, takže je čas pristúpiť priamo k štúdiu ich možných možností.

Áno, chcem vám tiež pripomenúť, že sa nám už podarilo zvážiť veľa materiálov na tému hypertextového značkovacieho jazyka, napríklad tri ) a .

Formuláre sa vo svojej podstate skladajú z prvkov, na vytvorenie ktorých sa do hlavného kontajnera vkladajú rôzne značky zo značiek formulára – Checked, Value, Checkbox, Radio, Checkbox, Submit atď. Stačí umiestniť jeho kód na akékoľvek miesto vhodné pre túto šablónu stránky , ktorá určuje, ako by mala vyzerať pomocou značiek a ich atribútov.

Môže to byť textové pole s tlačidlom na odoslanie zadanej požiadavky, výber prepínačov (kde môžete nechať stlačené iba jedno z poskytnutých tlačidiel), viaceré textové polia s tlačidlom na odoslanie () a ďalšie.

Napríklad v prípade „hľadania“ pomocou atribútu Hodnota môžete určiť, čo presne sa napíše na tlačidlo umiestnené vedľa poľa na zadanie dotazu. Údaje zapísané do formulárov je potrebné ďalej nejakým spôsobom spracovávať.

Napríklad v prípade spätná väzba používateľ po vyplnení poľa so svojím menom, zadaní svojho e-mailu a textu správy a následnom kliknutí na tlačidlo odoslať bude mať právo dúfať, že odošle údaje z formulára na e-mail stránky autora. Ale implementovať to pomocou iba jedného hypertextového značkovacieho jazyka () bohužiaľ nie je možné.

Na tieto účely je potrebný špeciálny obslužný program, ktorý po kliknutí na tlačidlo odoslania zoberie všetky údaje z polí spätnej väzby a odošle ich vlastníkovi zdroja e-mailom. Ktorý program to urobí, musíte určiť sami pomocou atribútu Action.

Spracovacím programom je zvyčajne skript napísaný v jazyk PHP. Preto v atribúte Action tagu Form budete musieť zadať cestu k súboru tohto skriptu umiestneného na serveri vášho hostingu. Ako príklad uvediem predplatné na RSS zdroj môj blog cez e-mail:

Na prvý pohľad sa to zdá byť trochu nejasné, ale myslím si, že všetko bude jasnejšie, ako bude príbeh pokračovať.

Značky Form a Input na vytváranie tlačidiel, začiarkavacích políčok a prepínačov

Akýkoľvek formulár musí byť uzavretý v otváracom a zatváracom štítku Formulár. Toto je druh nádoby na ich tvorbu. Táto značka má niekoľko povinných a voliteľných atribútov:

1. Názov – jedinečný názov, ktorý sa má zadať, ak je html súbor tam, kde niečo robíte, sa použije viacero webových formulárov
2. Akcia - povinný atribút označujúci cestu k skriptu, do ktorého sa prenesú údaje z neho na ďalšie spracovanie
3. Metóda - pomocou nej môžete zmeniť spôsob odovzdávania údajov z tohto webového formulára do skriptu súboru handler. Ak ho nešpecifikujete, predvolene sa nastaví získať metódu, ktorý je v skutočnosti určený hlavne pre premenné a krátke správy a okrem toho otvorená cesta odovzdávanie údajov adresný riadok prehliadač. Na odovzdanie údajov formulára do skriptu obslužného programu je stále lepšie použiť metóda POST, navrhnutý špeciálne na prenos textových správ uzavretým spôsobom

Pozrime sa na zvyšok značiek, ktoré vám umožňujú vytvárať rôzne webové formuláre. Najuniverzálnejší je Vstup. V jeho vnútri musí byť napísaný atribút Type, ktorý určuje, aký presne bude HTML formulár vytvorený pomocou tohto tagu.

Pomocou Input and Type môžete vytvoriť nasledujúce prvky:

1. jednoriadkové textové polia (Type="Text")
2. polia hesla (Type="Heslo")
3. začiarkavacie políčka (Type="Zaškrtávacie políčko")
4. prepínače (Type="Rádio")
5. skryté polia (Typ = "Skryté")
6. normálne tlačidlá (Type="Button")
7. tlačidlá na odoslanie údajov obsluhe (Type="Odoslať")
8. tlačidlá, na ktoré sa má webový formulár dostať počiatočný stav(Typ = "Reset")
9. polia pre nahrávanie súborov na server (Type="Súbor)
10. obrázkové tlačidlá (Type="Obrázok")

Vstup nemá uzatváraciu značku. Čo presne bude pomocou neho vytvorený webový formulár závisí úplne od parametra zadaného v atribúte Type. Ak nie je zadaný typ, predvolene sa vytvorí textové pole.

Príklady formulárov vytvorených na vstupe s rôznymi hodnotami pre Typ

Ďalšie atribúty tagu Input a príklady ich použitia

Zvážte, na čo slúžia ostatné atribúty:

1. Názov – ak sa majú dáta odoslať do skriptu programu handler, musíte zadať parameter pre atribút Name. Pod týmto názvom sa údaje odoslané z formulára zobrazia v programe na obsluhu informácií.
2. Veľkosť - pomocou nej sa nastavuje veľkosť poľa vytvoreného webového formulára. Hodnota je určená počtom znakov, ktoré sa zmestia do tohto poľa. Ak nie je zadaná veľkosť, šírka bude predvolená na 24 znakov.
3. Maxlength - v predvolenom nastavení nie je obmedzený počet znakov, ktoré je možné zadať do Html formulára, ale pomocou Maxlength si môžete tento limit nastaviť. Viac znakov, ako bude uvedené, do poľa nezadáte
4. Hodnota - pomocou nej môžete nastaviť, čo presne sa bude štandardne zapisovať do poľa alebo na tlačidlo odoslať údaje
5. Začiarknuté je atribút príznaku, ktorý možno vložiť do položky Vstup pre prepínače (rádio) alebo pre začiarkavacie políčka (zaškrtávacie políčko). V tomto prípade bude tento prepínač alebo začiarkavacie políčko aktívne pri načítaní stránky s webovým formulárom (už budú mať začiarknutie)

Teraz sa pozrime na všetko príklady formulárov so vstupom. Vzhľad textového poľa je podobný vzhľadu poľa pre heslo, takže zvážime iba možnosť vytvorenia Textu, napríklad na zadanie e-mailovej adresy:

Teraz sa pozrime na vytvorenie webového formulára s prepínačmi (Rádio):

Všimnite si, že tento formulár používa značku Input dvakrát, raz na vytvorenie každého z dvoch prepínačov. Každý z nich má navyše atribút Name s rovnakou hodnotou (výsledok) a hodnota Value je odlišná (ÁNO a NIE).

To znamená, že pri jej spracovaní, ak je vybraný niektorý z prepínačov, bude odoslaná premenná, ktorej názov je napísaný v Name, ale hodnota tejto premennej bude závisieť od toho, ktorý prepínač bol vybratý.

Zvážte príklad vytvorenia webového formulára so začiarkavacími políčkami (Začiarkavacie políčko):

Začiarkavacie políčka sa líšia od prepínačov možnosťou výberu viacerých možností naraz. Názov sa používa na určenie v súbore obslužného programu, v ktorom začiarkavacom políčku sú začiarkavacie políčka nastavené, a Hodnota určuje hodnotu, ktorá bude odoslaná obslužnému nástroju (ak hodnota nie je nastavená, text umiestnený vedľa tohto začiarkavacieho políčka bude odoslaný obslužnému nástroju ).

Select, Option, Textarea, Label, Fieldset, Legend – rozbaľovacie zoznamy, textové oblasti a ďalšie prvky webového formulára

Na začiatok vám chcem trochu pripomenúť, čo v skutočnosti webové formuláre sú a prečo sú potrebné na stránkach webu. Sú primárne navrhnuté tak, aby užívateľsky prívetivým spôsobom opakovali prvky dostupné v akomkoľvek operačnom systéme: tlačidlá, polia na zadávanie textu, rozbaľovacie zoznamy, začiarkavacie políčka, prepínače a podobne.

Všetci používatelia bez akéhokoľvek ďalšieho vysvetlenia chápu účel týchto prvkov a ak uvidia tlačidlo formulára Html, chápu, že naň musia kliknúť.

Navyše všetky jeho základné prvky (ako Select, Option, Textarea, Label, Fieldset, Legend) sú už hotové polotovary (kontajnery), na vloženie ktorých bude stačiť použiť požadovaný tag s potrebnými atribútmi a parametrami.

Samotné prehliadače vedia, ako zobraziť konkrétny prvok webového formulára. Pravda, možnosti zobrazenia rovnakého prvku v rôzne prehliadače sa môžu navzájom mierne líšiť, ale spravidla nie výrazne.

To. ukazuje sa, že webové formuláre v Html sú pokusom o prenos kľúča prvky používané v akomkoľvek operačnom systéme, na webové stránky. Ale prečo by mohli byť potrebné na stránkach lokality?

V zásade na rovnaký účel, na ktorý sa používajú podobné prvky v operačné systémy— prenos dát od užívateľa. V prípade formulárov sa údaje od používateľa prenášajú na server, kde sa spracúvajú špeciálny program(Hypertextový značkovací jazyk, žiaľ, neumožňuje spracovanie údajov).

Dáta je však možné posielať nielen na server, ale napríklad aj e-mailom na adresu uvedenú v atribúte Action tagu Form. Pri odosielaní údajov z Html na E-mail sa používateľovi, ktorý vyplní polia, po kliknutí na tlačidlo odoslať údaje spustí poštový programštandardne používa na svojom počítači.

Otváracia značka formulára by potom mala vyzerať asi takto:

Select a Option sú rozbaľovacie značky

Všetky prvky webového formulára, ktoré vytvárajú polia s rozbaľovacími zoznamami, sú vytvorené rovnakým spôsobom. Najprv sa definuje kontajner so zoznamom pomocou otváracích a zatváracích značiek Html Select. A potom sa vo vnútri tohto kontajnera vytvoria samostatné kontajnery s položkami (prvkami) tohto zoznamu. Toto sa vykonáva pomocou otváracích a zatváracích značiek Option.

Ukazuje sa niečo takéto:

Toto je však zjednodušený dizajn, pretože Select a Option majú množstvo atribútov, ktoré definujú vlastnosti a vzhľad pole rozbaľovacieho zoznamu, ktoré sa má vytvoriť.

1. Názov – Musíte zadať jedinečný názov pre tento prvok webového formulára vytvorený pomocou funkcie Vybrať. Tento názov sa odovzdá serveru v programe na obsluhu údajov ako názov premennej. Hodnota atribútu Value (nastavená v Option pre každú položku) položky rozbaľovacieho zoznamu, ktorú používateľ vyberie, bude odovzdaná ako hodnota tejto premennej.
2. Veľkosť - pomocou nej si nastavíte počet zobrazovaných položiek. Inými slovami, pomocou Size môžete nastaviť výšku zoznamu meranú počtom zobrazených riadkov. Ak v značke Vybrať explicitne nešpecifikujete hodnotu Veľkosť, použije sa predvolená výška rozbaľovacieho zoznamu, zatiaľ čo pri absencii alebo prítomnosti atribútu Viacnásobné v ponuke Vybrať bude iná:
   1. Ak je v položke Vybrať viac, potom sa výška rozbaľovacieho zoznamu vo webovom formulári štandardne rovná počtu jeho prvkov. Tie. zobrazia sa všetky položky v rozbaľovacom zozname s viacerými možnosťami výberu. Pozrite si príklad v množnom čísle nižšie. Ak je atribút Veľkosť v časti Vybrať nastavený na menej ako počet položiek, napravo sa zobrazí posúvač.
   2. Ak v poli Vybrať nie je položka Viacnásobné, výška rozbaľovacieho zoznamu vo webovom formulári bude predvolená na jeden riadok. Tie. bude viditeľný iba jeden riadok a zvyšné položky budú dostupné iba stlačením tlačidla výťahu (vpravo). Pozrite si príklad nižšie
3. Viacnásobné – priradenie tohto atribútu v značke Select vám umožní vytvoriť rozbaľovací zoznam s možnosťou výberu viacerých položiek súčasne. Prečítajte si viac o tomto atribúte nižšie.

Formuláre s rozbaľovacími zoznamami možno rozdeliť na dve možnosti. V prvej možnosti je možné vybrať len jeden prvok (riadok) poľa s rozbaľovacím zoznamom, v druhej možnosti podržaním klávesu Ctrl alebo Shift môžete vybrať viacero dostupných položiek súčasne.

V tomto prípade pri druhej možnosti budú na server odoslané údaje o všetkých vybraných bodoch. Ktorý rozbaľovací zoznam sa vytvorí, je určený prítomnosťou alebo absenciou atribútu Multiple v značke Select.

Multiple je špecifikované v Select bez parametra, pretože píše sa jednoducho Multiple a hotovo. Ak je prítomný, vytvorí sa webový formulár s rozbaľovacím zoznamom s možnosťou viacnásobného výberu (podržaním Ctrl alebo Shift).

Variant poľa s rozbaľovacím zoznamom, v ktorom bude možnosť viacnásobného výberu, bude vyzerať asi takto:

Vpravo je príklad webového formulára s viacerými možnosťami výberu na základe vyššie uvedeného kódu. Ako vidíte, podržaním Ctrl alebo Shift môžete vybrať viacero položiek súčasne.

Ak v značke Select nie je žiadny atribút Multiple, potom je možné vybrať iba jeden prvok tohto rozbaľovacieho zoznamu (riadok).

Príklad, kde je možné vybrať iba jednu položku, si môžete pozrieť tu:

Označenie Vyberte vybranú legendu webovej lokality

Atribúty značiek možností

Do vytvoreného rozbaľovacieho zoznamu (pomocou Vybrať a Možnosť) môžete pridať niečo ako oddeľovače s nadpisom skupiny, ktoré sa budú líšiť od ostatných položiek ponuky štýlom písma.

Ak chcete vytvoriť skupinu položiek rozbaľovacieho zoznamu, musíte ich uzavrieť do otváracích a zatváracích značiek formulára Optgroup a do otváracej značky Optgroup zadať atribút Label, ako parameter, ktorý budete musieť zadať požadovaný názov skupiny.

Napríklad takto:

Označenie Vybrať
Vybraná legenda webových stránok

Textarea - vytvorenie textového poľa vo formulári

Existuje ešte jeden prvok webového formulára, o ktorom sme neuvažovali - Textarea (pole s možnosťou zadať viacriadkový text). Je vytvorený pomocou spárovaný Html Značka textovej oblasti. Navyše v ňom môžete prenášať text do Nový riadok a prenesie sa na server, pričom sa zohľadnia uskutočnené prevody.

Ak teda chcete vytvoriť viacriadkové textové pole, musíte napísať otváraciu a zatváraciu oblasť Textarea a medzi ne môžete pridať text, ktorý bude viditeľný po načítaní stránky s webovým formulárom. Používateľ potom môže tento text vymazať a napísať svoj vlastný.

Čo môžete o sebe povedať?

Ako vidíte, kliknutie na text na aktiváciu tohto prvku je zbytočné - musíte naň kliknúť sami. To je presne ten stav, ktorý má štítok Label napraviť. Umožňuje vám urobiť text vedľa prvku webového formulára klikateľný, čo nepochybne je zlepšiť použiteľnosť.

Ale ako viazať HTML prvok tvary a text? Ak to chcete urobiť, musíte do atribútu pridať ID s jedinečným parametrom a text musí byť obklopený otváracími a zatváracími značkami Label. A to nie je všetko. V úvodnom tagu Label je potrebné napísať atribút For, ktorého parameter musí byť presne zhodný s atribútom ID v Html tagu elementu formulára. Ukazuje sa niečo takéto:

Ako vidíte, teraz vďaka použitiu Label možno prvky webového formulára aktivovať nielen kliknutím naň, ale aj kliknutím na text, ktorý sa nachádza vedľa neho.

Fieldset a Legend - rozdelenie formulára na časti

Pravdepodobne ste často videli, že veľké formuláre v Html sú rozdelené do skupín (Fieldset), ktoré sú zakrúžkované v rámci a každá takáto skupina má svoju hlavičku (Legend). Toto je implementované iba pomocou dvoch značiek: Fieldset a Legend. Sú spárované, t.j. musia mať otvárací a zatvárací.

Takže na vytvorenie skupiny základné časti všetky tieto časti musíte uzavrieť do otváracích a zatváracích značiek Fieldset. A aby ste pre túto skupinu mohli nastaviť názov (Legendu), musíte hneď po otvorení Fieldset napísať konštrukciu z úvodnej a záverečnej Legendy, medzi ktoré je potrebné vložiť text nadpisu skupiny.

Tu je príklad vytvárania skupín pomocou Fieldset a Legend:

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude zaujímať

Select, Option, Textarea, Label, Fieldset, Legend - HTML tagy rozbaľovacie formuláre a textové pole
Výpisy v html kód- štítky UL, OL, LI a DL
MailTo - čo to je a ako vytvoriť e-mailový odkaz v Html
Ako sa nastavujú farby v kóde Html a CSS, výber odtieňov RGB v tabuľkách, výsledky Yandex a ďalšie programy
Čo je HTML Hypertext Markup Language a ako vypísať zoznam všetkých značiek vo validátore W3C
Ako vložiť HTML odkaz a obrázok (foto) - IMG a A tagy
Tabuľky v Html – značky Table, Tr a Td, ako aj Colspan, Cellpadding, Cellspacing a Rowspan na ich vytvorenie
Značky Font (Face, Size and Color), Blockquote a Pre sú staré formátovanie textu v čistom HTML (bez Použitie CSS)
Ako vytvoriť hypertextový odkaz (A, Href, Target blank), ako ho otvoriť v novom okne na stránke a tiež urobiť z obrázku odkaz v Html kóde

Vďaka štítku bolo možné vytvoriť rozbaľovací zoznam a zoznam s viacnásobným výberom. Ak sa chystáte odoslať dáta na server, potom tag musí byť umiestnený vo formulári (tag

Aké sú atribúty značky select?

Tag má tri užitočné atribúty (ostatné nebudeme zvažovať, už som o nich hovoril). Prvým atribútom je multiple , vďaka ktorému môžete vybrať viacero položiek zoznamu. Ak chcete vybrať viacero prvkov, musíte podržať kláves shift alebo ctr a kliknúť myšou na požadované prvky. Nasleduje príklad použitia atribútu multiple:

Aké mená sa vám páčia?
žiadne
Ivan
Peter
Mikuláša

Druhý atribút je povinný , pomocou ktorého môžete prehliadaču „povedať“, že zoznam je potrebné vybrať pred odoslaním formulára, inak prehliadač odoslanie formulára zakáže a zobrazí vám príslušnú správu. Vzhľad tejto správy úplne závisí od prehliadača a používateľ ho nemôže zmeniť. Nasleduje príklad použitia povinného atribútu:

Tretím atribútom je veľkosť , pomocou ktorého je možné určiť počet položiek zoznamu, ktoré sa majú zobraziť. Atribút size môže obsahovať iba celé číslo. Atribút size transformuje zoznam, napríklad ak sa rovná 1, potom značku sa zobrazí ako „rozbaľovací zoznam“ a ak je atribút veľkosti väčší ako 1, rozbaľovací zoznam sa zobrazí ako „rolovací zoznam“. Tu sú dva príklady použitia atribútu size:

Áno alebo nie?
Áno
nie

V procese vytvárania stránky alebo blogu a ich ďalšieho napĺňania obsahom sa z rôznych dôvodov niekedy stáva, že je potrebné skryť niektorú časť textu, umiestniť objemnejšie informácie do bloku, ktorý je zatiaľ skrytý, no napriek tomu naznačiť používateľovi, čo je k dispozícii, ešte jednu vec a dať mu možnosť zobraziť skrytý obsah bez toho, aby sa presunul na ďalší riadok alebo stránku.
Predtým sa na implementáciu takéhoto riešenia používala kopa javascriptu, ale teraz sa to všetko dá urobiť veľmi jednoducho pomocou úžasných vlastností.

Dnes sa pozrieme na najjednoduchší spôsob vytváranie skrytých blokov s obsahom na stránkach webu a v jednotlivých správach, ktoré sa otvoria po kliknutí na určitý prvok textu, len pomocou vlastností CSS3. Ako prepínač môže slúžiť jedno slovo, vybraná fráza, celá veta alebo informatívna ikona.
Takéto bloky sa často používajú na stránkach s veľkým množstvom obsahu, aby boli štruktúrovanejšie a kompaktnejšie, pričom všetok obsah je rozdelený do takzvaných skupín, v ktorých sú používateľovi prezentované iba nadpisy, všetok text je skrytý predvolená a zobrazí sa kliknutím na konkrétny prvok (pozri vyššie).

Pokúsme sa zaobísť bez prebytočnej vody, pozrite sa na tento jednoduchý mechanizmus v akcii dobrý príklad, môžete tiež niečo upraviť, ak chcete:

Príklad č. 1

V úlohe prepínačov rozbaľovacích blokov s Ďalšie informácie nie je použitý žiadny zvýraznený alebo označený text, s jednoznačnou ponukou kliknúť naň, čo musíte bez obáv a pochybností vidieť)))

Ako vidíte, všetko funguje viac než dobre, skrytý obsah sa bez problémov objaví aj zmizne po miernom kliknutí myšou a zároveň sme použili minimum spustiteľného kódu ako v html rámci, tak aj v tvorba css štýlov. Bez pripojenia dodatočný javascript knižnice, s večnou úzkosťou a či sú na strane používateľa zakázané.
Implementovať všetky tieto akcie bolo možné vďaka pseudotriede CSS3 :skontrolované aplikované na prvky rozhrania, ako sú prepínače (). Čo sme vlastne urobili, v tagu atribútu type sme priradili hodnotu checkboxu, ako aj identifikátor id="hd-1" zodpovedajúci jedinečnému identifikátoru for="hd-1" prepínač aktuálneho bloku. Skryjme zaškrtávacie políčka dôkladne a navždy nastavením zobrazenia: žiadna vlastnosť v triede .hide;
V skutočnosti tu nie je nič zvláštne na vysvetlenie, celý mechanizmus zapínania a vypínania skrytých blokov pozostáva z troch prvkov:

• Checkbox – tag so zmyslom začiarkavacie políčko atribút typu a so špecifickým identifikátorom väzby
• Názov (prepínač textu) - značka s hodnotou jedinečného identifikátora atribútu pre, (identifikátor musí byť rovnaký ako identifikátor značky vstup so zmyslom začiarkavacie políčko atribút typu).
• Blok obsahu je značka div, ktorá bude obsahovať rôzny skrytý obsah (text, obrázky atď. atď.) až do lepších časov, kým používateľ neklikne.

Dúfam, že z môjho chaotického vysvetlenia predsa len vysvitlo, v čom spočíva celý trik. CSS používa nové štýly (pomocou pseudotriedy skontrolované), aby sa zobrazil blok obsahu, ktorý bol predtým skrytý, iba keď používateľ klikne na prvok, ktorý je priradený k začiarkavaciemu políčku pomocou jedinečného ID.

Z toho všetkého vyplýva dôležitá poznámka:

keď použijete viacero skrytých blokov na tej istej stránke, každý prepínač musí mať jedinečné ID, ktoré sa bude líšiť od ID v iných blokoch.

Takže, slovami, vyriešili sme, čo kam a prečo, teraz sa pozrime na html rámec celej štruktúry:

Kliknutím sem otvoríte!

Ďalej pokračujeme priamo k formácii css štýly, bez ktorých celá konštrukcia nebude fungovať. Úplne minimum kódu, bez akéhokoľvek štýlu, len zvýraznilo pozadie rozbaľovacieho poľa, aby ste mohli definovať a zobraziť skryté textové rámčeky. Bloky môžete ozdobiť, ako chcete, zavesiť okraje, zaobliť rohy, zvýrazňovať text alebo .

1. CSS

/* skryť začiarkavacie políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* text label view */ .hide + label, .hide:checked + label ( padding: 0; color: green ; kurzor: ukazovateľ; border-bottom: 1px bodkovaný zelený; ) /* zobrazenie textu štítka, keď je prepínač aktívny */ .hide:checked + label ( color: red; border-bottom: 0; ) /* zobrazenie políčok pri začiarknutí políčka je aktívny s obsahom */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; )

To všetko je pre asketický príklad úplne postačujúce minimum. Ale veď to už vôbec nebudeme my, ak nezavesíme aspoň nejaké vychytávky a pre používateľa je lepšie vizuálne navrhnúť, kam kliknúť.
V druhom príklade som pridal jednoduchý symbol vo forme plus, ktorý jasne naznačuje, že sa tu skrýva niečo iné, po stlačení sa to okamžite zmení na mínus a pri skrytých blokoch s obsahom som priskrutkoval malú animáciu, keď objavujú, a to všetko výhradne s pomocou mágie CSS3.

2. CSS

/* skryť začiarkavacie políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* text label view */ .hide + label ( margin: 0; padding: 0; color: green; kurzor : ukazovateľ; display: inline-block; ) /* zobrazenie textu štítka, keď je prepínač aktívny */ .hide:checked + label ( color: red; border-bottom: 0; ) /* keď je začiarkavacie políčko aktívne, zobraziť bloky s obsahom */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* malá animácia, keď sa objaví */ -webkit-animation:fade easy-in 0,5s; -moz-animation:fade easy-in 0,5 s; animácia: slabnutie za 0,5 s; ) /* animácia, keď sa objavia skryté bloky */ @-moz-keyframes miznú ( od ( nepriehľadnosť: 0; ) do ( nepriehľadnosť: 1 ) ) @-webkit-keyframes miznú ( od ( nepriehľadnosť: 0 ; ) do ( nepriehľadnosť: 1 ) ) @kľúčové snímky miznú ( od ( nepriehľadnosť: 0; ) do ( nepriehľadnosť: 1 ) ) .hide + label:before (color-color: #1e90ff; farba: #fff; obsah: "\002B"; displej:blok; plavák: vľavo; veľkosť písma: 14px; font-weight: bold; výška: 16px; line-height: 16px; okraj: 3px 5px; text-align: center; šírka: 16px; -polomer-hraničnej-webovej sady: 50 %; -moz-border-radius: 50%; polomer okraja: 50 % ) .hide:checked + label:before (obsah: "\2212"; )

Podľa všetkého je metóda nepochybne dobrá, ale ako vždy, nie je to vôbec prekvapujúce, vznikajú problémy s večnou brzdou pokroku, prehliadačom IE, pseudotriedou skontrolované podporuje iba 9. a novšie verzie tohto prehliadača. Pre staršie verzie IE je to rovnaké ako predtým, musíte použiť javascript.

Pomocou skrytých začiarkavacích políčok môžete jednoducho implementovať , bloky štýlov, posúvače, galérie a ďalšie.

So všetkou úctou, Andrew

Atribúty formulára:

• Atribút akcie určuje serverový súbor so skriptom zodpovedným za hlavné spracovanie údajov odoslaných z formulára. Typicky je kód pre tento súbor napísaný v programovacom jazyku na strane servera, ako napr php alebo perl.
• Atribút enctype označuje typ informácií odoslaných na server, ak sú to len textové údaje - text/plain , ak sa súbory odosielajú s formulárom, potom by sa mali zadať viacdielne/form-data.
• Atribút method špecifikuje a definuje formu prenosu dát. Nebudeme sa tým podrobne zaoberať, ale treba povedať, že pre spoľahlivejší prevod by sa mala špecifikovať metóda zaúčtovania.

html prvky formulára

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" > !}

výsledok:

• Hodnota atribútu type – text – označuje, že ide o textové pole
• veľkosť - veľkosť textového poľa v znakoch
• maxlength - maximálny počet znakov, ktoré sa zmestia do poľa
• hodnota - počiatočný text v textovom poli
• názov - názov prvku, potrebný na spracovanie údajov v súbore handler

výsledok:


Namiesto textu sa v poli zobrazuje maska ​​– hviezdičky alebo krúžky

<input type="submit" value= "Odoslať údaje">

výsledok:

Tlačidlo odoslať zhromažďuje všetky údaje formulára zadané používateľom a odosiela ich na adresu uvedenú v atribúte akcie formulára.

<input type = "reset" value = "(!LANG:Clear form" > !}

výsledok:

Tlačidlo vráti stav všetkých ovládacích prvkov do pôvodného stavu (vymaže formulár)

<input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <input type = "checkbox" name = "js" value = "(!LANG:yes" checked = "checked" > !} javascript<br > <input type = "checkbox" name = "php" value = "(!LANG:yes" > !} PHP<br > <input type = "checkbox" name = "html" value = "(!LANG:yes" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML



výsledok:

A.S.P.
javascript
PHP
HTML

V html sa zaškrtávacie políčko používa na usporiadanie viacnásobného výberu, t.j. keď je potrebné a možné vybrať viacero odpovedí

<typ vstupu = "rádio" názov = "kniha" hodnota = "(!LANG:asp" > !} A.S.P.<br > <typ vstupu = "rádio" názov = "kniha" hodnota = "(!LANG:js" > !} javascript<br > <typ vstupu = "rádio" názov = "kniha" hodnota = "(!LANG:php" > !} PHP<br > <typ vstupu = "rádio" názov = "kniha" hodnota = "(!LANG:html" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML




výsledok:

A.S.P.
javascript
PHP
HTML

prepínač html slúži na jeden výber z viacerých možností

Atribút začiarknuté okamžite nastaví prvok na skontrolovaný

Dôležité: Pre prvky rádio je potrebné, aby hodnota atribútu názov všetky prvky v skupine mali rovnaké: v tomto prípade budú prvky fungovať vzájomne prepojené, keď je jeden prvok zapnutý, ostatné sa vypnú

Rozbaľovací zoznam HTML

Zvážte príklad pridania rozbaľovacieho zoznamu:

A.S.P. JavaScript PHP HTML

výsledok:

• Rozbaľovací zoznam pozostáva z hlavnej značky - select - ktorá má uzatvárací pár a každá položka zoznamu je značka voľby, v ktorej sa zobrazuje text položky.
• veľkosť atribútu s hodnotou "jeden" označuje, že zoznam v zbalenej forme zobrazuje jednu položku, zvyšok sa otvorí po kliknutí na šípku ponuky
• Vybraný atribút položky (možnosť) označuje, že táto konkrétna položka bude na začiatku viditeľná a ostatné položky sú „zbalené“

Pre veľké a zložité zoznamy existuje možnosť pridať titulky- optgroup tag s atribútom label (nápis):

A.S.P. JavaScript PHP HTML ASP v ruštine JavaScript v ruštine

Poskytnúť príležitosť vybrať viacero položiek naraz musíte pridať atribút multiple. Ale v tomto prípade by mal byť atribút size tiež nastavený na hodnotu väčšiu ako 1:

Text

výsledok:

• Šírka prvku závisí od atribútu cols, ktorý určuje, koľko znakov sa hodí horizontálne.
• Atribút rows určuje počet riadkov v prvku.

Ďalšie prvky

Ďalšie prvky a atribúty

• Na ovládanie rádio a začiarkavacie políčko je vhodné použiť ďalšie prvky, ktoré po prvé ukotvia text k samotnému prvku rádia alebo začiarkavacieho políčka a po kliknutí pridajú ťah:

<input type="checkbox" id="book1"> <label for="book1"> A.S.P.</label>

A.S.P.

V tomto príklade je pre prvok checkbox vytvorený štítok (štítok). Väzba sa vykonáva prostredníctvom atribútu id, ktorého hodnota je uvedená v atribúte labels for.

výsledok:



• Atribút zakázaný vám umožňuje zakázať prvok, takže ho používateľ nebude môcť upravovať:

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" disabled = "disabled" >!} <input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <input type = "checkbox" name = "js" value = "(!LANG:yes" checked = "checked" disabled = "disabled" > !} javascript<br >


A.S.P.
javascript