Űrlap létrehozása HTML-ben. Hogyan készül a legördülő lista html-ben? Űrlaplisták legördülő elemeinek csoportjainak létrehozása

Sziasztok, a blogoldal kedves olvasói. A bonyodalmak tanulmányozása keretében a következő feladatként folytatjuk az oldalon történő űrlapkészítés részleteinek elemzését a megfelelőek felhasználásával.

Ma megtanuljuk, hogyan kell alkotni legördülő (legördülő) listák, beleértve a feleletválasztós opciókat, a kijelölés és az opció használatával, hogyan kell összeállítani szöveges mezőben textarea segítségével, és beszéljünk az űrlapok funkcionalitásának kiterjesztésének lehetőségéről is címkék használatával mezőkészlet, címke és jelmagyarázat.

Hadd emlékeztesselek arra, hogy az oldalon található bármely űrlap a felhasználótól származó információk bevitelére és a szerverre történő elküldésére szolgál (példa -).

Sajnos a hiperszöveges jelölőnyelvi eszközök nem teszik lehetővé ezen információk közvetlen feldolgozását, így a HTML-lel csak az űrlap megjelenését hozzuk létre, és a szükséges adatokat elküldjük feldolgozásra. Ebből a célból egy speciális fájlt célzottan hoznak létre a webszerveren, amely valamelyik szervernyelven (leggyakrabban PHP) van írva. Mondjuk visszajelzés céljából létrehozhat egy mail.php fájlt, amely a kezelő lesz.

Az ebben a kiadványban kapott információk gyakorlati felhasználása során ne felejtse el, hogyan kell kinéznie, ahol az összes látható oldalelem kódja, beleértve az űrlapokat is, mindig a törzscímkén belül található.

Ez az információ elengedhetetlen, mert még ha minden modern beépített fejlesztői eszközt használ is (emlékeztem, hogy ennek a funkciónak az első jele volt), világosan meg kell értenie a fő címkék használatának mechanizmusát, majd a HTML szerkesztését. kód, amelynek igénye időről időre felmerül, szórakoztató tevékenységgé válik.

2. többszörös- ez a paraméter nélküli attribútum többszörös kijelölést tesz lehetővé, ellentétben a fenti példával, ahol csak egy elemet (sort) lehet kijelölni. Próbáljon meg egyszerre több sort kijelölni ebben a listában az egérrel (egyenként tetszőleges helyen, lenyomva tartva a Ctrl billentyűt, vagy a sorban egymás után következő Shift segítségével):

3. méret- beállítja a legördülő lista magasságát, azaz a megjelenített sorok számát. Ha a többszörös attribútum jelen van, és a méret nincs megadva (mint a fenti példában), akkor alapértelmezés szerint négy sor jelenik meg, és például size="5" esetén öt lesz látható:

Opció Textarea Label Fieldset Legend

4. Kívánt(nincs paramétere) - megadja, hogy a kezelőnek való adatküldés előtt választani kell. Ha nincs kiválasztva egy elem a listából, akkor az űrlapadatok nem kerülnek elküldésre:

Opció Textarea Label Fieldset Legend

5. autofókusz(nem számít) az oldal betöltése után közvetlenül a listára állítja a fókuszt. Ezen túlmenően, ha a felhasználó hozzászokott ahhoz, hogy a legtöbb műveletet a billentyűkkel hajtsa végre, akkor egy ilyen előre konfigurált élességállítás segít kiválasztani a listából a billentyűzet nyilai segítségével az egér használata nélkül:

6. Tiltva(nincs paraméter) - blokkolja a hozzáférést a listához (letiltja). A gyakorlatban általában szkriptekkel együtt használják olyan esetekben, amikor csak bizonyos feltételek teljesülése esetén kell engedélyezni egy legördülő listát:

7. Forma— összekapcsolja a listát egy vagy több olyan űrlappal, amelyhez tartozik, de kívül esik a tárolón

. Ugyanakkor a paraméter a form attribútum értékének szerepébe kerül globális azonosító attribútum, amely hozzáadódik az űrlapcímkéhez:

Válassza ki a listából az Option Textarea Label Fieldset Legend lehetőséget

Ne keverje össze a select címke attribútumait az űrlap létrehozásához használt fő címkével. A fenti példában az id="data" attribútum a form címkéhez, a form="data" attribútum pedig a select címkéhez lett hozzáadva, ami lehetővé tette a legördülő lista egy adott űrlaphoz való társítását.

opciós címke attribútumai

1. érték- meghatározza a legördülő listából azt az értéket, amely a szervernek (űrlapkezelőnek) kerül elküldésre. Valójában a név elküldésre kerül a kezelőnek, amelyet a select címke name attribútuma állít be, és érték(ebben a példában - 1, 2, 3, 4, 5), a legördülő lista kiválasztott sorának megfelelően:

Opció Textarea Label Fieldset Legend

2. Tiltva— blokkolja a legördülő lista elemét a kiválasztáshoz.

Opció Textarea Label Fieldset Legend

Amint a példából látható, az "Opció" sor inaktív, és nem választható ki.

3. címke- megjeleníti a lista egyik vagy másik elemének szöveges tartalmát (ami annak értéke). Ha a címke jelen van, akkor az attribútum értékével megegyező karakterlánc jelenik meg, és az opciócímkén belüli szöveges tartalom figyelmen kívül marad. Ugyanez történik, ha a tartalom között teljesen hiányzik.

Textarea tag Címkecímke Mezőkészlet címke Jelmagyarázat címke

Lát. A fenti példában az opció első sora a kódban üres (a táblázat bal oldalán), de a label="Option tag" paraméter megadva van, ennek eredményeként ez a szöveg megjelent a listában (a a jobb oldal). A második kódsorban a "Textarea Tag" szöveg található az opciós címke tartalmaként, de a jobb oldali legördülő listában a "Textarea" szó látható, amely megegyezik a label="Textarea" értékével.

4. Kiválasztott- kiemeli a legördülő lista aktuális elemét:

Opció Textarea Label Fieldset Legend

Ha a több attribútum jelen van, akkor egynél több elem is kiválasztható:

Opció Textarea Label Fieldset Legend

optgroup címke attribútumai

Ha a legördülő listát valamilyen módon rendezni kell, például csoportokra osztani, akkor ezekhez a csoportokhoz egy-egy konténer kerül felhasználásra, amely a nyitó és záró optgroup címkékből áll, és amely a legördülő lista elemeinek egy részét tartalmazza. Az ilyen legördülő lista testreszabásához azonban két attribútum szükséges.

1. címke- beállítja az egyes csoportok nevét paraméterként:

Opció Textarea Label Fieldset Legend

Ugyanaz, de a select címke többszörösével és size="7"-vel:

Opció Textarea Label Fieldset Legend

2. Tiltva(nincs érték) - blokkolja a csoport azon elemeinek kiválasztását, amelyekhez képest be van állítva, ráadásul az inaktív elemek általában szürkén jelennek meg:

Opció Textarea Label Fieldset Legend

Itt nagy segítség lenne egy rövid videó:

Szövegmező űrlapon keresztül textarea

A webhely másik űrlapeleme, amelyet figyelembe veszünk, egy olyan mező, amelybe többsoros szöveget írhatunk be. A textarea tag segítségével hozható létre. Alapértelmezett attribútumok nélkül a címke alkalmazása a következő eredményt eredményezi:

Írja be a szöveget:

Írja be a szöveget:

A mezőben sortöréseket hajthat végre, miközben a szöveg átkerül a szerveren lévő kezelőbe, figyelembe véve a változtatásokat. A két átlós csíkkal jelölt jobb alsó sarkot egérrel megfogva a mezőt szélességben és hosszban is nyújthatjuk.

Most próbáljunk meg néhány paraméterrel rendelkező attribútumot hozzáadni az eredeti kódhoz:

1. Név- Megadja a szövegterület nevét értékként, amely azonosítja azt az űrlapadatok elküldése után, amikor azokat a szerveren feldolgozzák.

2. Cols- mezőszélesség, amelyet paraméterként az egymás mellett álló, vízszintesen elhelyezett azonos karakterek száma határoz meg. Az alapértelmezett érték 20.

3. Sorok- a szövegmező magassága, amelyet a sorok száma határoz meg. Ha a felhasználó által beírt szövegsorok száma nagyobb, mint az attribútum által megadott érték, egy függőleges görgetősáv jelenik meg a jobb oldalon.

4. Maxlength- Meghatározza a szövegmezőben elhelyezhető karakterek maximális számát. A határérték túllépése esetén a további bevitel nem lehetséges.

Az alábbiakban látható egy példa a fenti attribútumok mindegyikére, amelyek mindegyikének hatását ellenőrizheti úgy, hogy egyszerűen elhelyezi a kívánt számú betűt és sort a szövegmezőbe (egyszerűen többször is beírhatja ugyanazt a karaktert):

Írja be a szöveget:

Írja be a szöveget:

5. minhosszúság- Meghatározza a szövegmezőbe beírandó karakterek minimális számát. Ha a felhasználó megpróbál kevesebb karakterből álló szöveget beküldeni, akkor a böngésző egy rövid üzenetet jelenít meg, amely tartalmazza az űrlap tartalmának kitöltésének szükségességét és azt, hogy hány karaktert írt be már.

7. Csak olvasható(paraméterek nélkül) - ha ez az attribútum a szövegterülethez van csatolva, akkor a szövegmező nem lesz elérhető a felhasználók számára, és csak olvasható lesz. De fókuszálhat rá (vigye a kurzort a mezőre, és kattintson a bal gombbal), valamint kijelölheti és másolhatja (részben vagy teljesen) a szöveget:

Néhány további attribútum, amely további funkciókat valósít meg a mezők kitöltésekor:

8. Automatikus kiegészítés- jelzi, hogy a böngészőnek adjon-e tippeket, amikor a felhasználó a korábban megadott adatok alapján kitölti az űrlapot, és lehetővé teszi a megfelelő szöveg automatikus beszúrását.

Van összesen két paraméter: tovább(be) és ki(kikapcsolva). Itt van egy példa kód:

Írja be a szöveget:

Ez az attribútum „be” értékre állítva csak akkor működik, ha a felhasználó webböngészőjében engedélyezve vannak az űrlapmezők automatikus kitöltése.

9. Betakar- beállítja a böngésző sortördelési szabályait a szöveges területen három értékkel:

Puha- a mezőbe szélességében nem férő karakterkészlet automatikusan új sorba kerül. Ugyanakkor a processzor a szöveg egyetlen sorként kerül elküldésre. Abban az esetben, ha a felhasználó az "Enter" billentyűvel tetszőleges helyre tördeli a szöveget, akkor az ilyen tördelést elmenti a webes űrlap elküldésekor.

Írja be a szöveget:

Írja be a szöveget:

Kemény- az elválasztás automatikusan megtörténik, ha a szöveg szélességében nem fér bele a mezőbe, és a kezelőnek elküldve az elválasztás helyei mentésre kerülnek. Ez a beállítás csak a következőben használatos a cols attribútummal együtt:

Írja be a szöveget:

Írja be a szöveget:

Ki- sortörések letiltása. Ha mechanikus átvitel nélkül ír be egy szövegrészletet az "Enter" billentyűvel, akkor a teljes szöveg egy sorba kerül, és megjelenik egy vízszintes görgetősáv:

Írja be a szöveget:

Írja be a szöveget:

10. autofókusz(nincs paraméter) – Az űrlapot tartalmazó oldal betöltésekor a szövegmezőre fókuszál.

11. Tiltva- ellentétben az readonly attribútummal (amely ugyancsak tiltja a mező tartalmának szerkesztését, de lehetővé teszi a fókuszálást), teljesen blokkolja a hozzáférést a szövegterülethez, amely általában szürkére van festve:

Üdvözlöm a blogom minden olvasóját. Ma elmondom, hogyan kell legördülő listát készíteni html-ben, milyen címkéket és attribútumokat kell használnia, és azt is, hogy milyen célokra lehet szüksége rá.

A címke kiválasztása és egy legördülő lista létrehozása

Így a html-ben egy legördülő lista jön létre egy páros select tag segítségével, amelyben páros opciós címkék kerülnek elhelyezésre. Ezekben rögzítik az összes lehetőséget, amelyet a listára kattintva kínálnak fel. Példa:

Válassz egy állatot

Ebben az esetben az opció nyitó és záró része között megjelenik a képernyőn, és a value attribútumban szereplő érték elküldésre kerül a szervernek, vagy egy szkript segítségével kerül feldolgozásra.

A html-ben található lista lehet normál és feleletválasztós. Több elem kijelölésének lehetővé tételéhez hozzá kell adni egy üres többszörös attribútumot a kiválasztáshoz. Több érték kiválasztásához tartsa lenyomva ctrlés nyomja meg a bal egérgombot.

Egy másik hasznos tulajdonság a méret. Lehetővé teszi annak kiválasztását, hogy hány sort jelenítsen meg a legördülő listában.

Egy másik attribútum le van tiltva. Elérhetetlenné teszi a listát kattintásra és elemek megtekintésére, ugyanakkor látható az oldalon.

Szükséges egy html5 attribútum. Ha be van állítva, az űrlap csak akkor kerül elküldésre, ha kiválaszt egy értéket a legördülő listából. Általában kötelező választássá válik. Míg az attribútum nem működik minden böngészőben.

opciós címke attribútumai

Valójában a select csak a listaelemek tárolójaként szolgál, maguk az opció címkével vannak beállítva. Érték paraméterrel rendelkezik, mint azt már megtudtuk, de ezen kívül van még más is. Például:
Letiltva – a listaelem nem választható ki. Megjelenik, de nem lehet rákattintani.

Kijelölve – Az elem alapértelmezés szerint ki lesz jelölve. Normál listában ez az érték nélküli attribútum csak egy elemre, többszörös listában többre állítható be.

Fontos magyarázat a helyes működéshez

Ha a kiválasztás eredményét el kell küldeni a szervernek, vagy szkripteken keresztül kell feldolgozni, akkor a kijelölést helyezze az űrlapba, hogy ne legyen hiba. A helyzet az, hogy a legördülő lista eredetileg pontosan az űrlapelemek egyikeként jött létre.

Mire való a kiválasztás?

Általában hasznos lehet az Ön számára, ha regisztrál a webhelyére, vagy felmérést szeretne végezni. Az elemnek van egy hátránya - a css-n keresztül nem nagyon változtatja meg a megjelenést.

Alapértelmezés szerint a listára kattintva egy kék keret jelenik meg, amely ugyanazzal a színnel emeli ki azokat a listaelemeket, amelyek felett a kurzor áll. Ha rákattint, a keret ne jelenjen meg, vagy más színnel legyen kiemelve, a következő választót írja be:

select:focus(
körvonal: 1 képpont tömör narancssárga;
}

A keret most narancssárga lesz.

Az opció stílusozható is, de ha egy elem fölé viszi az egérmutatót, a háttere kékre vált, és ez valamiért nem változik a stílusokon keresztül.

Választási lehetőség(
szín: barna
háttér: aqua;
}

Egyébként talán valaki tudja, hogyan lehet css segítségével megváltoztatni a háttérszínt, ha egy elem fölé viszi az egérmutatót?

Valójában ez a select címkéről és annak alkalmazásáról szól. A html-ben nem biztosítanak további funkciókat. Az összes többi műveletet elvégezhetjük javascript és php segítségével. Például, ha listát kell készíteni a születési év kiválasztásához, és lehet, hogy 80-100 különböző lehetőség van, nem írnád meg kézzel?

Csak ehhez programozást kell használni, nevezetesen a hurkot. Nos, oké, ez egy másik beszélgetés témája, de mára ez az összes információ, amit el akartam mondani. A többi alapvető címkével is megismerkedhetsz 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 válasszon egy opciót egy 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 meghatározza a címkék használatával választható lehetőségeket
  • 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

Így érhető el ez az érték HTML kiválasztási opció 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-kiválasztás értékének megállapítására:

".$_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 kell stílusozni 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">

Ebben a példában 2 csoportot választottunk ki a címkével . Az elem címke attribútuma a kiválasztott csoport nevét adja meg félkövérrel:

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

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

Példánk eredménye:

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

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

Ebben a példában két legördülő listát hoztunk létre. Az első listánál a disable 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


type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}

Ebben a példában két szövegterületet hoztunk létre (elem