V procesu vytváření webové stránky nebo blogu a jejich dalším naplňování obsahem se z různých důvodů někdy stane nutnost skrýt část textu, umístit objemnější informace do bloku prozatím skrytého, ale přesto naznačit uživatel, co je k dispozici něco jiného, ​​a dát mu možnost zobrazit skrytý obsah bez přechodu na další řádek nebo stránku.
Dříve se k implementaci takového řešení používala spousta javascriptů, ale nyní to vše lze provést velmi snadno pomocí úžasných vlastností.

Dnes se podíváme na nejjednodušší způsob, jak vytvořit skryté bloky obsahu na stránkách webu a v jednotlivých zprávách, které se otevřou po kliknutí na určitý textový prvek, a to výhradně pomocí vlastností CSS3. Přepínač může být jedno slovo, zvýrazněná fráze, celá věta nebo informativní ikona.
Takové bloky se často používají na stránkách s velkým množstvím obsahu, aby byly strukturovanější a kompaktnější, veškerý obsah je rozdělen do tzv. skupin, ve kterých jsou uživateli prezentovány pouze nadpisy, veškerý text je ve výchozím nastavení skrytý a lze je zobrazit kliknutím na konkrétní prvek (viz výše).

Zkusme se obejít bez zbytečné vody, podívejme se na celý tento jednoduchý mechanismus v akci, s jasným příkladem, a pokud si přejete, můžete také něco upravit:

Příklad č. 1

Nevybraný a neoznačený text se používá jako přepínače pro rozevírací bloky s dalšími informacemi s jednoznačnou výzvou ke kliknutí na něj, což musíte bez obav a pochybností vidět)))

Jak vidíte, vše funguje více než perfektně, skrytý obsah se bez problémů objeví a lehkým kliknutím myši zmizí a přitom jsme použili naprosté minimum spustitelného kódu, jak v html frameworku, tak ve formaci stylů css. Bez připojování dalších javascriptových knihoven, s věčnou starostí, zda nejsou na straně uživatele deaktivovány.
Implementace všech těchto akcí byla možná díky pseudotřídě CSS3 :kontrolovány, aplikované na prvky rozhraní, jako jsou přepínače (). Co jsme vlastně udělali v tagu Atributu typu jsme přiřadili zaškrtávací políčko value a také identifikátor id="hd-1" odpovídající jedinečnému identifikátoru for="hd-1" proudový blokový spínač. Zaškrtávací políčka důkladně a navždy skryjeme nastavením vlastnosti display: none ve třídě.hide.
Ve skutečnosti zde není nic zvláštního k vysvětlování; celý mechanismus pro zapínání a vypínání skrytých bloků se skládá ze tří prvků:

• Zaškrtávací políčko – značka s významem zaškrtávací políčko atribut typ a se specifickým identifikátorem propojení
• Titulek (přepínač textu) - tag s jedinečnou hodnotou identifikátoru atributu pro, (identifikátor musí být stejný jako identifikátor značky vstup s významem zaškrtávací políčko atribut typ).
• Blok obsahu je tag div, který bude do lepších časů, dokud uživatel neklikne, obsahovat různý skrytý obsah (text, obrázky atd., atd.)

Doufám, že z mého chaotického vysvětlování vyplynulo, o co vlastně jde. CSS používá nové styly (pomocí pseudotřídy kontrolovány), aby se zobrazil blok obsahu, který byl dříve skrytý, pouze když uživatel klikne na prvek, který je přidružen k zaškrtávacímu políčku pomocí jedinečného identifikátoru.

Z toho všeho vyplývá důležitá poznámka:

Když použijete více skrytých bloků na stejné stránce, každý přepínač musí mít jedinečné ID, které se bude lišit od ID v jiných blocích.

Takže, slovy, vyřešili jsme, co kam a proč jde, nyní se podívejme na html rámec celé struktury:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Kliknutím sem otevřete! < div>Skrytý obsah...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Klikněte sem a přečtěte si více! < div>Skrytý obsah...

Kliknutím sem otevřete!

Klikněte sem a přečtěte si více!

Dále se přesuneme přímo k tvorbě CSS stylů, bez kterých se celý tento design neobejde. Úplně minimum kódu, bez jakékoli dekorace, jen mírně zvýraznilo pozadí pro rozevírací blok, který vám definoval a ukázal rámec skrytého textu. Bloky můžete libovolně navrhovat, přidávat okraje, zaoblovat rohy, zvýraznit text nebo .

1.CSS

. skrýt, . skrýt + popisek ~ div (zobrazit: žádné; ) /* typ textu štítku */. skrýt + štítek, . skrýt: zaškrtnuto + popisek ( odsazení: 0 ; barva: zelená; kurzor: ukazatel; ohraničení- dole: 1px tečkovaný zelený; ) . skrýt: zaškrtnuto + štítek + 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; odsazení: 10px; )

/* skrýt zaškrtávací políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* vzhled textu štítku */ .hide + label, .hide:checked + label ( padding: 0; barva: zelená ; kurzor: ukazatel; border-bottom: 1px tečkovaný zelený; ) /* vzhled textu štítku, když je přepínač aktivní */ .hide: zaškrtnuto + štítek ( barva: červená; border-bottom: 0; ) /* když je checkbox je aktivní, zobrazit bloky s obsahem */ .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še je pro asketický příklad zcela dostatečné minimum. Ale vůbec to nebudeme my, když nepřidáme alespoň nějaké vychytávky a je lepší vizuálně uživateli říct, kam má kliknout.
V druhém příkladu jsem přidal jednoduchý symbol ve formě plus, který jasně naznačuje, že se zde skrývá něco jiného, ​​po stisknutí se okamžitě změní na mínus a ke skrytým blokům jsem přidal malou animaci s obsahem, když objevují se, a to vše výhradně s pomocí kouzla CSS3.

2.CSS

/* skrýt zaškrtávací políčka a bloky obsahu */. skrýt, . skrýt + popisek ~ div (zobrazit: žádné; ) /* typ textu štítku */. skrýt + popisek ( okraj: 0 ; výplň: 0 ; barva: zelená; kurzor: ukazatel; zobrazení: vložený blok; ) /* vzhled textu štítku, když je přepínač aktivní */. skrýt: zaškrtnuto + štítek ( barva: červená; okraj- dole: 0; ) /* když je zaškrtávací políčko aktivní, zobrazí bloky s obsahem */. skrýt: zaškrtnuto + štítek + 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á animace při zobrazení */- webkit- animace: slábnutí - za 0,5 s; - moz- animace: slábnutí- za 0. 5s; animace: náběh slábnutí- za 0,5s; ) /* animace, když se objeví skryté bloky */@- moz- klíčové snímky slábnou ( od ( opacity: 0 ; ) do ( opacity: 1 ) ) @- webkit- klíčové snímky mizí ( od ( opacity: 0 ; ) do ( opacity: 1 ) ) @ klíčové snímky mizí ( od ( opacity: 0 ; ) až ( neprůhlednost: 1 ) ). skrýt + štítek: před ( barva pozadí: #1e90ff; barva: #fff; obsah: " \002 B"; displej: blok; plavat vlevo; velikost písma: 14px; váha písma: tučné; výška: 16px; výška řádku: 16px; okraj: 3px 5px; text- zarovnat: na střed; šířka: 16px; - webkit- border- poloměr: 50 %; - moz- border- poloměr: 50 %; hraniční rádius: 50 %; ). skrýt: zaškrtnuto + štítek: před ( obsah: " \221 2" ; }

/* skrýt zaškrtávací políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* vzhled textu štítku */ .hide + label ( margin: 0; padding: 0; barva: zelená; kurzor : ukazatel; display: inline-block; ) /* vzhled textu štítku, když je přepínač aktivní */ .hide:checked + label ( color: red; border-bottom: 0; ) /* když je zaškrtávací políčko aktivní, zobrazit bloky s obsahem */ . 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á animace při zobrazení */ -webkit-animation:fade easy-in 0,5s; -moz-animation:fade easy -za 0,5s; animace: postupné slábnutí-za 0,5s; ) /* animace, když se objeví skryté bloky */ @-moz-keyframes mizí (od ( opacity: 0; ) do ( 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; barva: #fff; obsah: "\002B"; displej: blok; plavat vlevo; velikost písma: 14px; váha písma: tučné; výška: 16px; výška řádku: 16px; okraj: 3px 5px; text-align: center; šířka: 16px; -webkit-border-radius: 50 %; -moz-border-radius: 50 %; hraniční rádius: 50 %; ) .hide:checked + label:before (obsah: "\2212"; )

Podle všeho je metoda nepochybně dobrá, ale jako vždy a vůbec nepřekvapivé nastávají problémy s věčnou brzdou pokroku, prohlížečem IE, pseudotřídou kontrolovány podporují pouze verze 9 a novější tohoto prohlížeče. U starších verzí IE zůstává vše při starém, budete muset použít javascript.

Pomocí skrytých zaškrtávacích políček můžete snadno implementovat stylizované bloky, posuvníky, galerie a mnoho dalšího.

Se vší úctou, Andrew

Popis

HTML tag slouží k vytvoření rozevíracího (rozbalovacího) seznamu, který se zobrazí po kliknutí na prvek formuláře a umožní návštěvníkovi webu vybrat jednu z předdefinovaných možností.

Živel

může obsahovat dvě nebo více značek , definující dostupné výběry v rozevíracím seznamu. Text prvního podřízeného prvku se zpočátku zobrazí v rozevíracím seznamu, to znamená, že to bude výchozí hodnota pro seznam. Změňte nebo nastavte výchozí hodnotu pro Vybraný atribut můžete přidat k požadované možnosti:

Volvo Saab VW Audi

Šířka rozevíracího seznamu bude určena nejdelším textem uvedeným ve značce .

Atributy

autofocus: Určuje, že prvek by měl být automaticky zaostřen, když se webová stránka načte. Možné hodnoty pro booleovský atribut autofocus: Příklad »

Poznámka: Atribut autofocus není podporován v IE9 a dřívějších verzích a ve Firefoxu.

Vypnuto: Označuje, že prvek je neaktivní, což znamená, že uživatel s prvkem nebude moci interagovat. Možné hodnoty pro zakázaný booleovský atribut:

Příklad » formulář: Definuje formulář, ke kterému je prvek přidružen. Hodnota atributu je identifikátor prvku

. Tento atribut umožňuje umístit prvek na libovolném místě v dokumentu, nejen jako potomek prvku .

Poznámka: Atribut formuláře není ve Firefoxu podporován.

Vícenásobné: Označuje, že lze vybrat více možností najednou. Několik možností se liší v závislosti na operačním systému:

• Windows: Chcete-li vybrat více možností, podržte klávesu CTRL.
• Mac: Chcete-li vybrat více možností, podržte klávesu CMD.

Možné hodnoty pro vícenásobný logický atribut: Příklad »

Poznámka: Vzhledem k různým způsobům výběru více položek a dodatečnému upozornění pro uživatele, že je k dispozici více výběrů, se doporučuje používat zaškrtávací políčka namísto rozevíracího seznamu.

Název: Definuje název rozevíracího seznamu. Lze jej použít k přístupu k datům formuláře po jejich odeslání nebo k odkazování na prvek v JavaScriptu. velikost: Určuje počet viditelných možností v rozevíracím seznamu. Pokud je hodnota atributu size větší než 1, ale menší než celkový počet možností v seznamu, prohlížeč automaticky přidá posuvník, který označí, že existuje více možností k zobrazení.

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

název Pošta

Značky, atributy a hodnoty

• action="http://site/comments.php" - definuje url, na který se budou odesílat data z formuláře.
• id="" - definuje název a identifikátor prvku formuláře.
• name="" - definuje název prvku formuláře.
• - definovat textové pole jako součást formuláře.
• cols="" - určuje počet sloupců textového pole formuláře.
• rows="" - definuje počet řádků textového pole formuláře.

Pokud mezi umístěte text, zobrazí se uvnitř pole jako příklad, který lze snadno odstranit.

Příklad HTML formuláře | Rozbalovací seznam

První pozice Druhá pozice Třetí pozice Čtvrtá pozice

Značky, atributy a hodnoty

• - definovat seznam s pozicemi k výběru.
• size="" - určuje počet viditelných pozic v seznamu. Pokud je hodnota 1, jedná se o rozevírací seznam.
• - určit pozice (položky) seznamu.
• value="" - obsahuje hodnotu, která bude odeslána formulářem na zadanou url ke zpracování.
• selected="selected" - zvýrazní položku seznamu jako příklad.

Příklad HTML formuláře | Seznam s posuvníkem

Zvýšením hodnoty atributu size="" získáme seznam s posuvníkem:

První pozice Druhá pozice Třetí pozice Čtvrtá pozice

První pozice Druhá pozice Třetí pozice Čtvrtá pozice

Pro tuto možnost použijte příznak multiple="multiple", který umožňuje vybrat více pozic. Jeho absence umožňuje vybrat pouze jednu položku.

type="submit" - definuje tlačítko.

type="reset" - definuje tlačítko reset.

value="" - definuje popisek na tlačítku.

Viz navíc:

Popis

Štítek umožňuje vytvořit prvek rozhraní ve formě rozevíracího seznamu a také seznamu s jednoduchým nebo vícenásobným výběrem, jak je uvedeno níže. Konečný vzhled závisí na použití atributu size tagu který nastavuje výšku seznamu. Šířka seznamu je určena nejširším textem uvedeným v tagu a lze je také změnit pomocí stylů. Každá položka je vytvořena pomocí značky , který by měl být vnořen do kontejneru . Pokud plánujete odeslat data seznamu na server, musíte prvek umístit uvnitř formuláře. To je také nutné, když se k datům seznamu přistupuje prostřednictvím skriptů.

Syntax

odstavec 1 bod 2

Atributy

Umožňuje přeskočit na seznam pomocí některé klávesové zkratky. Nastaví seznam tak, aby byl aktivní po načtení stránky. Blokuje přístup a úpravu prvku. Přidruží seznam k formuláři. Umožňuje vybrat více položek seznamu najednou. Název prvku, který má být odeslán na server nebo zpřístupněn prostřednictvím skriptů. Seznam je nutné vybrat před odesláním formuláře. Počet řádků seznamu k zobrazení. Definuje sekvenci přechodů mezi prvky při stisknutí klávesy Tab

Uzavírací štítek

Požadované.

HTML5 IE Cr Op Sa Fx

Vyberte si hrdinu Cheburashka Krokodýl Gena Shapoklyak Krysa Larisa

Značka volby HTML se používá k vytvoření rozevíracího seznamu, který umožňuje uživateli vybrat jednu možnost z předdefinované sady hodnot.

Text viditelný pro uživatele se může lišit od textu uvedeného v atributu value. Zde je návod, jak vytvořit rozevírací seznam:

Zelená Žlutá Černá

• Rozbalovací seznam je vytvořen pomocí značky ;
  Uvnitř štítku
  možnosti výběru jsou definovány pomocí značky ;
• Ve štítku můžete použít atribut value pro přístup k vybrané možnosti pomocí PHP, JS, Jquery atd.

Je také možné zadat třídu CSS namísto použití ID pro stylování rozevíracího seznamu.

V další části ukážu příklady použití rozevíracího seznamu HTML v JavaScriptu/JQuery. Příklady také ukáží, jak nastavit styly pomocí CSS/CSS3 a Bootstrap framework.

Příklad vytvoření jednoduchého rozevíracího seznamu

Tento příklad používá možnost výběru HTML k vytvoření rozevíracího seznamu se třemi možnostmi na výběr:

Výše uvedený příklad používá k vytvoření rozevíracího seznamu následující označení:

5 10 15 20 25

Použití atributu value

Jak již bylo zmíněno dříve, hodnota atributu value se může lišit od textu zobrazeného na stránce. Můžete například uživatelům zobrazit názvy zemí nebo barvy a použít zkratky v atributu value.

V následujícím příkladu vytvoříme rozevírací seznam s atributem value:

Zobrazit online demo a kód

Pro značku Používá se následující kód:

Maroon Zelená Žlutá Modrý Červené

Příklad přístupu k vybrané možnosti v JavaScriptu

Nyní vytvoříme příklad přístupu k hodnotě vybrané možnosti a provedení některých akcí. Vytvoříme stejný seznam jako v příkladu výše s barevnými možnostmi. Po výběru klikněte na tlačítko a použijte tuto barvu na dokument:

Zobrazit online demo a kód

Pro hodnotu HTML možnosti se používá následující kód:

Maroon Zelená Žlutá Modrý Červené jiný

Následující řádek kódu se v JavaScriptu používá k přístupu k hodnotě atributu value možnosti :

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

Po kliknutí na tlačítko se zavolá funkce JS, která přiřadí hodnotu vybranou v rozevíracím seznamu proměnné. Tato hodnota se používá k aplikaci barvy na aktuální dokument.

Přístup k viditelnému textu v JQuery

Tentokrát použiji JQuery pro přístup k hodnotě vybrané možnosti: text i hodnota . V této ukázce budu přistupovat k viditelnému textu ve značce volby v HTML:

Zobrazit online demo a kód

V kódu pro každou možnost ve značce

význam je odlišný od textu. Jakmile vyberete barvu, jQuery zobrazí viditelný text ve výstraze. Kód značky další:

Maroon Zelená Žlutá Modrý Červené

Zde je návod, jak získat přístup k této hodnotě HTML vybrat možnost vybraný JavaScript:

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

K hodnotě můžete také přistupovat pomocí metody JQuery $.val():

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

Nahraďte tento řádek ve výše uvedeném příkladu a kód zobrazí hodnotu shortcode/color v atributu value, nikoli viditelný text.

Příklad získání hodnoty ve skriptu PHP

V tomto příkladu získání hodnoty možnosti vybrané z rozevíracího seznamu je formulář vytvořen pomocí značky v sekci označení. Po výběru barvy z rozevíracího seznamu klikněte na tlačítko „Odeslat“. Data formuláře budou předána do stejného souboru PHP, po kterém se zobrazí vybraná barva:

Zobrazit online demo a kód

Metoda formuláře použitá v příkladu je POST, takže hodnoty formuláře můžete získat pomocí pole $_POST[“”] PHP. Toto je kód formuláře použitý v příkladu:

Vyberte barvu:

Maroon Zelená Žlutá Modrý Červené