03.04.2021 hírek
HTML tag legördülő lista létrehozására szolgál, amely akkor jelenik meg, amikor az egérrel rákattint egy űrlapelemre, és lehetővé teszi a webhely látogatójának, hogy válasszon egyet az előre meghatározott lehetőségek közül.
Elem kettő vagy több címkét tartalmazhat meghatározó Elérhető opciók kiválasztását a legördülő listában. Az első gyermek elem szövege kezdetben a legördülő listában jelenik meg, vagyis ez lesz a lista alapértelmezett értéke. Módosítsa vagy állítsa be az alapértelmezett értékét a kiválasztott attribútumot a kívánt opcióhoz írhatja:
Volvo Saab vw Audi
A legördülő menü szélességét fogja leginkább meghatározni hosszú szöveg a címkében megadva .
Megjegyzés: Az autofókusz attribútum nem támogatott az IE9 és újabb verziókban korai változataiés Firefoxban.
Letiltva: Azt jelzi, hogy az elem le van tiltva, ami azt jelenti, hogy a felhasználó nem tud kommunikálni az elemmel. A letiltott logikai attribútum lehetséges értékei: Példa » form: Megadja azt az űrlapot, amelyhez az elem társítva van. Az attribútum értéke az elemazonosító . Ez az attribútum lehetővé teszi egy elem elhelyezését bárhol a dokumentumban, nem csak egy elem gyermekeként .
Megjegyzés: A form attribútum nem támogatott a Firefoxban.
Több: Azt jelzi, hogy egyszerre több lehetőség is kiválasztható. A több lehetőség közül választhat operációs rendszer:
Megjegyzés: miatt különböző módokon Ha több elemet választ ki, és értesíti a felhasználókat, hogy több lehetőség is elérhető, javasoljuk, hogy legördülő lista helyett jelölőnégyzeteket használjon.
Név: Megadja a legördülő lista nevét. Használható az űrlapadatok eléréséhez azok elküldése után, vagy hivatkozhat egy JavaScript-elemre. méret: A legördülő listában látható opciók számát jelzi. Ha a size attribútum értéke nagyobb, mint 1, de kisebb, mint a lista opcióinak teljes száma, akkor a böngésző automatikusan egy görgetősávot ad hozzá, jelezve, hogy több lehetőség is megtekinthető.
A címke használatával létrehozhat egy legördülő listát HTML-ben válassza ki. A legördülő listán (vagy "legördülő listán") kívül a címke válassza ki lehetővé teszi egy listaelem létrehozását többszörös kijelöléssel. Címke használatának szintaxisa válassza ki A HTML így néz ki:
Elektronika Syroezhkin Chizhikov Kukushkina
Itt a címkével választási lehetőség a lista elemei adottak.
Pályázat eredménye:
Vegye figyelembe a címke attribútumait válassza ki:
Talán ezek mind a címke fő attribútumai válassza ki amelyeket leggyakrabban használnak. Lássuk most, hogyan készítsünk legördülő listát HTML-ben a megadott attribútumok használatával:
Címke választási lehetőség, mint már említettük, lehetővé teszi számunkra, hogy meghatározzuk gyermek elemek legördülő lista válassza ki, ami viszont konténerként működik. Címke választási lehetőség saját tulajdonságai vannak:
Nézzük meg a címke speciális használati esetét választási lehetőség:
Elektronika úr Syroezhkin Chizhikov Kukushkina
A példa eredménye így fog kinézni:
Mr. Electronic Syroezhkin Chizhikov Kukushkina
A Nubex webhelykészítő képes egyéni űrlapokat létrehozni az űrlapkészítő modul használatával. A "Nubex" legördülő listáinak működését a cikk ismerteti:
A webhelyeken gyakran találhat olyan oldalakat, amelyeken HTML-űrlapok vannak elhelyezve. A webes űrlapok kényelmes módja annak, hogy információkat szerezzen a webhely látogatóitól. Példa erre a -, -, amely biztosítja Visszacsatolás az oldal látogatóival és fejlesztőivel. Az űrlapok a webhelyfejlesztők számára is kényelmesek a CMS fejlesztése során, amely lehetővé teszi a webhely fő tulajdonságának - a relevancia - fenntartását. Ez a cikk a HTML-űrlapok létrehozásának alapjaira, azok feldolgozására, valamint a képernyőn megjelenő űrlapokból a PHP-szkriptekbe való adatátvitelre összpontosít.
címkéket És állítsa be az űrlap elejét és végét. Űrlap kezdőcímke két attribútumot tartalmaz: akcióÉs módszer. Az action attribútum tartalmazza URL-cím a script feldolgozásához meghívandó szkript. Tulajdonság módszer közli a böngészővel, hogy milyen HTTP-kérést kell használnia az űrlap elküldéséhez; lehetséges értékek POSTÉs KAP.
A fő különbség a POST és a GET metódusok között az információátvitel módja. A GET metódusban a paraméterek a címsoron keresztül kerülnek átadásra, pl. Valójában a kérés HTTP fejlécében, míg a POST metódusban a paraméterek a HTTP kérés törzsén keresztül kerülnek átadásra, és semmilyen módon nem jelennek meg a címsor formájában.
$szöveg = nl2br($_POST["sajátszöveg"]); ?>
Feladat: Tegyük fel, hogy szeretnénk létrehozni egy legördülő listát a 2000-től 2050-ig tartó évekre. Megoldás: Létre kell hozni HTML űrlap SELECT elemmel és PHP-vel - egy szkript az űrlap feldolgozásához.
Vita:
Kezdjük két fájl létrehozásával: form.htmlÉs action.php. Fájlban form.html tartalmaz egy html űrlapot egy legördülő listával. Ezenkívül a listában szereplő értékek kétféleképpen adhatók meg:
2000 2001 2002 …………………………………………… 2050
év $ = 2000 ; for ($i = 0 ; $i<= 50 ; $i ++) // Hurok 0-ról 50-re { $új_évek = $év + $i ; // Új érték létrehozása visszhang" " . $új_évek ."" ; // Új sort alkot } ?>
Amint láthatja, a második hurokkal ellátott példa tömörebb. Az űrlapkezelő szkriptet szerintem nem érdemes megadni, mert az pont úgy van feldolgozva, mint egy szövegmező, pl. a listaértékek lekérhetők egy szuperglobális tömbből $_POST.
Leírás:
Hozzon létre egy HTML űrlapot, amellyel elküldheti a fájlt a szervernek.
Ennek a html űrlapnak van egy eleme böngészhet, amely megnyit egy párbeszédpanelt a kiszolgálóra feltöltendő fájl kiválasztásához. A gomb megnyomásával "Fájl átvitele", a fájl átadásra kerül a kezelő szkriptnek.
Ezután egy szkriptkezelőt kell írni action.php. A kezelő megírása előtt el kell döntenie, hogy melyik könyvtárba másoljuk a fájlt:
if(isset($_FILES [ "saját fájl" ])) // Ha a fájl létezik { $katalógus = "../image/" ; // Könyvtárunk if (is_dir ($catalog )) // Ha van ilyen könyvtár { $sajatfájl = $_FILES [ "saját fájl" ][ "tmp_name" ]; // Temp fájl $sajátfájl_neve = $_FILES [ "saját fájl" ][ "név" ]; // Fájl név if(! copy ($myfile , $catalog )) echo "Hiba a fájl másolása közben". $sajátfájl_neve // Ha a fájl másolása nem sikerült } else mkdir(../image/"); // Ha nincs ilyen könyvtár, akkor létrehozzuk } ?>
Ha megbízik a felhasználókban, hogy fájlokat töltsenek fel a szerverére, rendkívül óvatosnak kell lennie. A támadók „rossz” kódot fecskendezhetnek be egy képbe vagy fájlba, és elküldhetik azt a szervernek. Ilyen esetekben szigorúan ellenőriznie kell a fájlok letöltését.
Ez a példa bemutatja egy könyvtár létrehozását és egy fájl másolását a kiszolgáló ebbe a könyvtárába.
Szeretnék egy példát is bemutatni egy elemmel jelölőnégyzetet. Ez az elem kissé eltér a többi elemtől, ha nem az egyik elem jelölőnégyzetet'a nincs kiválasztva, akkor szuperglobális változó $_POSTüres értéket ad vissza:
if (!empty($_POST [ "saját szín" ])) echo $_POST [ "mycolor" ]; // Ha legalább 1 elem ki van választva visszhang "Válasszon értéket"; ?>
window.onresize = ... ;
Az ablak objektum onresize eseménye felelős a böngészőablak átméretezéséért. Ezért az esemény az ablak objektumhoz tartozik - ablak.
Mert között html elemeket Mivel a böngészőablakkal nincs azonosítva címke, az onresize eseményt JavaScriptben kezelheti úgy, hogy az ablakobjektum tulajdonságához egy függvényt rendel.
Nézzünk egy példát:
Példa:Írjon egy szkriptet, amely üzenetet jelenít meg az ablak átméretezésekor "Ablak átméretezve!"
window.onresize = function message() (alert("Az ablak átméretezve!");)
HTML kód:
A kijelölő objektum – egy legördülő lista – a kiválasztható értékek listáját tartalmazza. A választás lehet egy vagy több elem egyszerre. Ez összetett objektum, amelyre a szkript kijelöl objektumként és opcióelemként is hivatkozik.
Válassza ki az objektum tulajdonságait: hossza – listaelemek száma név — névattribútum opciók - elemek tömbje selectedIndex - a kiválasztott opcióelem indexe defaultSelected – alapértelmezés szerint a kiválasztott opcióelem kiválasztott - kiválasztott elem
Válassza ki az objektum tulajdonságait:
Egy legördülő lista (select) értékét a value tulajdonságon keresztül érheti el javascriptben. De vannak más módok is.
Vegyünk egy példát:
Példa: Helyezzen el egy legördülő listát három elemből - városok: Moszkva, Szentpétervár, egy másik. A gombra kattintva kapja meg a lista kiválasztott opciója (eleme) érték tulajdonságának értékét és jelenítse meg a képernyőn
Listaérték azonosítás:
function f()( var a=document.getElementById("s1").value; alert(a); )
Munka js13_1. Listaelem megváltoztatásakor a kiválasztott menüpont szövegét adja hozzá a szövegmezőhöz (opció).
Részlet:
Kód hozzáadása:
Forgatókönyv:
function check() ( document.getElementById("t1").value= ...; )
1 2 3
Munka js13_2. Hozzon létre egy tanulói tudásteszt oldalt egy kérdéssel: – Milyen mértékegységekben mérik a munkát?és két válasz: "Moly"(rossz) és "Joule"(helyes), listás menüpontként valósítva meg (kiválasztás). Futtassa az ellenőrző funkciót
Vegyünk egy példát a kiválasztott objektum - selectedIndex - a kiválasztott opcióelem tulajdonságának használatára:
Példa: Jelenítse meg a kiválasztott alternatíva indexét egy szövegmezőben:
BAN BEN ezt a példát amikor a menüpont megváltozik, az onChange esemény elindul. A szkript az onChange attribútum értékeként fut le: a szövegmezőt űrlapelemekből álló tömbön keresztül érjük el (a szövegmező a tömb első eleme, mivel a 0. elem a Select legördülő lista). Értékként szövegmező a kiválasztott listaelem (selectedIndex) száma látható.
A javascript kijelölés menüpontja - opció - különálló objektumként kezeli, saját tulajdonságaival:
Egy adott menüelem a következőn keresztül érhető el gyűjtemény (tömb) opciók:
Szkript a legördülő menü első elemének eléréséhez (az opciós tömb nulla eleme):
függvény myFunc()( document.f1.s1.options....=...; ...; )
Vegyünk egy példát egy opcióobjektum text tulajdonságának használatára:
Példa: Ha módosítja egy listaelem kiválasztását egy szövegmezőben, jelenítse meg a kiválasztott lista alternatívájának szövegét
Vegyen fontolóra egy másik megoldást egy többszörös kijelölésű lista használatával:
Példa: A feleletválasztós lista módosításakor jelenítse meg a kiválasztott alternatívák indexeit a szövegmezőben (állítsd be a többszörös attribútumot a listán)
Példa:
Példa: Ha rákattint egy bekezdésre (p címke), módosítsa a címke szövegének tartalmát, és középre helyezze a szöveget
szöveg megváltozott
Az oldal vagy blog létrehozása és tartalommal való további feltöltése során különböző okok miatt néha szükségessé válik a szöveg egy részének elrejtése, terjedelmesebb információk elhelyezése egy egyelőre rejtett blokkban, de mégis jelezni kell a még egy dolog, ami elérhető, és lehetőséget ad neki, hogy megtekintse a rejtett tartalmat anélkül, hogy a következő sorra vagy oldalra költözne. Korábban egy rakás javascriptet használtak egy ilyen megoldás megvalósítására, de most mindezt nagyon egyszerűen meg lehet tenni elképesztő tulajdonságok segítségével.
Ma megnézzük legegyszerűbb módja rejtett blokkok létrehozása tartalommal a webhely oldalain és az egyes üzenetekben, amelyek akkor nyílnak meg, amikor egy bizonyos szövegelemre kattint, csak CSS3 tulajdonságok használatával. Egyetlen szó, egy kiválasztott kifejezés, egy egész mondat vagy egy tájékoztató ikon szolgálhat kapcsolóként. Az ilyen blokkokat gyakran használják olyan oldalakon, amelyeken nagy mennyiség tartalom, a strukturáltabb és tömörebbé tétel érdekében minden tartalom úgynevezett csoportokra van osztva, amelyekben csak a címsorok jelennek meg a felhasználó számára, az összes szöveg alapértelmezés szerint el van rejtve, és egy adott elemre kattintva látható (ld. felett).
Próbáljuk meg megtenni a felesleges vizet, nézzük meg ezt az egész egyszerű mechanizmust működés közben, egy jó példával, ha akarsz, szerkeszthetsz is valamit:
A legördülő blokkok kapcsolóinak szerepében további információ nem használunk kiemelt vagy megjelölt szöveget, egyértelmű ajánlattal, hogy rákattint, amit félelem és kétség nélkül meg kell tennie)
Mint látható, minden több mint jól működik, a rejtett tartalom probléma nélkül megjelenik, és egy kis egérkattintással eltűnik, ugyanakkor a futtatható kód minimális mennyiségét használtuk, mind a html keretben, mind a css stílusok kialakítása. Anélkül, hogy további javascript könyvtárakat csatlakoztatnánk, örök szorongással, és hogy le vannak-e tiltva a felhasználó oldalán. Mindezen műveletek végrehajtása a CSS3 pszeudoosztálynak köszönhetően vált lehetővé :ellenőrizve interfész elemekre, például rádiógombokra (). Amit valójában csináltunk, a címkében a type attribútumhoz a checkbox értéket, valamint az egyedi azonosítónak megfelelő id="hd-1" azonosítót rendeltük for="hd-1" az aktuális blokk kapcsolója. Rejtsük el alaposan és örökre a jelölőnégyzeteket a display beállításával: none property a .hide osztályban; Valójában itt nincs semmi különös magyarázat, a rejtett blokkok be- és kikapcsolásának teljes mechanizmusa három elemből áll:
Remélem, a kaotikus magyarázatomból mégis kiderült, mi az egész trükk. A CSS új stílusokat alkalmaz (a pszeudoosztályt használva ellenőrizve) a korábban elrejtett tartalomblokk megjelenítéséhez, ha a felhasználó egy olyan elemre kattint, amely egyedi azonosítóval van társítva egy jelölőnégyzethez.
Mindebből az következik fontos jegyzet:
ha több rejtett blokkot használ ugyanazon az oldalon, minden választógombnak rendelkeznie kell egyedi azonosító, amely eltér a többi blokk azonosítóitól.
Tehát szavakkal megfogalmaztuk, hogy mi hova kerül és miért, most nézzük meg a teljes szerkezet html-keretét:
Kattintson ide a megnyitáshoz!
Ezután közvetlenül a CSS-stílusok kialakításához lépünk, amelyek nélkül ez az egész konstrukció nem fog működni. A minimális kód, minden stílus nélkül, csak kiemelte a hátteret a legördülő listához, hogy meghatározza és megjelenítse a rejtett szövegkereteket. A blokkokat tetszés szerint díszítheti, szegélyeket akaszthat, lekerekítheti a sarkokat, kiemelheti a szöveget vagy .
/* jelölőnégyzetek és tartalomblokkok elrejtése */ .hide, .hide + label ~ div ( display: none; ) /* címke szöveg nézet */ .hide + label, .hide:checked + label ( kitöltés: 0; szín: zöld ; kurzor: mutató; szegély-alsó: 1 képpont zöld pontozott aktív a tartalommal */ .hide:checked + label + div ( kijelző: blokk; háttér: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; box-shadow: beszúrt 3px 3px 10px #7d8e8f; kitöltés: 10px; )
Ez mind egy aszketikus példához elégséges minimum. De végül is egyáltalán nem mi leszünk, ha nem akasztunk fel legalább néhány zsemlét, és jobb, ha a felhasználó vizuálisan javasolja, hogy hova kattintson. A második példában egy egyszerű szimbólumot adtam hozzá plusz formájában, ami egyértelműen jelzi, hogy itt valami más van elrejtve, megnyomva azonnal mínuszba változik, a rejtett tartalommal rendelkező blokkoknál pedig egy kis animációt csavartam be, amikor megjelennek, és mindezt kizárólag a CSS3 mágia segítségével.
/* jelölőnégyzetek és tartalomblokkok elrejtése */ .hide, .hide + label ~ div ( display: none; ) /* címke szöveg nézet */ .hide + label ( margó: 0; kitöltés: 0; szín: zöld; kurzor : pointer; display: inline-block; ) /* felirat szöveges nézet, ha aktív a rádiógomb */ .hide:checked + label ( szín: piros; border-bottom: 0; ) /* ha a jelölőnégyzet aktív, a tartalommal rendelkező blokkok megjelenítése */ . 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- árnyék: beillesztés 3px 3px 10px #7d8e8f; margó balra: 20px; kitöltés: 10px; /* egy kis animáció, amikor megjelenik */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease-in 0,5 s; animáció: fade easy-in 0,5 s; ) /* animáció, ha rejtett blokkok jelennek meg */ @-moz-keyframes fade (-től ( átlátszatlanság: 0; ) -ig ( átlátszatlanság: 1 ) ) @-webkit-keyframes fade ( -tól ( átlátszatlanság: 0 ; ) -ig ( átlátszatlanság: 1 ) ) @keyframes fade ( -tól ( opacitás: 0; ) -ig ( átlátszatlanság: 1 ) ) .hide + label:before ( háttérszín: #1e90ff; szín: #fff; tartalom: "\002B"; display:block; balra lebeg; betűméret: 14 képpont; betűsúly: félkövér; magasság: 16 képpont; vonalmagasság: 16 képpont; margó: 3 képpont 5 képpont; szöveg igazítása: középre; szélesség: 16 képpont; -webkit-border-sugár: 50%; -moz-border-radius: 50%; határsugár: 50% ) .hide:checked + label:before ( tartalom: "\2212"; )
Mindent összevetve a módszer kétségtelenül jó, de mint mindig, egyáltalán nem meglepő, most is adódnak gondok az örök haladás fékkel, az IE böngészővel, az álosztállyal ellenőrizve csak a böngésző 9. és újabb verzióit támogatja. Az IE régebbi verzióinál ugyanaz, mint korábban, javascriptet kell használni.
A rejtett jelölőnégyzetek használatával egyszerűen implementálhat , stílusblokkokat, csúszkákat, galériákat és sok mást.
Minden tisztelettel, Andrew
Csatlakozz most!
Már több mint 6000-en iratkoztak fel. Szerezd meg a legújabb cikkeket.
