Kapcsolatok
itthon › ›

HTML űrlapelemek - legördülő lista (kiválasztás, opció, optgroup címkék), szövegmező (textarea), valamint címke, mezőkészlet és jelmagyarázat használata. Kiválasztás a legördülő listából HTML-ben Hogyan válasszunk ki egy oldalt HTML-ben

A kombinált doboz, más néven legördülő menü, az egyik rugalmas és kényelmes űrlapelem. A beállításoktól függően kiválaszthat egy vagy több értéket a listából. A lista előnye a tömörsége és sokoldalúsága a lista egy vagy több sort foglalhat el, és kiválaszthat belőle egy vagy több értéket. A kombinált doboz a következőképpen jön létre.

Címke , amely beállítja a lista magasságát, a lista szélességét a rendszer automatikusan határozza meg a benne lévő szöveg hossza alapján

Címke attribútumok , amellyel módosíthatja a lista megjelenítését.

többszörös

A többszörös jelenléte arra utasítja a böngészőt, hogy jelenítse meg az elem tartalmát



név

Egyedi elemnevet határoz meg hozzáadódik a többszörös attribútum, akkor egynél több elemet is kiválaszthat.

érték

Meghatározza a kiszolgálónak elküldendő listaelem értékét. Egy név/érték pár kerül elküldésre a szervernek, ahol a nevet a címke name attribútuma adja meg



Listaelemek csoportosítása

Ha a lista meglehetősen kiterjedt, érdemes az elemeit blokkokba csoportosítani, hogy a lista egyértelmű legyen és könnyen kezelhető legyen. A címkét erre a célra használják . Ez egy tároló, amelyben a címkék találhatók Az, hogy nincs kiemelve, mint egy normál listaelem, hanem félkövér stílussal van kiemelve, és a tárolóban lévő összes elem eltolódik az eredeti helyétől jobbra. Csoportcím hozzáadásához használja a címke attribútumot a 3. példában látható módon.

3. példa: Listaelemek csoportosítása

HTML5 IE Cr Op Sa Fx

Lista



A példa eredménye az ábrán látható. 1.

Rizs. 1. Csoportosított lista

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 megnézzük, hogyan lehet létrehozni legördülő (legördülő) listák, beleértve a feleletválasztós opciókat, a kiválasztás és az opció használatával, hogyan kell összeállítani szövegmező textarea segítségével, és beszéljünk az űrlapok funkcionalitásának bővíté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 megadására és a szervernek való 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 használatával 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 az egyik 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 megszerzett információk gyakorlati felhasználása során ne feledkezzünk meg arról, 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ó rendkívül szükséges, mert még akkor is, ha az összes beépített fejlesztői eszközt használja (hadd emlékeztessem Önöket, 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 kód szerkesztése, melynek igénye időnként felmerül, kellemes 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, a Ctrl billentyűt lenyomva tartva, vagy a Shift billentyűvel, egymás után követve):

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 értéke 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) – azt határozza meg, hogy ki kell választani, mielőtt adatokat küldene a processzornak. 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 azonnal 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 billentyűkkel hajtsa végre, akkor egy ilyen előre konfigurált fókuszálás segít kiválasztani a listából a billentyűzeten lévő nyilak 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 a legördülő listát:

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

. Ebben az esetben a paraméter a form attribútum értékeként kerül kiírásra globális attribútumazonosító amely hozzáadódik az űrlapcímkéhez:

Válassza ki a listából a Textarea Label Fieldset Legend opciót

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

Opció címke attribútumok

1. Érték— meghatározza a legördülő listából azt az értéket, amelyet a rendszer a szervernek (űrlapfeldolgozónak) küld. Valójában a kezelő egy nevet kap, amelyet a select tag name attribútuma határoz meg, és érték é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ő listaelem kiválasztását.

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 egy adott listaelem szöveges tartalmát (ami annak értéke). Ha a címke jelen van, akkor az attribútum értékével megegyező sor jelenik meg, és figyelmen kívül hagyja az opciócímkén belüli szöveges tartalmat. Ugyanez történik, ha a tartalom között teljesen hiányzik.

Címke Textarea Címke Címke Fieldset Címke Jelmagyarázata

Néz. A fenti példában a kódban az opció első sora üres (a táblázat bal oldalán), de a label="Option Tag" paraméter be van írva, ennek eredményeként ez az adott szöveg jelenik meg a listában (a a jobb oldal). A második kódsor a "Textarea Tag" szöveget tartalmazza az opciócímke tartalmaként, de a jobb oldali legördülő menüben a "Textarea" szó látható, amely megfelel a label="Textarea" értékének.

4. Kiválasztott— kiválasztja az aktuális legördülő lista elemet:

Opció Textarea Label Fieldset Legend

Ha a többszörös attribútum jelen van, akkor egynél több elemet is kiválaszthat:

Opció Textarea Label Fieldset Legend

Az optgroup címke attribútumai

Ha a legördülő listát valamilyen módon rendezni kell, például csoportokra kell osztani, akkor ezekhez a csoportokhoz egy-egy tárolót használnak, 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. Egy ilyen legördülő lista létrehozásához azonban két attribútum szükséges.

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

Opció Textarea Label Fieldset Legend

Ugyanez a dolog, 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 azon csoport elemeinek kiválasztását, amelyekhez képest telepítve van, és az inaktív elemek általában szürkével vannak kiemelve:

Opció Textarea Label Fieldset Legend

Itt jól jön egy rövid videó:

Szövegmező szövegterületet használó űrlapon

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. Az 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, és a szöveg az elvégzett változtatások figyelembevételével átkerül a szerver processzorába. A két átlós csíkkal jelölt jobb alsó sarokra kattintva szélességben és hosszban nyújtható a mező.

Most próbáljunk meg több paraméterrel rendelkező attribútumot hozzáadni az eredeti kódhoz:

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

2. Cols— mezőszélesség, amelyet paraméterként a vízszintesen elhelyezett szomszédos azonos karakterek száma határoz meg. Az alapértelmezett érték 20.

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

4. Maxlength— a szövegmezőben elhelyezhető karakterek maximális számát adja meg. 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 küldeni, akkor a böngésző egy rövid üzenetet jelenít meg, amely tartalmazza az űrlap tartalmának kiegészítésének szükségességét és a már beírt karakterek számát.

7. Csak olvasható(paraméterek nélkül) - ha ezt az attribútumot a textarea-hoz csatolja, a szövegmezőt a felhasználók nem szerkeszthetik, é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— megadja, hogy a böngészőnek adjon-e tippeket, amikor a felhasználó kitölt egy űrlapot a korábban megadott adatok alapján, és lehetővé teszi-e a megfelelő szöveg automatikus beszúrását.

Csak van két paraméter: tovább(engedélyezve) és ki(kikapcsolva). Íme egy kódpélda:

Írja be a szöveget:

Ez az „on” értékű attribútum csak akkor működik, ha az űrlapmezők automatikus kitöltése engedélyezve van egy adott felhasználó webböngészőjében.

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

Puha— a mezőbe szélességében nem férő karakterkészlet automatikusan átkerül egy új sorba. Ebben az esetben a processzor a szöveg egy sorként kerül elküldésre. Ha a felhasználó az „Enter” billentyűvel tetszőleges helyre szöveget visz át, akkor az átvitel a webes űrlap elküldésekor mentésre kerül.

Írja be a szöveget:

Írja be a szöveget:

Kemény— a kötőjelek automatikusan készülnek, ha a szöveg szélességében nem fér bele a mezőbe, és a processzorba küldéskor az ilyen kötőjelek helye mentésre kerül. Ez az opció 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és letiltása. Ha egy szövegrészletet mechanikus átvitel nélkül nyomtat 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étere) - a szövegmezőre való fókuszálást kezdeményezi az oldal űrlappal történő betöltésekor.

11. Tiltva- az readonly attribútumtól eltérően (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ürke színű:

Leírás

Címke amely beállítja a lista magasságát. A lista szélességét a címkében megadott legszélesebb szöveg határozza meg

Szintaxis

Attribútumok

Lehetővé teszi, hogy valamelyik billentyűparancs segítségével egy listára ugorjon. Beállítja, hogy a lista fókuszba kerüljön az oldal betöltése után. Blokkolja egy elem elérését és módosítását. Listát társít egy űrlaphoz. Lehetővé teszi több listaelem egyidejű kiválasztását. A kiszolgálónak elküldendő vagy szkripteken keresztül elérhető elem neve. A listát az űrlap elküldése előtt ki kell választani. A megjelenítendő listasorok száma. Meghatározza az elemek közötti átmenet sorrendjét a Tab billentyű lenyomásakor

Záró címke

Kívánt.

HTML5 IE Cr Op Sa Fx

SELECT címke



Ebben a cikkben megvizsgáljuk azokat az elemeket, amelyek lehetővé teszik legördülő listák létrehozását, megtanuljuk, hogyan lehet csoportokat létrehozni ezekben a listákban, megnézzük, hogyan lehet letiltani az elemeket, sőt listacsoportokat, megismerkedünk egy elemmel, amely lehetővé teszi a listák létrehozását. egy többsoros szövegmező, amelyet később HTML-űrlapokon belül használhat (elem

).

Legördülő lista

A lista első eleme általában kiválasztottként jelenik meg, de az elemhez hozzáadhat egy kiválasztott attribútumot egy előre meghatározott beállítás megadásához.

Gyerünk

</span> Példa egy elem használatára <select><span>

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

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

Menüpontok csoportosítása

Nézzük a következő címkét , amely a kapcsolódó adatok csoportosítására szolgál egy legördülő listában name = "fekete-fehér" > label = "Engedélyezőlista" >

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

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 tiltott attribútumának használatára <optgroup><span>

Példánk eredménye:

Lista és többszörös kijelölés letiltása

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

Ebben a példában két legördülő listát hoztunk létre. Az első listához a disposit attribútumot használtuk, amely 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 opció is kiválasztható (a Ctrl Windowson és ezen 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 tárgyalt címkeelemekkel analóg módon




type = "submit" name = "submitInfo" value = "submit" > !}

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