V tejto príručke sa dozvieš, ako vytvoriť zväzokovateľné zoznamy, známe tiež ako rozbaľovacie zoznamy, pomocou prvku select v HTML. Táto kombinácia prvkov je nevyhnutná pre interakciu s webovými formulármi, pretože umožňuje používateľom vybrať si z predom definovaných možností. Preskúmame ako viacnásobný výber, tak aj jednoduché zoznamy a diskutovať o možnostiach úpravy vzhľadu, ktoré máš k dispozícii.
Najdôležitejšie poznatky
- Prvok select sa používa v kombinácii s prvkom option na poskytnutie možností výberu.
- Úprava výberových polí je obmedzená a líši sa v závislosti od prehliadača.
- Ak chceš mať väčšiu kontrolu nad úpravou, mala by si zvážiť použitie iných technológií ako JavaScript alebo frameworky.
Krok za krokom
Pre vytvorenie jednoduchého rozbaľovacieho menu začni prvkom select. Tu definuješ vstupné pole, v ktorom môžu používatelia vybrať.
Prvok select vyžaduje atribút name, aby si mohla identifikovať vybranú možnosť pri odosielaní formulára. Tu nastavujeme názov na "oblíbené_ovocie", aby sme zaznamenali obľúbené ovocie.
Vnútri prvku select pridávaš viacero prvkov option, ktoré reprezentujú jednotlivé možnosti výberu. Každý z týchto prvkov má viditeľný text a základnú hodnotu, ktorá sa použije pri odosielaní formulára.
Na vytvorenie rozbaľovacieho menu môžeš atribút size nastaviť na 1, čo znamená, že sa zobrazí iba jeden prvok naraz. Toto zabezpečí, že sa bude správať ako bežné rozbaľovacie menu.
Ďalší dôležitý atribút pre prvok select je multiple. Ak pridáš tento atribút, používatelia môžu naraz vybrať viacero možností, podobne ako pri zaškrtávacích poliach. Používatelia môžu na to použiť klávesovú skratku (alebo klávesovú kombináciu Command na Macoch), aby vybrali viacero prvkov.
Keď vykonáš výber a pošleš formulár, hodnota vybraných možností sa odosiela na server. Aj keď sa údaje prenášajú ako pole, je dôležité, aby boli všetky vybrané hodnoty v poli prítomné pri použití multiple.
Prvok option môže obsahovať len jednoduchý text. HTML kód ako obrázky alebo odkazy nie je podporovaný vnútri možností. Môžeš však upraviť vzhľad pomocou CSS, napríklad upraviť písmo alebo farbu pozadia.
Úpravy štýlu, ako písmo a farba, môžeš vykonať s atribútom style možností. Je to jednoduchšie implementovať v zozname, ktorý sa zobrazuje normálne, keďže máš väčšiu kontrolu nad rozložením.
V závislosti od prehliadača sa vzhľad prvkov select môže líšiť. Niektoré prehliadače by mohli napríklad inak zobraziť farbu pozadia a text rozbaľovacieho menu. Je dôležité to zohľadniť pri navrhovaní formulára.
Ak uvažuješ o pridaní obrázkov ako možností výberu, s prvkom select by to bolo komplikované. Bude rozumnejšie sa obrátiť na JavaScript alebo externé knižnice UI, pretože normálne HTML prvky nie je možné vložiť do prvkov option.
Pre implementáciu zložitejšieho UI prvku, pre ktorý potrebuješ flexibilný štýl, možno kombináciu obrázkov a textu, by bolo rozumnejšie vyvinúť vlastné rozbaľovacie menu alebo zoznam, alebo sa obrátiť na existujúci rámec.
Zhrnutím možno povedať, že prvok select ponúka vynikajúci spôsob výberu z jedného zoznamu alebo umožnenia viacnásobného výberu. Je však dôležité pamätať na zložitosť možností úpravy a rozdiely medzi prehliadačmi, aby sa neporušila používateľská skúsenosť.
Zhrnutie - Návod na vytváranie webových formulárov s vyberateľnými zoznamami
V tomto návode si sa naučil(a), ako vytvoriť v HTML vyberateľné zoznamy pomocou prvku select. Dôraz bol kladený na praktické použitie výberových polí, možnosti viacnásobného výberu a základné možnosti štýlovania.
Často kladené otázky
Čo je rozdiel medzi a?Hlavný rozdiel spočíva v tom, že poskytuje rozbaľovací zoznam, z ktorého sa vyberá možnosť, zatiaľ čo input type="radio" zobrazuje viacero možností, z ktorých môže byť vybratá iba jedna.
Ako môžem vybrať viaceré možnosti v ?Môžeš pridať atribút multiple k svojmu -elementu a umožniť viacnásobný výber.
Môžem použiť HTML kód vnútri -tagov?Áno, -tagy podporujú iba jednoduchý text a nie HTML obsah.
Ako môžem prispôsobiť vzhľad -prvkov?Môžeš použiť CSS na základné úpravy štýlu, avšak možnosti sú obmedzené, pretože nie všetky CSS vlastnosti fungujú na -prvky.
Aká je odporúčaná metóda, ak chcem použiť obrázky vo výbere?Pre použitie obrázkov vo výberových poliach by bolo lepšie použiť JavaScript alebo externe UI knižnice, pretože -elementy nepodporujú HTML obsah vnútri -tagov.
