Hogyan készül a legördülő lista html-ben? Űrlap létrehozása HTML-ben Hogyan készítsünk oldalkijelölést html-ben

A HTML opciócímke legördülő lista létrehozására szolgál, amely lehetővé teszi a felhasználó számára, hogy egy lehetőséget válasszon az előre meghatározott értékkészletből.

A felhasználó számára látható szöveg eltérhet a value attribútumban megadott szövegtől. A következőképpen hozhat létre legördülő listát:

A legördülő lista a címke használatával jön létre adjon meg opciókat a címkék használatával történő kiválasztáshoz
A címkében

CSS-osztályt is beállíthat ahelyett, hogy azonosítót használna a legördülő menü stílusához.

A következő részben példákat mutatok be a HTML legördülő lista JavaScript/JQuery használatára. A példák azt is bemutatják, hogyan kell stílust készíteni

Az érték attribútum használata

Ahogy korábban említettük, az value attribútum értéke eltérhet az oldalon megjelenő szövegtől. Például megjelenítheti az országok vagy színek nevét a felhasználók számára, és rövid kódokat használhat az érték attribútumban.

A következő példában létrehozunk egy legördülő listát egy érték attribútummal:

Tekintse meg az online bemutatót és kódot

Címkéhez

Példa a kiválasztott beállítás elérésére JavaScriptben

Most hozzunk létre egy példát a kiválasztott opció értékének eléréséhez és néhány művelet végrehajtásához. Ugyanazt a listát, mint a fenti példában, színválasztékkal hozzuk létre. Miután kiválasztotta, kattintson a gombra, hogy ezt a színt alkalmazza a dokumentumra:

Tekintse meg az online bemutatót és kódot

A HTML beállítás értéke a következő kódot használja:

A következő kódsort használják a JavaScriptben az opció érték attribútuma értékének eléréséhez az érték eltér a szövegtől. A szín kiválasztása után a jQuery megjeleníti a figyelmeztetésben látható szöveget. Címkekód

A következőképpen érhető el ez az érték HTML kiválasztási lehetőség kiválasztott JavaScript:

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

Az értéket a jQuery $.val() metódusával is elérheti:

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

Cserélje ki ezt a sort a fenti példában, és a kód a rövid kód/szín értéket jeleníti meg a value attribútumban a látható szöveg helyett.

Példa egy érték megszerzésére egy PHP szkriptben

Ebben a példában a legördülő listából kiválasztott opció értékének lekérésére az űrlap a címke használatával jön létre

És a következőképpen használható a PHP-szkript a HTML-választás opció értékének meghatározásához:

".$_POST["selphp"].""; } ?>

Ha az űrlap rendelkezik GET metódussal, akkor használja PHP tömb $_GET[""].

Legördülő stílusok meghatározása CSS-sel

Most nézzük meg, hogyan alakítsuk ki a legördülő listát.

Ebben a példában címkézzük

A böngészőben így néz ki:

Menüpontok csoportosítása

Tekintsük a következő címkét A, amely a kapcsolódó adatok csoportosítására szolgál egy legördülő listában name="black&white"> label="whitelist">

BAN BEN ezt a példát 2 címkével ellátott csoportot azonosítottunk . Az elem címke attribútuma a kiválasztott csoport nevét vastagon szedve adja meg:

A következő példában a letiltott logikai attribútum használatával letiltunk egy csoportot (" B csoport"):

Példa egy HTML-címke tiltott attribútumának használatára <optgroup>

Példánk eredménye:

A lista és a többszörös kijelölés letiltása

A címke letiltott és több attribútuma <select>

Ebben a példában két legördülő listát hoztunk létre. Az első listánál a disposit attribútumot használtuk, ami megakadályozza a listával való interakciót (letiltja).

A második listához a multiple attribútumot használtuk, ami azt jelzi, hogy a listában egyszerre több lehetőség is kiválasztható (via ctrl Windowson és azon keresztül parancs Mac rendszeren).

A böngészőben így néz ki:

Szöveg terület

Példánk eredménye:

A szöveges terület letiltása

A korábban figyelembe vett elemekkel analóg módon a címke rendelkezik egy letiltott logikai attribútummal, amely meghatározza, hogy a szöveges területet le kell tiltani (nem érhető el a felhasználói beavatkozáshoz). Az attribútum használható például szkriptekkel együtt, amíg valamilyen feltétel nem teljesül, az elem inaktív. Nézzünk egy példát a felhasználásra: <!DOCTYPE html> <html> <head> <title> A címke letiltott és név attribútumai <textarea></title> </head> <body> <form> <textarea name = "userInfo" > A szövegmező kitölthető. A szövegmező nem tölthető ki.

), az első és a második területhez egyedi neveket állítunk be a name attribútummal. A második szöveges területnél a letiltott attribútummal megadtuk, hogy az oldalbetöltéskor le lesz tiltva. Ezenkívül az űrlapon belül elhelyeztünk egy gombot, amely az űrlap beküldésére szolgál (elem <input>gombtípussal "űrlap beküldése": type = "submit" ). Példánk eredménye: <h2>Szövegterület elemleírás</h2> Ezért megvizsgáljuk az utolsó példát, és továbblépünk a cikk gyakorlati feladatához ebben az oktatóanyagban. Az attribútumnak köszönhetően (HTML tag <textarea>) megadhat egy tippszöveget, amely leírja a felhasználó által az elembe beírandó várható értéket. Az eszköztipp szövege el van rejtve, amikor a felhasználó értéket (bármely karaktert) ír be a szövegmezőbe, ha törli, az eszköztipp ismét megjelenik. Nézzünk egy példát a felhasználásra: <!DOCTYPE html> <html> <head> <title> helyőrző és csak olvasható címke attribútumok <textarea></title> </head> <body> <form> <textarea placeholder = "Adja meg az információkat a szövegmezőben"> "A mező csak olvasható" csak olvasható >
type = "submit" name = "submitInfo" value = "submit" > !}

Ebben a példában két szövegterületet hoztunk létre (elem ), az első és a második területattribútumhoz beállítunk egy tippet a felhasználó számára, amely halvány szövegszínnel jelenik meg az elemen belül. A második szövegterületnél az readonly attribútummal jeleztük, hogy csak olvasható lesz (a tartalom nem módosítható). Vegye figyelembe, hogy ha a szövegmező csak olvasható, akkor a tartalom nem módosítható, de a felhasználó továbbra is navigálhat a tartalomhoz, kiválaszthatja és másolhatja. Ezenkívül az űrlapon belül elhelyeztünk egy gombot, amely az űrlap beküldésére szolgál (elem <input>gombtípussal "űrlap beküldése": type = "submit" ). Példánk eredménye: <h2>Kérdések és feladatok a témában</h2> Mielőtt továbblépne a következő témára, végezze el a gyakorlati feladatot: <ul><li>A megszerzett ismeretek felhasználásával állítsa össze az alábbi űrlapot az álláshirdetéshez:</li> </ul>Mielőtt folytatná a feladatot, nyissa meg a példát egy új ablakban, és alaposan vizsgálja meg az űrlapot, hogy minden pontját megismételje. A feladat elvégzéséhez tudásra lesz szüksége a cikkből. Ha lemaradtál róla, gyere vissza, hogy tanulmányozd. A gyakorlat befejezése után ellenőrizze az oldal kódját úgy, hogy egy külön ablakban nyissa meg a példát, hogy megbizonyosodjon arról, hogy mindent helyesen tett. Üdvözlöm a blogoldal kedves olvasóit. Ma olyan dolgokról szeretnék beszélni, mint a HTML-űrlapok. Bármi is legyen a webhely motorja (cms), minden bizonnyal a Form és Input címkékkel létrehozott űrlapokat használja, valamint a Gomb, Checked, Value, Checkbox, Radio, Checkbox, Submit attribútumok és paraméterek segítségével.Nos, ehhez is hozzáadhat elemeket legördülő listák és szövegmezők létrehozásához - Select, Option, Textarea, Label, Fieldset, Legend.<h2>Miért van szükség az űrlapokra, és hogyan működnek a modern webhelyeken</h2>Ugyanaz a webhelykeresési karakterlánc () jön létre ezekkel a címkékkel, és ennek megkeresése kötelező lesz a projektben. Ezért az elrendezésük és a munka megértése egyáltalán nem akadályozza a tervezés sikeres munkáját, és nem lesz felesleges az önreklámozáshoz és a promócióhoz.Úgy gondolom tehát, hogy ezen elemek tanulmányozásának szükségességével indokolt, ne legyen több kérdés, ezért itt az ideje, hogy közvetlenül a lehetséges lehetőségek tanulmányozására térjünk át.Igen, arra is szeretnélek emlékeztetni, hogy a hipertext jelölőnyelv témájában már sok anyagot sikerült átgondolnunk, például három ) és .Az űrlapok lényegében olyan elemekből állnak, amelyek létrehozásához különféle címkéket illesztenek be a fő tárolóba a Form címkékből - Checked, Value, Checkbox, Radio, Checkbox, Submit stb. Csak el kell helyeznünk a kódját a megfelelő helyen. ezt a webhelysablont, amely a címkék és attribútumok segítségével határozza meg, hogyan nézzen ki.Ez lehet egy szövegdoboz a beírt kérés elküldése gombbal, a választógombok választási lehetőségei (ahol csak az egyik gomb hagyható lenyomva), több szövegdoboz elküldés gombbal () stb.Például a "keresés" esetén a Value attribútummal megadható, hogy a lekérdezés beviteli mezője mellett található gombra mi legyen pontosan írva. Az űrlapokon megadott adatokat valamilyen módon tovább kell feldolgozni.Például abban az esetben <a href="https://sukachoff.ru/hu/noutbuki/obratnaya-svyaz-na-youtube-kak-obshchatsya-s-podpischikami-i-uvelichit-ih-chislo/">Visszacsatolás</a> a felhasználó a nevével ellátott mező kitöltése, az e-mail és az üzenet szövegének beírása, majd a küldés gombra kattintva remélheti, hogy az űrlap adatait elküldi az oldal E-mail címére szerző. De ennek megvalósítása egyetlen hiperszöveg jelölőnyelvvel () sajnos nem lehetséges.Ehhez egy speciális kezelőprogramra van szükség, amely a küldés gombra kattintás után a visszajelzési mezőkben található összes adatot elküldi az erőforrás e-mail tulajdonosának. Melyik program fogja ezt megtenni, meg kell adnia magának az Action attribútum használatával.A feldolgozó program általában egy beírt szkript <a href="https://sukachoff.ru/hu/virusy/yazyk-muzhchin-search-item-php-i-zhivoi-poisk-na-bitriks-primer-realizacii/">PHP nyelv</a>. Ezért be <a href="https://sukachoff.ru/hu/router/kak-sdelat-algoritm-poiska-po-neskolkim-slovam-na-php-iz-bd-php-self-v/">Action attribútum</a> Címke űrlapon regisztrálnia kell a szkript fájljának elérési útját, amely a tárhely szerverén található. Példaként adok egy előfizetést <a href="https://sukachoff.ru/hu/vosstanovlenie/adres-rss-lenty-pochty-kak-podpisatsya-na-rss-e-mail-podpiska-ili-rss-chto-luchshe/">RSS feed</a> blogom e-mailben:Egy kicsit talán homályosnak tűnik elsőre, de úgy gondolom, hogy a történet előrehaladtával minden világosabb lesz.<h3>Űrlap- és beviteli címkék gombok, jelölőnégyzetek és rádiógombok létrehozásához</h3>Bármely űrlapot nyitó és záró címkékbe kell zárni Forma. Ez egyfajta konténer a létrehozásukhoz. Ennek a címkének számos kötelező és nem kötelező attribútuma van:<ol><li>Név – egyedi név, amelyet meg kell adni, ha a <a href="https://sukachoff.ru/hu/virusy/kak-preobrazovat-html-fail-v-pdf-fail-kak-preobrazovat-html-fail-v-pdf-fail-konverter/">html fájl</a> ahol csinál valamit, a rendszer több webes űrlapot használ</li><li>Action - egy kötelező attribútum, amely jelzi a szkript elérési útját, amelyre az adatokat továbbítják további feldolgozás céljából</li><li>Módszer – segítségével módosíthatja az adatok átvitelének módját erről a webes űrlapról a kezelőfájl szkriptébe. Ha nem adjuk meg, akkor alapértelmezésben a Get metódus kerül alkalmazásra, amely valójában elsősorban változókra és rövid üzenetekre, valamint nyílt módon adattovábbításra szolgál. <a href="https://sukachoff.ru/hu/remont/bystryi-poisk-po-stranice-sochetanie-klavish-ispolzuem-goryachie-klavishi-v/">címsor</a> böngésző. Az űrlapadatok átadásához a kezelő szkriptnek még mindig jobb ezt használni POST módszer, amelyet kifejezetten szöveges üzenetek zárt módon történő továbbítására terveztek</li> </ol>Nézzük meg a többi címkét, amelyek lehetővé teszik különféle webes űrlapok létrehozását. A legsokoldalúbb az Bemenet. Belül a Type attribútumot kell írni, ami meghatározza, hogy pontosan milyen is legyen az ezzel a címkével létrehozott HTML űrlap.Az Input and Type segítségével a következő elemeket hozhatja létre:<ol><li>egysoros szövegmezők (Type="Text")</li><li>jelszó mezők (Type="Password")</li><li>jelölőnégyzetek (Type="Checkbox")</li><li>rádiógombok (Type="Radio")</li><li>rejtett mezők (Type="Hidden")</li><li>normál gombok (Type="Button")</li><li>gombok az adatok kezelőhöz történő elküldéséhez (Típus="Küldés")</li><li>gombok a webes űrlap eredeti állapotba hozásához (Type="Reset")</li><li>mezők a fájlok szerverre való feltöltéséhez (Type="File)</li><li>képgombok (Type="Image")</li> </ol>A bemenetnek nincs záró címkéje. Hogy pontosan mi lesz a vele készített webes űrlap, az teljes mértékben a Type attribútumban megadott paramétertől függ. Ha a Típus nincs megadva, akkor alapértelmezés szerint egy szövegmező jön létre.<h3>Példák a bemeneten létrehozott űrlapokra, amelyek típusa különböző értékekkel rendelkezik</h3> <h3>Az Input címke egyéb attribútumai és példák a használatukra</h3>Fontolja meg, mire való a többi attribútum:<ol><li>Név - ha az adatokat a kezelő program parancsfájljába kell küldeni, akkor meg kell adni egy paramétert a Name attribútumhoz. Ezen a néven jelennek meg az adatkezelő programban az űrlapról leadott adatok.</li><li>Méret - segítségével beállítható a létrehozott webes űrlap mezőjének mérete. Az érték az ebbe a mezőbe elférő karakterek számában van megadva. Ha a Méret nincs megadva, a szélesség alapértelmezés szerint 24 karakter lesz.</li><li>Maxlength - alapértelmezés szerint a Html űrlapba beírható karakterek száma nincs korlátozva, de a Maxlength segítségével beállíthatja ezt a korlátot. A feltüntetettnél több karaktert nem lehet beírni a mezőbe</li><li>Érték - ezzel beállítható, hogy a mezőbe vagy az adatküldés gombra alapértelmezés szerint pontosan mi kerüljön kiírásra</li><li>A Checked egy zászlóattribútum, amely beilleszthető a rádiógombok (rádió) vagy a jelölőnégyzetek (checkbox) bevitelébe. Ebben az esetben ez a választógomb vagy jelölőnégyzet akkor lesz aktív, amikor betöltődik a webes űrlapot tartalmazó oldal (már lesz pipa)</li> </ol>Most nézzünk meg mindent űrlappéldák az Input segítségével. A szövegmező megjelenése hasonló a jelszómező megjelenéséhez, ezért csak a Szöveg létrehozásának lehetőségét vesszük figyelembe, például e-mail cím megadásához:<img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png' width="100%" loading=lazy loading=lazy>Most nézzük meg a webes űrlap létrehozását rádiógombokkal (rádió):<img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-45-36.png' width="100%" loading=lazy loading=lazy>Vegye figyelembe, hogy ez az űrlap kétszer használja az Input címkét, egyszer a két rádiógomb létrehozásához. Sőt, mindegyik tartalmaz <a href="https://sukachoff.ru/hu/programmy/chto-takoe-dom-html-osnovy-raboty-s-dom-v-javascript-vybor-elementov-po/">Név attribútum</a> azonos értékkel (resultat), de az Érték értéke eltérő (IGEN és NEM).Ez azt jelenti, hogy a feldolgozás során, ha valamelyik választógombot kiválasztjuk, akkor egy változó kerül elküldésre, aminek a neve a Névben van írva, de ennek a változónak az értéke attól függ, hogy melyik választógombot választottuk ki.Tekintsük a jelölőnégyzetekkel rendelkező webes űrlap létrehozásának példáját (Checkbox):<img src='https://i1.wp.com/ktonanovenkogo.ru/image/26-06-201323-46-30.png' width="100%" loading=lazy loading=lazy>A jelölőnégyzetek abban különböznek a választógomboktól, hogy egyszerre több opciót is kiválaszthatnak. A név határozza meg a kezelőfájlban, hogy a jelölőnégyzetek melyik jelölőnégyzetben vannak beállítva, az érték pedig azt az értéket adja meg, amelyet a kezelőnek küldeni kell (ha az Érték nincs beállítva, akkor a jelölőnégyzet mellett található szöveg kerül elküldésre a kezelőnek ).<h2>Kijelölés, Opció, Szövegterület, Címke, Mezőkészlet, Jelmagyarázat – legördülő listák, szövegterületek és egyéb webes űrlapelemek</h2>Először is szeretném egy kicsit emlékeztetni, hogy valójában mik is a webes űrlapok, és miért van szükség rájuk a webhely oldalain. Elsősorban arra készültek, hogy felhasználóbarát formában megismételjék a bármely operációs rendszerben elérhető elemeket: gombok, szövegbeviteli mezők, legördülő listák, jelölőnégyzetek, kapcsolók és hasonlók.Minden felhasználó minden további magyarázat nélkül megérti ezen elemek célját, és ha egy HTML űrlapgombot lát, akkor megérti, hogy rá kell kattintania.Sőt, minden alkotóeleme (pl. Select, Option, Textarea, Label, Fieldset, Legend) már kész üres (containers), amelyek beillesztéséhez elég csak a kívánt címkét használni a szükséges attribútumokkal és paraméterekkel.A böngészők maguk is tudják, hogyan kell megjeleníteni egy adott webes űrlapelemet. Igaz, ugyanazon elem megjelenítési lehetőségei <a href="https://sukachoff.ru/hu/vosstanovlenie/udalenie-parolei-v-brauzere-ochistka-kesha-raznyh-brauzerov-universalnyi/">különböző böngészők</a> kissé eltérhetnek egymástól, de általában nem jelentősen.Hogy. Kiderült, hogy a HTML-ben lévő webes űrlapok kulcsátviteli kísérletek bármely operációs rendszerben használt elemek, weboldalak oldalaira. De miért lehet rájuk szükség az oldal oldalain?Elvileg ugyanarra a célra, amelyhez hasonló elemeket használnak <a href="https://sukachoff.ru/hu/internet/vidy-operacionnyh-sistem-i-ih-kratkaya-harakteristika-operacionnye-sistemy/">operációs rendszer</a>— adatátvitel a felhasználótól. Űrlapok esetén a felhasználó adatai a szerverre kerülnek, ahol azok feldolgozásra kerülnek <a href="https://sukachoff.ru/hu/windows/skanirovanie-shtrih-koda-onlain-skanirovanie-qr-kodov-na-androide-s/">speciális program</a>(A hiperszöveg jelölőnyelv sajnos nem teszi lehetővé az adatfeldolgozást).Bár az adatok nem csak a szerverre küldhetők, hanem például ezen keresztül is <a href="https://sukachoff.ru/hu/windows/nastroika-korporativnoi-pochty-na-telefone-kak-polzovatsya-korporativnym-adresom-elektronnoi-pochty/">email</a> a Form címke Action attribútumában megadott címre. Kiszállításkor <a href="https://sukachoff.ru/hu/virusy/parser-kontenta-vnedrenie-parsinga-xml-yml-failov-kak-vygruzit-tovary-v/">html adatok</a> a mezőket kitöltő felhasználó E-mailjére, az adatküldés gombra kattintás után a <a href="https://sukachoff.ru/hu/virusy/pochtovaya-programma-bat-nastroika-pochtovoi-programmy-the-bat/">levelező program</a> alapértelmezés szerint a számítógépén használja.A nyitó Form címkének így kell kinéznie: <form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain"> <h3>A Select és az Option legördülő címkék</h3>A legördülő listákkal rendelkező mezőket létrehozó összes webűrlap-elem ugyanígy jön létre. Először is a kombinált tárolót a nyitó és záró Html Select címkék segítségével határozzuk meg. Ezután ezen a tárolón belül külön tárolók jönnek létre a lista elemeivel (elemeivel). Ez az Option címkék nyitásával és bezárásával történik.Valami ilyesmi derül ki:<img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-21-18.png' width="100%" loading=lazy loading=lazy>De ez egy leegyszerűsített kialakítás, mert A Select és az Option számos tulajdonsággal rendelkezik, amelyek meghatározzák a tulajdonságokat és <a href="https://sukachoff.ru/hu/windows/telefon-soni-na-2-karty-obzor-smartfona-sony-xperia-xz2-ochen-dorogoi-i-moshchnyi-yaponskii/">kinézet</a> létrehozandó legördülő listamező.<ol><li>Név – Egyedi nevet kell megadnia ennek a Select funkcióval létrehozott webes űrlapelemnek. Ez a név kerül átadásra a szervernek az adatkezelő programban a változó neveként. A felhasználó által kiválasztott legördülő listaelem Value attribútumának értéke (az Opcióban minden elemnél be van állítva) ennek a változónak az értéke lesz.</li><li>Méret - ezzel beállíthatja a megjelenített elemek számát. Más szóval, a Méret segítségével beállíthatja a lista magasságát, a megjelenített sorok számában mérve. Ha nem adja meg kifejezetten a Méret értéket a Select címkében, akkor a rendszer a legördülő lista alapértelmezett magasságát fogja használni, és ez más lesz, ha a Több attribútum hiányzik vagy jelen van a Selectben: <ol><li>Ha a Kijelölésben megtalálható a Multiple, akkor a webes űrlap legördülő lista magassága alapértelmezés szerint megegyezik az elemeinek számával. Azok. a többszörös kijelölést tartalmazó legördülő lista összes eleme megjelenik. Lásd alább a többes számú példát. Ha a Kiválasztásban a Méret attribútum kisebbre van állítva, mint a tételek száma, akkor a jobb oldalon megjelenik egy görgetősáv.</li><li>Ha a Kijelölésben nincs több lehetőség, akkor a webes űrlap legördülő lista magassága alapértelmezés szerint egy sor lesz. Azok. csak egy sor lesz látható, a többi elem pedig csak a lift gomb megnyomásával (jobbra) lesz elérhető. Lásd alább a példát</li> </ol></li><li>Több – ennek az attribútumnak a Select címkében való hozzárendelése lehetővé teszi egy legördülő lista létrehozását, amely lehetővé teszi több elem egyidejű kiválasztását. Erről az attribútumról az alábbiakban olvashat bővebben.</li> </ol>A legördülő listákat tartalmazó űrlapok két lehetőségre oszthatók. Az első lehetőségnél a mezőnek csak egy elemét (sorát) jelölhetjük ki legördülő listával, a másodikban a Ctrl vagy a Shift billentyű lenyomva tartásával egyszerre több elérhető elemet is kiválaszthatunk.Ebben az esetben a második lehetőségnél az összes kiválasztott pontra vonatkozó adatok elküldésre kerülnek a szervernek. Azt, hogy melyik legördülő lista jön létre, a Select címke Multiple attribútumának megléte vagy hiánya határozza meg.A Select paraméterben a többszöröst adjuk meg, mert egyszerűen Többszörösnek van írva és ennyi. Ha jelen van, akkor létrejön egy legördülő listás webűrlap többszörös kiválasztási lehetőséggel (a Ctrl vagy a Shift lenyomva tartása).A mező egy változata legördülő listával, amelyben lesz többszörös választási lehetőség, valahogy így fog kinézni:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-23-55.png' width="100%" loading=lazy loading=lazy>A jobb oldalon egy példa látható a fenti kódon alapuló, többszörösen kiválasztható legördülő webes űrlapra. Amint láthatja, a Ctrl vagy a Shift lenyomva tartása több elemet is kijelölhet egyszerre.Ha a Select címkében nincs Multiple attribútum, akkor ennek a legördülő listának (sor) csak egy eleme jelölhető ki.<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-25-25.png' width="100%" loading=lazy loading=lazy>Itt látható egy példa, ahol csak egy elem választható ki:Címke Válassza ki a SelectED Website Legend elemet<h3>Option címke attribútumok</h3> <img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-36-11.png' width="100%" loading=lazy loading=lazy>A létrehozott legördülő listában (a Select és az Option segítségével) a csoport fejlécéhez elválasztókat adhatunk hozzá, amelyek betűstílusban eltérnek a többi menüponttól.A legördülő lista elemeiből csoport létrehozásához az Optgroup űrlap nyitó és záró címkéi közé kell zárni, a nyitó Optgroup címkében pedig meg kell adni a Label attribútumot, melynek paramétereként meg kell adni. a kívánt csoport nevét.Például így:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-38-10.png' width="100%" loading=lazy loading=lazy>Címke kiválasztása SelectED Website Legend <h2>Textarea – szövegmező létrehozása egy űrlapon</h2>Van még egy webes űrlapelem, amelyet nem vettünk figyelembe - a Textarea (egy többsoros szöveg bevitelére alkalmas mező). Párosított HTML Textarea címkével jön létre. Sőt, lehetőség van benne szöveget egy új sorba átvinni, és az átkerül a szerverre, figyelembe véve az átviteleket.Tehát egy többsoros szövegmező létrehozásához meg kell írni egy nyitó és záró Textarea-t, és ezek közé olyan szöveget kell hozzáadni, amely a webes űrlapot tartalmazó oldal betöltésekor látható lesz. A felhasználó ezután törölheti ezt a szöveget, és megírhatja a sajátját. <form> <textarea rows="3" cols="15" name="textt">Mit mondhatsz magadról?

Amint látja, a szövegre való kattintás az elem aktiválásához haszontalan - magának kell rákattintania. A Label címke pontosan ezt az állapotot hivatott javítani. Lehetővé teszi a webes űrlap elem melletti szöveg kattinthatóvá tételét, ami kétségtelenül a használhatóság javítása.

De hogyan kell kötni HTML elem formák és szöveg? Ehhez az attribútumhoz egyedi paraméterrel rendelkező azonosítót kell hozzáadni, a szöveget pedig nyitó és záró Label tagekkel kell körülvenni. És ez még nem minden. A nyitó Label tag-be a For attribútumot kell beírni, melynek paraméterének pontosan meg kell egyeznie a form elem Html tagjában található ID attribútummal. Valami ilyesmi derül ki:

Mint látható, most a Label használatának köszönhetően a webes űrlapelemek nem csak rákattintással, hanem a mellette található szövegre kattintva is aktiválhatók.

Fieldset és Legend - az űrlap részekre bontása

Valószínűleg gyakran láttad, hogy a HTML-ben a nagy űrlapok csoportokra vannak osztva (Fieldset), amelyek egy keretben vannak bekarikázva, és minden ilyen csoportnak saját fejléce (Legend) van. Ez mindössze két címke használatával valósítható meg: Fieldset és Legend. Párosítva vannak, azaz. kell, hogy legyen egy nyitó és egy záró.

Tehát az alkatrészek egy csoportjának létrehozásához ezeket a részeket be kell zárni a nyitó és záró Fieldset címkékbe. Ahhoz pedig, hogy ennek a csoportnak címet (Legend) állítsunk be, közvetlenül a nyitó Fieldset után kell írni egy konstrukciót a nyitó és záró Jelmagyarázatból, amelyek közé be kell szúrni a csoport címének szövegét.

Íme egy példa csoportok létrehozására Fieldset és Legend használatával:

Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán

Lehet, hogy érdekel

Kiválasztás, Opció, Szövegterület, Címke, Mezőkészlet, Jelmagyarázat - HTML címkék legördülő és szövegdoboz űrlapokat
listák itt html kódot- UL, OL, LI és DL címkék
MailTo - mi ez, és hogyan lehet e-mail hivatkozást létrehozni HTML-ben
A színek beállítása a HTML- és CSS-kódban, az RGB-árnyalatok kiválasztása a táblázatokban, a Yandex eredmények és más programok
Mi az a HTML hiperszöveg jelölőnyelv, és hogyan kell felsorolni az összes címkét a W3C érvényesítőben
Hogyan kell beilleszteni HTML linkés egy kép (fotó) - IMG és A címkék
Táblázatok HTML-ben – Táblázat, Tr és Td címkék, valamint Colspan, Cellpadding, Cellspacing és Rowspan a létrehozásukhoz
Betűtípus (arc, méret és szín), Blockquote és előcímkék – elavult szövegformázás tiszta HTML-ben (CSS használata nélkül)
Hiperhivatkozás létrehozása (A, Href, cél üres), hogyan lehet új ablakban megnyitni az oldalon, valamint a képet linkként tenni a html kódban

HTML-címkék, amelyek meghatározzák a HTML-űrlapokat a webhelyen

Weboldalakat készítünk és egyes oldalak az interneten kommunikálni a látogatókkal.

HTML űrlapok látogatók regisztrálására az oldalon, interaktív szavazáshoz, üzenetküldéshez, vásárlásokhoz és így tovább. HTML Az űrlap egyetlen célra készült: információk összegyűjtésére, majd feldolgozásra történő átvitelére egy programszkriptbe vagy e-mailben.

Minta HTML űrlap | Lépjen be a webhelyre

Címkék, attribútumok és értékek

- határozza meg a formát.
name="" - az űrlap nevét határozza meg.
method="" - meghatározza, hogy az adatok hogyan kerülnek elküldésre az űrlapról. Értékek: "get" (alapértelmezett) és "post" . A "post" módszert gyakrabban használják, mivel nagy mennyiségű adat átvitelét teszi lehetővé.
action="" - meghatározza az url-t, amelyen keresztül az adatokat feldolgozásra küldik. A mi esetünkben - enter_data.php ..
- olyan űrlapelemek meghatározása, mint a gombok, kapcsolók, szövegmezők az adatbevitelhez.
type="text" - meghatároz egy szövegmezőt az adatbevitelhez.
type="password" - meghatároz egy mezőt a jelszó megadásához, miközben a szöveg csillagok vagy körök formájában jelenik meg.
type="checkbox" – rádiógombot határoz meg.
type="hidden" - rejtett űrlapelemet határoz meg - átadásra szolgál további információ a szerverre.
size="25" - a szövegmező hossza karakterben.
maxlength="30" - a bemeneti karakterek maximális megengedett száma.
value="" - meghatározza a feldolgozásra küldendő értéket, ha rádiógombokra vagy választógombokra vonatkozik. Ennek az attribútumnak a szövegmező vagy gomb részeként szereplő értéke a fenti példában például János vagy Bejelentkezés néven jelenik meg.

Minta HTML űrlap | Megjegyzések az oldalon

HTML űrlap példa

Címkék, attribútumok és értékek

action="http://site/comments.php" - meghatározza az url-t, amelyre az űrlap adatai elküldésre kerülnek.
id="" - az űrlapelem nevét, azonosítóját határozza meg.
name="" - az űrlapelem nevét határozza meg.
- definiáljon egy szövegmezőt az űrlapon.
cols="" - meghatározza az űrlap szövegmezőjének oszlopainak számát.
rows="" – Megadja az űrlap szövegmezőjének sorainak számát.

Ha között írjon be szöveget, akkor a dobozban látható példaként, amely könnyen eltávolítható.

Minta HTML űrlap | Legördülő lista

HTML űrlapok

Címkék, attribútumok és értékek

- definiáljon egy listát a választható tételekkel.
size="" - meghatározza a lista látható pozícióinak számát. Ha az érték 1, akkor egy legördülő listával van dolgunk.
- a lista pozícióinak (pontjainak) meghatározása.
value="" - azt az értéket tartalmazza, amelyet az űrlap a megadott URL-re küld feldolgozásra.
selected="selected" – példaként kiválasztja a listaelemet.

Minta HTML űrlap | Lista görgetősávval

A size="" attribútum értékének növelésével egy listát kapunk görgetősávval:

HTML űrlapok

Ennél a lehetőségnél a multiple="multiple" jelzőt használjuk, amely lehetővé teszi több elem kiválasztását. Ennek hiánya csak egy elem kiválasztását teszi lehetővé.

type="submit" – egy gombot határoz meg.

type="reset" – egy reset gombot határoz meg.

value="" - meghatározza a gomb címkéjét.

Lásd még:

A legegyszerűbb HTML legördülő lista könnyen létrehozható a select tag használatával. Ez egy konténercímke, az opciócímkék vannak beágyazva - ezek határozzák meg a lista elemeit.

A listákhoz több lehetőség is van, amelyeket a select tag segítségével készíthetünk: legördülő lista (lehetőségek legördülő menüje a fő mezőre kattintás vagy az egérmutató ráhelyezése után) és egy többszörös kijelölésű lista - amelyben a felhasználó több elemet is kiválaszthat. . Az előbbiek gyakoribbak, a modern oldalak navigációjának jelentős elemei. A többszörös kijelölésű legördülő lista használható például olyan katalógusokban, ahol több termékjellemzőt kell kiválasztani.

Általános és speciális attribútumok használatával módosíthatja a listák megjelenését és tulajdonságait.

válassza ki a címke attribútumait

1. Többszörös – feleletválasztós beállításokat állít be.

2. Méret – beállítja a listában látható sorok számát, azaz a magasságot. És itt minden attól függ, hogy a többszörös attribútum jelen van-e vagy sem. Ha igen, és nem ad meg méretet, akkor ha több van, akkor a felhasználó mindent lát lehetséges opciók ha nincs több, akkor csak egy sor jelenik meg, a többit pedig a jobb oldali lift ikonra kattintva olvashatja el a látogató. Ha a méret magassága be van állítva, és kisebb, mint a lehetőségek száma, akkor a jobb oldalon megjelenik egy görgetősáv.

3. Név - név. A legördülő lista nélkülözheti, de előfordulhat, hogy kapcsolatba kell lépni a kiszolgálón lévő kezelőprogrammal. Általában a név továbbra is feltüntetésre kerül.

A select tag nem rendelkezik kötelező attribútumokkal, ellentétben az opció címkével.

Beágyazott opciócímke-attribútumok

Kiválasztva – egy listaelem kiválasztására szolgál. A felhasználó egynél több elemet is kiválaszthat, ha a többszörös attribútum be van állítva (lásd fent).
Érték – érték. Ez az attribútum kötelező. A webszervernek meg kell értenie, hogy a felhasználó mely listaelemeket választotta ki.
címke. Ez az attribútum használható a túl hosszú listaelemek lerövidítésére. Például a „Milánó” jelenik meg a képernyőn a „Milánó Lombardia közigazgatási központja” opciós címkében megadott helyett. Észak-Olaszország". Ezt az attribútumot egy lista elemeinek csoportosítására is használják.

Ami a lista szélességét illeti, alapértelmezés szerint a lista legszélesebb szövegének hossza. Természetesen a szélesség módosítható HTML stílusok segítségével.

Legördülő lista más módon

Ezzel meg lehet csinálni CSS segítség, például egy lista jelenik meg, amikor az egérmutatót egy oldalelem fölé viszi. A JavaScript kiváló lehetőségeket biztosít listák létrehozására, amelyek munkája leegyszerűsödik jquery könyvtár. Az ezzel a könyvtárral összekapcsolt legördülő lista nagyon összetett lehet, például lépcsőzetes. Vagyis ha egy listában kiválasztunk egy elemet, akkor a következő lista jelenik meg, például van egy „Női ruházat” menüpont (lebegtetéskor, majd valamelyik típus kiválasztásánál pl. „Felsőruházat” lista elemekkel kiesik: dzsekik, parkák, kabátok, rövidkabátok, bundák stb.

Röviden felsoroltuk a legördülő lista létrehozásának főbb módjait. Természetesen sok olyan árnyalat van a JavaScriptben és a JavaScriptben, amelyek lehetővé teszik a listák funkcióinak és megjelenésének megváltoztatását.

Tematikus anyagok: