V procese vytvárania webovej 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ľ, čo je k dispozícii niečo iné, 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žívalo veľa javascriptov, ale teraz sa to všetko dá urobiť veľmi jednoducho pomocou úžasných vlastností.

Dnes sa pozrieme na najjednoduchší spôsob vytvárania skrytých blokov obsahu na stránkach lokality a v jednotlivých správach, ktoré sa otvoria po kliknutí na určitý textový prvok, a to výhradne pomocou vlastností CSS3. Prepínač môže byť jedno slovo, zvýraznená 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, všetok obsah je rozdelený do takzvaných skupín, v ktorých sú používateľovi prezentované iba nadpisy, všetok text je štandardne skrytý a zobrazí sa kliknutím na konkrétny prvok (pozri vyššie).

Skúsme sa zaobísť bez zbytočnej vody, pozrime sa na celý tento jednoduchý mechanizmus v akcii s jasným príkladom a ak chcete, môžete niečo upraviť:

Príklad č.1

Nevybraný a neoznačený text sa používa ako prepínače pre rozbaľovacie bloky s dodatočnými informáciami, s jednoznačnou výzvou na kliknutie, čo musíte urobiť bez obáv a pochybností, aby ste videli)))

Ako vidíte, všetko funguje viac než perfektne, skrytý obsah sa bez problémov objaví a ľahkým kliknutím myši zmizne a zároveň sme použili úplne minimum spustiteľného kódu ako v html frameworku, tak aj pri tvorbe štýlov css. Bez pripojenia ďalších knižníc javascriptu s večnými obavami, či sú na strane používateľa zakázané.
Implementácia celej tejto akcie bola 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 začiarkavacie políčko value , ako aj identifikátor id="hd-1" zodpovedajúci jedinečnému identifikátoru for="hd-1" prúdový blokový spínač. Zaškrtávacie políčka dôkladne a navždy skryjeme nastavením vlastnosti display: none v triede.hide.
V skutočnosti tu nie je nič zvláštne na vysvetľovanie; 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 prepojenia
• Nadpis (prepínač textu) - tag s jedinečnou hodnotou 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 až do lepších časov, kým používateľ neklikne, obsahovať rôzny skrytý obsah (text, obrázky atď. atď.)

Dúfam, že z môjho chaotického vysvetlenia vysvitlo, o čo vlastne ide. 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 jedinečným identifikátorom.

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

Keď na tej istej stránke použijete viacero skrytých blokov, 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 ide a prečo, teraz sa pozrime na html rámec celej štruktúry:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Kliknutím sem otvoríte! < div>Skrytý obsah...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Kliknite sem a prečítajte si viac! < div>Skrytý obsah...

Kliknutím sem otvoríte!

Kliknite sem a prečítajte si viac!

Ďalej prejdeme priamo k formovaniu CSS štýlov, bez ktorých celý tento dizajn nebude fungovať. Úplne minimum kódu, bez akéhokoľvek zdobenia, len mierne zvýraznilo pozadie pre rozbaľovací blok, ktorý vám definoval a ukázal rámec skrytého textu. Bloky môžete navrhnúť podľa vlastného uváženia, pridať okraje, zaoblenie rohov, zvýraznenie textu alebo .

1.CSS

. skryť,. skryť + označenie ~ div ( zobrazenie: žiadne; ) /* typ textu štítku */. skryť + štítok, . skryť: začiarknuté + štítok ( výplň: 0 ; farba: zelená; kurzor: ukazovateľ; okraj- dole: 1px bodkovaná zelená; ) . skryť: začiarknuté + štítok + 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; )

/* skryť začiarkavacie políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* vzhľad textu menovky */ .hide + label, .hide:checked + label ( padding: 0; farba: zelená ; kurzor: ukazovateľ; border-bottom: 1px bodkovaný zelený; ) /* vzhľad textu štítku, keď je prepínač aktívny */ .hide: začiarknuté + štítok ( farba: červená; border-bottom: 0; ) /* keď je checkbox je aktívny, 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; padding: 10px; )

To všetko je pre asketický príklad úplne postačujúce minimum. Vôbec to ale nebudeme my, ak nepridáme aspoň nejaké vychytávky a je lepšie používateľovi vizuálne povedať, kam má 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 okamžite zmení na mínus a do skrytých blokov som pridal malú animáciu s obsahom, keď objavujú, a to všetko výhradne s pomocou kúzla CSS3.

2.CSS

/* skryť začiarkavacie políčka a bloky obsahu */. skryť,. skryť + označenie ~ div (zobraziť: žiadne; ) /* typ textu štítku */. skryť + štítok ( okraj: 0 ; výplň: 0 ; farba: zelená; kurzor: ukazovateľ; zobrazenie: vložený blok; ) /* vzhľad textu štítku, keď je prepínač aktívny */. skryť: začiarknuté + štítok ( farba: červená; okraj- dole: 0; ) /* keď je začiarkavacie políčko aktívne, zobraziť bloky s obsahom */. skryť: začiarknuté + štítok + 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;ľavý okraj: 20px;výplň: 10px; /* malá animácia pri zobrazení */- webkit- animácia: fade easy- in 0. 5s; - moz- animácia: slabnutie slabnutia- za 0. 5s; animácia: zmiernenie miznutia- za 0. 5s; ) /* animácia, keď sa objavia skryté bloky */@- moz- kľúčové snímky miznú ( z ( nepriehľadnosť: 0 ; ) do ( nepriehľadnosť: 1 ) ) @- webkit- kľúčové snímky miznú ( od ( nepriehľadnosť: 0 ; ) do ( nepriehľadnosť: 1 ) ) @ kľúčové snímky miznú ( od ( nepriehľadnosť: 0 ; ) až ( nepriehľadnosť: 1 ) ). skryť + štítok: pred ( farba pozadia: #1e90ff; farba: #fff; obsah: " \002 B"; 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; - webkit- border- polomer: 50 %; - moz- border- polomer: 50 %; hraničný polomer: 50 %; ). skryť: začiarknuté + štítok: pred ( obsah: " \221 2" ; }

/* skryť začiarkavacie políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* vzhľad textu menovky */ .hide + label ( margin: 0; padding: 0; color: green; kurzor : pointer; display: inline-block; ) /* vzhľad textu štítku, keď je prepínač aktívny */ .hide:checked + label ( color: red; border-bottom: 0; ) /* keď je checkbox aktívny, 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 pri zobrazení */ -webkit-animation:fade easy-in 0,5s; -moz-animation:fade easy -za 0,5s; animácia: postupné miznutie-za 0,5s; ) /* animácia, keď sa objavia skryté bloky */ @-moz-keyframes mizne (od ( opacity: 0; ) to ( opacity: 1) ) @-webkit-keyframes fade ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) @keyframes fade ( from ( opacity: 0; ) to ( opacity: 1 ) ) .hide + label:before ( background-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%; hraničný polomer: 50 %; ) .hide:checked + label:before (obsah: "\2212"; )

Podľa všetkého je metóda nepochybne dobrá, ale ako vždy, a nie je to prekvapujúce, vznikajú problémy s večnou brzdou pokroku, prehliadačom IE, pseudotriedou skontrolované Podporované sú iba 9. a novšie verzie tohto prehliadača. Pre staršie verzie IE ostáva všetko po starom, budete musieť použiť javascript.

Pomocou skrytých začiarkavacích políčok môžete jednoducho implementovať štylizované bloky, posúvače, galérie a oveľa viac.

So všetkou úctou, Andrew

Popis

HTML tag slúži na vytvorenie rozbaľovacieho (rozbaľovacieho) zoznamu, ktorý sa zobrazí po kliknutí na prvok formulára a umožní návštevníkovi stránky vybrať si jednu z preddefinovaných možností.

Element

môže obsahovať dve alebo viac značiek definujúc dostupné výbery v rozbaľovacom zozname. Text prvého podradeného prvku sa na začiatku zobrazí v rozbaľovacom zozname, to znamená, že to bude predvolená hodnota pre zoznam. Zmeňte alebo nastavte predvolenú hodnotu pre Vybraný atribút môžete pridať k požadovanej možnosti:

Volvo Saab VW Audi

Šírka rozbaľovacej ponuky bude určená najdlhším textom uvedeným v značke .

Atribúty

autofocus: Určuje, že prvok by mal byť automaticky zaostrený pri načítaní webovej stránky. Možné hodnoty pre booleovský atribút automatického zaostrovania: Príklad »

Poznámka: Atribút autofocus nie je podporovaný v IE9 a starších verziách a vo Firefoxe.

Vypnuté: Označuje, že prvok je neaktívny, čo znamená, že používateľ nebude môcť s prvkom interagovať. Možné hodnoty pre zakázaný booleovský atribút:

Príklad » formulár: Definuje formulár, ku ktorému je prvok priradený. Hodnota atribútu je identifikátor prvku

. Tento atribút vám umožňuje umiestniť prvok na ľubovoľnom mieste v dokumente, nielen ako potomok prvku .

Poznámka: Atribút formulára nie je podporovaný vo Firefoxe.

Viacnásobné: Označuje, že je možné vybrať viacero možností naraz. Niekoľko možností sa líši v závislosti od operačného systému:

• Windows: Ak chcete vybrať viacero možností, podržte stlačený kláves CTRL.
• Mac: Ak chcete vybrať viacero možností, podržte stlačený kláves CMD.

Možné hodnoty pre viacnásobný logický atribút: Príklad »

Poznámka: Vzhľadom na rôzne spôsoby výberu viacerých položiek a dodatočné upozornenie pre používateľov, že je k dispozícii viacero možností výberu, sa odporúča použiť začiarkavacie políčka namiesto rozbaľovacieho zoznamu.

Názov: Definuje názov rozbaľovacieho zoznamu. Dá sa použiť na prístup k údajom formulára po ich odoslaní alebo na odkazovanie na prvok v JavaScripte. veľkosť: Určuje počet viditeľných možností v rozbaľovacom zozname. Ak je hodnota atribútu size väčšia ako 1, ale menšia ako celkový počet možností v zozname, prehliadač automaticky pridá posuvník, ktorý označuje, že existuje viac možností na zobrazenie.

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 prieskumy a hlasovanie, umožňujú vám posielať správy, nakupovať atď. HTML Formulár je vytvorený na jeden účel: zhromažďovanie a následný prenos informácií na spracovanie pomocou softvérového skriptu alebo prostredníctvom e-mailu.

Príklad HTML formulára | Zadajte lokalitu

Značky, atribúty a hodnoty

- určiť tvar.
• name="" - definuje názov formulára.
• method="" - definuje spôsob odosielania údajov z formulára. Hodnoty: "get" (predvolené) a "post" . Často sa používa metóda „post“, pretože umožňuje prenášať veľké množstvo dát.
• action="" - definuje adresu URL, na ktorú sa odosielajú údaje 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 vo forme hviezdičiek alebo krúžkov.
• type="checkbox" - definuje prepínač.
• type="hidden" - definuje skrytý prvok formulára - používa sa na prenos dodatočných informácií na server.
• size="25" - dĺžka textového poľa v znakoch.
• maxlength="30" - maximálny povolený počet zadaných znakov.
• value="" - definuje hodnotu, ktorá sa odošle na spracovanie, ak sa týka prepínačov alebo prepínačov. Hodnota tohto atribútu ako súčasti textového poľa alebo tlačidla sa v príklade vyššie zobrazí ako napríklad Vasya alebo Login.

Príklad HTML formulára | Komentáre na stránke

názov Mail

Značky, atribúty a hodnoty

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

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

Príklad HTML formulára | Rozbaľovací zoznam

Prvá pozícia Druhá pozícia Tretia pozícia Štvrtá pozícia

Značky, atribúty a hodnoty

• - definujte zoznam s pozíciami na výber.
• 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.
• - určiť pozície (položky) zoznamu.
• value="" - obsahuje hodnotu, ktorá bude odoslaná formulárom na zadanú url na spracovanie.
• selected="selected" - zvýrazní položku zoznamu ako príklad.

Príklad HTML formulára | Zoznam s posúvačom

Zvýšením hodnoty atribútu size="" dostaneme zoznam s posuvnou lištou:

Prvá pozícia Druhá pozícia Tretia pozícia Štvrtá pozícia

Prvá pozícia Druhá pozícia Tretia pozícia Štvrtá pozícia

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

type="submit" - definuje tlačidlo.

type="reset" - definuje tlačidlo reset.

value="" - definuje označenie tlačidla.

Pozri dodatočne:

Popis

Tag umožňuje vytvoriť prvok rozhrania vo forme rozbaľovacieho zoznamu, ako aj zoznamu s jednoduchým alebo viacnásobným výberom, ako je uvedené nižšie. Konečný vzhľad závisí od použitia atribútu size tagu ktorý nastavuje výšku zoznamu. Šírka zoznamu je určená najširším textom uvedeným v značke a možno ich zmeniť aj pomocou štýlov. Každá položka je vytvorená pomocou značky , ktorý by mal byť vnorený do kontajnera . Ak plánujete odoslať údaje zoznamu na server, musíte prvok umiestniť vnútri formulára. Je to potrebné aj vtedy, keď sa k údajom zoznamu pristupuje prostredníctvom skriptov.

Syntax

odsek 1 Bod 2

Atribúty

Umožňuje preskočiť na zoznam pomocou niektorej klávesovej skratky. Nastaví zoznam tak, aby sa zaostril po načítaní stránky. Blokuje prístup a úpravu prvku. Priradí zoznam k formuláru. Umožňuje vybrať viacero položiek zoznamu naraz. Názov prvku, ktorý sa má odoslať na server alebo ku ktorému sa má pristupovať prostredníctvom skriptov. Zoznam je potrebné vybrať pred odoslaním formulára. Počet riadkov zoznamu, ktoré sa majú zobraziť. Definuje postupnosť prechodu medzi prvkami pri stlačení klávesu Tab

Záverečná značka

Požadovaný.

HTML5 IE Cr Op Sa Fx

Vyberte si hrdinu Cheburashka Krokodíl Gena Shapoklyak Krysa Larisa

Značka voľby HTML sa používa na vytvorenie rozbaľovacieho zoznamu, ktorý umožňuje používateľovi vybrať jednu možnosť z preddefinovanej množiny hodnôt.

Text viditeľný pre používateľa sa môže líšiť od textu uvedeného v atribúte value. Tu je postup, ako vytvoriť rozbaľovací zoznam:

zelená žltá čierna

• Rozbaľovací zoznam sa vytvorí pomocou značky ;
  Vo vnútri štítku
  možnosti výberu sú definované pomocou značky ;
• V značke môžete použiť atribút value na prístup k vybranej možnosti pomocou PHP, JS, Jquery atď.

Je tiež možné zadať triedu CSS namiesto použitia ID na úpravu rozbaľovacieho zoznamu.

V ďalšej časti ukážem príklady použitia rozbaľovacieho zoznamu HTML v JavaScript/JQuery. Príklady tiež ukážu, ako nastaviť štýly pomocou CSS/CSS3 a Bootstrap framework.

Príklad vytvorenia jednoduchého rozbaľovacieho zoznamu

Tento príklad používa možnosť výberu HTML na vytvorenie rozbaľovacieho zoznamu s tromi možnosťami na výber:

Vo vyššie uvedenom príklade sa na vytvorenie rozbaľovacieho zoznamu používa nasledujúce označenie:

5 10 15 20 25

Použitie atribútu value

Ako už bolo spomenuté, hodnota atribútu value sa môže líšiť od textu zobrazeného na stránke. Používateľom môžete napríklad zobraziť názvy krajín alebo farby a použiť krátke kódy v atribúte value.

V nasledujúcom príklade vytvoríme rozbaľovací zoznam s atribútom value:

Pozrite si online demo a kód

Pre značku Používa sa nasledujúci kód:

Maroon zelená žltá Modrá Červená

Príklad prístupu k vybranej možnosti v JavaScripte

Teraz vytvorte príklad prístupu k hodnote vybranej možnosti a vykonania niektorých akcií. Vytvárame rovnaký zoznam ako v príklade vyššie s farebnými možnosťami. Po výbere kliknutím na tlačidlo aplikujte túto farbu na dokument:

Pozrite si online demo a kód

Pre hodnotu HTML voľby sa používa nasledujúci kód:

Maroon zelená žltá Modrá Červená Iné

Nasledujúci riadok kódu sa používa v JavaScripte na prístup k hodnote atribútu hodnoty možnosti :

var seltheme = document.getElementById(“selcolor”).value;

Po kliknutí na tlačidlo sa zavolá funkcia JS, ktorá premennej priradí hodnotu vybranú v rozbaľovacom zozname. Táto hodnota sa používa na aplikovanie farby na aktuálny dokument.

Prístup k viditeľnému textu v JQuery

Tentokrát použijem JQuery na prístup k hodnote vybranej možnosti: text aj hodnota . V tejto ukážke budem pristupovať k viditeľnému textu v značke voľby v HTML:

Pozrite si online demo a kód

V kóde pre každú možnosť v značke

význam je odlišný od textu. Po výbere farby jQuery zobrazí viditeľný text vo výstrahe. Kód značky Ďalšie:

Maroon zelená žltá Modrá Červená

Tu je návod, ako získať prístup k tejto hodnote HTML vybrať možnosť vybratý JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

K hodnote môžete pristupovať aj pomocou metódy JQuery $.val():

var selectedcolor = $("#jqueryselect").val();

Nahraďte tento riadok vo vyššie uvedenom príklade a kód zobrazí hodnotu krátkeho kódu/farby v atribúte value namiesto viditeľného textu.

Príklad získania hodnoty v skripte PHP

V tomto príklade získania hodnoty možnosti vybratej z rozbaľovacieho zoznamu sa formulár vytvorí pomocou značky v sekcii označovania. Po výbere farby z rozbaľovacieho zoznamu kliknite na tlačidlo „Odoslať“. Údaje formulára sa prenesú do rovnakého súboru PHP, po ktorom sa zobrazí vybratá farba:

Pozrite si online demo a kód

Metóda formulára použitá v príklade je POST, takže hodnoty formulára môžete získať pomocou poľa PHP $_POST[“”]. Toto je kód formulára použitý v príklade:

Vyberte farbu:

Maroon zelená žltá Modrá Červená