Možnosti pro použití html vstupního políčka jsou velmi velké, ale nejčastěji se tento prvek používá ve formě přenosu dat. Je však schopen vykonat mnohem více "triků" než získání hodnot formulářů. Je vhodné jej použít k vytvoření různých "akordeonů" na čistém CSS.
Jednoduchý čistý CSS "harmonika"
CSS:
označení [na ^ = " akordeon "]: hover ~ label [pro ^ =" akordeon "] {
opacita: 0,8;
textový stín: 1px 1px 2px currentColor;
}V tomto příkladu, když se kurzor myši na štítku („bod 1“) je převod stylů pro všechny ostatní symboly, které jsou umístěny pod (sourozenci, anglicky - sourozenci) . Převést pozemky sourozence použít znak „~“ přenášet pouze styl těchto značek, ale ne všechny sourozence stránky. Tyto „^“ znamená „začíná“ Příklad „pro ^ =‚harmoniky‘-“ (pro) vstup id, který začíná se slovem „akordeon“:
V důsledku toho, když umístíte kurzor na štítek, změní se styl dolních štítků.
Etikety jsou použitelné jako displeje pro mobilní telefony, je velmi obtížné, aby kliknutím na malý checkbox box html, které rozšiřují oblast, která je pro uživatele k dispozici pro výběr požadované odpovědi. Navíc díky štítku, který může zcela odstranit krabice z obrazovky
vstup [id ^ = "harmonika"] {
Pozice: absolutní;
vlevo: -9999px;
}se může také přidat kurzor: ukazatel, takže návštěvníci porozuměliže položky "klikací"
označení [na ^ = "harmonika"]: hover {
kurzor: ukazatel;
}V důsledku toho, vznášet se nad text (například "bod 1"), kurzor namísto "šipka" vůle "ruční". Můžete přidat další styly CSS do ještě více harmonik.
CSS "Stunts" zde nekončí. K našemu "akordeonu" přidáme skrytý text.
Znění 1.
Znění 2.
Znění 3.
styly pro skrytý text:
[id ^ = "akordeon-box -"] {
přetečení: skrytý;
maximální výška: 0;
}, aby, když se objevil na textu štítku, přidejte max-výška: 100% styl
vstup [id ^ = "akordeon" ]: zaškrtnuto + [id ^ = "akordeon-box -"] {
max-výška: 100%;
}Postup začne, když uživatel klikne „na etiketě, políčko html vybrán (vstup: zaškrtnuto), potom projdou znakem“ + „(což znamená, že“ pouze první sourozence dole „) max-height vlastnost: 100% na
Když vyberete příslušnou položku, zobrazí se text.
HTML:
Znění 1.
Znění 2.
(107 )
Znění 3.
CSS:
štítek [na ^ = "harmonika"] {
velikost písma: 20px;
}
štítek [na ^ = "harmonika"]: hover {
kurzor: ukazatel;
barva: červená;
textový stín: 1px 1px 2px currentColor;
}
štítek [na ^ = "harmonika"]: vznášet ~ štítek [na ^ = "harmonika"] {
opacity: 0,8;
textový stín: 1px 1px 2px currentColor;
}
vstupní [id ^ = "harmonika"]: kontroluje + [id ^ = "akordeon-box -"] {
max-výška: 100%;
okraj: 10px;
}
vstup [id ^ = "akordeon"] {
pozice: absolutní;
vlevo: -9999px;
}
[id ^ = "akordeon-box -"] {
přetečení: skrytý;
max-výška: 0;
}, získávání a zpracování hodnot pomocí PHP
Předpokládejme, například za použití políčko HTML formulářů, které mohou také přijímat hodnotu (hodnota = "moe_znachenye").
záznamu hodnota hodnoty operátor = "".
Při odeslání formuláře, bude $ _POST pole obsahovat název operátora klíče pole = "", a hodnota value = "".
Pokud se jednalo o běžné pole, pak se podíval takto:
$ post = array ("jméno" = & gt; hodnota);
, nebo
$ post = array (
"HTML_name" = & gt; "HTML",
, "CSS_name" = & gt; " CSS "
," javascript_name "= & gt;" JavaScript "
" jQuery_name "= & gt;" jQuery "
," PHP_name "= & gt;" PHP "
" ajax_name „= & gt ; "Ajax"
);$ _POST array transformovat řetězce pomocí PHP zhroutí () a přiřadit hodnotu $ _POST ["ajax_name"] změnu $ Ajax. Obvykle všechny hodnoty $ _POST vytvořit proměnné, ale například píšeme jen jeden nedošlo k přetížení kód zbytečné informace. Je také nutné zkontrolovat bezpečnostní vstupní $ _POST, ale budeme tady dělat nebude, hodně bylo napsáno o tom v jiných článcích.
své schopnosti: ".implode ('', $ _POST),
, pokud (isset ($ _POST [" Ajax „])) {
$ Ajax = $ _POST ["Ajax"]
}
, pokud (isset ($ Ajax)) {
echo "
proměnná nastavovaná $ Ajax"
}
echo „
"“
var_dump ($ _ POST),
echo"
obdrží klíče a hodnoty tvoří pomocí jQuery
Chcete-li získat hodnotu z formy bez překládky stránky by mělyPomocí skriptů nebo javascript jQuery).
$ (dokument) .ready (function () {
$ ("input.my-class") na ("cvaknutí", funkci (e ) {
var val = [],
, $ (. "vstup: kontrolována") každý (funkce () {
val.push ($ (to) .val ());
} ) (. 223), $ ("# log") html ("Zvolený:" + val.join ("") + "
"),
})
}) ;, vytvořit matici
var val = [];, pak každý (každý) vybranou položku ("vstup: kontrolována") používat tlak se zapíše do pole val ():
, $ ("vstup: kontrolována" ) .each (funkce () {
val.push ($ (to) .val ());
});Obsah Val pole () se zobrazí na straně, která se přidá html objekt
jQuery: [. 240]
$ ("# log") html ("Zvolený:" + val.join ("") + "
");
Zjistěte si, zda políčko html vybrán, můžete použít .je (": zaškrtnuto") Prop ("kontrolovat")..
Získat hodnotu (Val) každý vlajky a přivést ji přes výstrahy ():
if ($ (this) .je (': kontroluje')), upozornění ($ (toto) .val ());Totéž udělá pro identifikátor (ID) použití .prop ("kontrolovat"):
if ($ (this) .prop ('kontrolovat' )) varování ($ (to) .attr ("id"));Závěr klíče a hodnoty prostřednictvím záznamu () je jen příklad, pro formu, které potřebují, takže by měly být odstraněny z kódu.
) $ ('# submitButton') prop ("disabled" ,! $ (this) .prop ("kontrolovat"));
Poznámka: tlusté střevo: .je (": kontroluje") pracuje správně s tlustého střeva a .prop ("kontrolována") provozuje bez tlustého střeva !!!
Přidáme možnost okamžitě označit všechny body.
, pokud ($ ("# checkAll"). Prop ("kontrolována" ))$ ('input.my-class') není (toto) .prop ('checked', this.checked);
Celý kód.
HTML:
Požadované dovednosti:
jQuery:
, $ (dokument) .ready (funkce () {
, $ ("input.my třída") na (. () () () () () () () ()
() ) ($ (this) .prop ('checked')) upozornění ($ (this) .attr ("id")); tento) .prop ("kontrolovat"));.
if ($ ("# checkAll") prop ("kontrolovat")) $ ('input.my-class') ne (toto) .prop (‘. ()
$ ("vstup: zaškrtnuto") každý (function () {
val.push . 335), pokud ($ ("# checkAll") prop ("kontrolována")) {
, $ ("# log") html ("Zvolený: Všechny (337
.)"),
} jiný {{340} $ ("#log"). html ("Vybraný:" + val.join (",") "
345)});
PHP:
if (isset ($ _ POST ["ALL"])) {
echo "Mé schopnosti: všechny tyto";
} else {
echo "
Moje dovednosti:" .implode (',', $ _POST);
}
pokud (isset ($ _POST ["ajax"]))) {
$ ajax = $ _POST ["ajax"];
}
pokud (isset ($ ajax)) {
echo '
Proměnná $ ajax set ";
}
echo";
var_dump ($ _ POST);
echo "
";Registrace tlačítka na čistě CSS
pro uspořádání tlačítek v souladu s projektem lokality budou používat pouze CSS. Skrytí původní krabici pomocí vlastnosti z-index a neprůhlednost, v tomto případě, čtverce nejsou posunuty z obrazovky, tak se na průhledné (zákal: 0).
CSS:
pozice: absolutní;
z-index: -1;
opacita: 0;
okraj: 10px 0020px;Na stejném místě zobrazujeme tlačítka s vlastním designem.
vstupní značka může být umístěna před štítku značky, pak použití první příklad styling tlačítek:
.my třídy {
pozice: absolutní;
z-index: -1;
opacita: 0;
okraj: 10px 0020px;
}
.my-class + label {
pozice: relativní;
polstrování: 000 60px;
kurzor: ukazatel;
}
.my třídy + štítek: před {obsahu
: „;
pozice: absolutní;
nahoru: -4px
vlevo: 0;
šířka: 50 pixelů
, výška: 26px;
border-radius: 13px;
pozadí: # CDD1DA
krabice-shadow: vložka 0 2px 3PX RGBA (000,2),
převodní: 1,2 s;
}
.my třídy + štítek: po {obsahu
: „;
poloha: absolutní;
nahoru: -2px;
doleva: 2px;
šířka: 22px;
výška: 22px;
okraj-poloměr: 10px;
pozadí: #FFF;
box-shadow: 2px 0 5px rgba (000.3);
přechod: .2s;
}
.my třídy: zkontrolovat + štítek: před {
pozadí: # 87CEFA;
-webkit-animace: blackblur 2s 015 s 1 náhradník;
}
.my třídy: zkontrolovat + štítek: po {
vlevo: 26px;
}
.my třídy: zaměření + label: před {
krabice-stínu: vložka 0 2px 3PX RGBA (000.2), 000 3PX RGBA (206250135.7);
}
, '-webkit-klíčové snímky blackblur {
, z {box-stínu: 0072px černá; barva: průhledná;}
do {box-shadow: 0; barva: černá;}
}Je-li vstup - značka uvnitř štítku, pak dal políčka text v div s třídou "text". Styly podíl vstupu: kontrolovány div s třídou "text" v druhém příkladu:
.label vstup {
pozice: absolutní;
z-index: -1;
opacita: 0;
okraj: 10px 0020px;
}
.text {
pozice: relativní;
polstrování: 000 60px;
kurzor: ukazatel;
vlevo: 0;
šířka: 50px;
) výška: 26px;
border-radius: 13px;
pozadí: # CDD1DA
krabice-shadow: vložka 0 2px 3PX RGBA (000,2),
přechodové: .2s
}
.text: po {{458} obsahu: ";
poloha: absolutní;
nahoru: -2px;
vlevo: 2px;
šířka: 22px;
výška: 22px;
okraj-poloměr: 10px;
pozadí: #FFF;
box-shadow: 2px 0 5px rgba (000.3);
přechod: .2s;
}
.label vstup: zkontrolovat + .text: před {
pozadí: # 87CEFA;
-webkit-animace: blackblur 2s 015 s 1 náhradník;
}
.význaková značka: zaškrtnutá + .text: po {
doleva: 26px;
}
.label vstup: zaměření + .text: před {
krabice-stínu: vložka 0 2px 3PX RGBA (000.2), 000 3PX RGBA (206250135.7);
}
@ -webkit-keyframes blackblur {
z {box-shadow: 0072px černá; barva: průhledná;}
do {box-shadow: 0;
Vybrat vše
