Dobrý den, milí čtenáři tohoto blogu. V rámci studia spletitostí jako další úkol budeme pokračovat v rozebírání detailů vytváření formulářů na webu pomocí vhodných.
Dnes se naučíme tvořit rozevírací (rozbalovací) seznamy, včetně vícenásobného výběru, pomocí výběru a volby, jak konstruovat textové pole přes textarea, a také hovořit o možnosti rozšíření funkčnosti formulářů pomocí tagů fieldset, štítek a legenda.
Dovolte mi, abych vám připomněl, že jakýkoli formulář na stránce je vytvořen pomocí a je určen pro zadání jakýchkoli informací od uživatele a jejich odeslání na server (příklad -).
Nástroje hypertextového značkovacího jazyka nám bohužel neumožňují tyto informace přímo zpracovat, a tak pomocí HTML vytvoříme pouze vzhled formuláře a potřebná data se pošlou ke zpracování. Pro tento účel je na webovém serveru účelově vytvořen speciální soubor napsaný v jednom ze serverových jazyků (nejčastěji PHP). Řekněme, že pro zpětnou vazbu můžete vytvořit soubor mail.php, který bude obslužným programem.
Při praktickém využití informací získaných v této publikaci nezapomeňte, jak by měla vypadat, kde kódy všech viditelných prvků stránky, včetně formulářů, jsou vždy v tagu body.
Tato informace je nezbytná, protože i když používáte všechny moderní vestavěné vývojářské nástroje (připomínám, že prvním znakem implementace této funkce bylo), musíte jasně porozumět mechanismu použití hlavních značek, poté úpravě HTML kód, jehož potřeba čas od času vyvstane, proměnit v zábavnou činnost.
2. násobek- tento atribut, který nemá žádné parametry, umožňuje vícenásobný výběr, na rozdíl od výše uvedeného příkladu, kde lze vybrat pouze jeden prvek (řádek). Pokuste se v tomto seznamu vybrat myší několik řádků najednou (po jednom na libovolném místě, podržením klávesy Ctrl nebo pomocí Shift následování za sebou jeden po druhém):
3. velikost- nastavuje výšku rozevíracího seznamu, tj. počet zobrazených řádků. Pokud je přítomen atribut multiple a není specifikována velikost (jako ve výše uvedeném příkladu), pak standardně se zobrazují čtyři řádky a například s size="5" pět bude viditelných:
Možnost Textarea Popisek sady polí Legenda |
4. Požadované(nemá žádné parametry) - určuje, že před odesláním dat do handleru musí být provedena volba. Pokud není vybrán prvek ze seznamu, data formuláře nebudou odeslána:
Možnost Textarea Popisek sady polí Legenda |
5. automatické ostření(na tom nezáleží) nastaví fokus na seznam hned po načtení stránky. Navíc, pokud je uživatel zvyklý provádět většinu akcí pomocí kláves, pak právě takové předkonfigurované zaměření pomůže vybrat si ze seznamu pomocí šipek na klávesnici bez použití myši:
6. Zakázáno(bez parametrů) - zablokuje přístup k seznamu (zakáže jej). V praxi se obvykle používá spolu se skripty v případech, kdy potřebujete povolit rozevírací seznam pouze při splnění určitých podmínek:
7. Formulář— propojí seznam s jednou nebo více formuláři, ke kterým patří, ale je mimo kontejner
. Zároveň je parametr zapsán v roli hodnoty atributu formuláře atribut globálního id, který se přidá ke značce formuláře:
Vyberte ze seznamu Možnost Textarea Label Fieldset Legend |
Nezaměňujte atribut tagu select s hlavním tagem pro tvorbu formuláře. Ve výše uvedeném příkladu je atribut id="data" přidán do značky formuláře a atribut form="data" je přidán do značky select, což umožnilo přiřadit rozevírací seznam ke konkrétnímu formuláři.
atributy tagu volby
1. hodnota- určuje hodnotu z rozevíracího seznamu, která bude odeslána na server (formulář). Ve skutečnosti je název odeslán do handleru, který je nastaven atributem name tagu select a hodnota(pro tento příklad - 1, 2, 3, 4, 5), odpovídající vybranému řádku rozevíracího seznamu:
Možnost Textarea Popisek sady polí Legenda |
2. Zakázáno— blokuje prvek rozevíracího seznamu pro výběr.
Možnost Textarea Popisek sady polí Legenda |
Jak můžete vidět z příkladu, řádek "Option" je neaktivní a nelze jej vybrat.
3. označení- zobrazí textový obsah (což je jeho hodnota) jednoho nebo druhého prvku seznamu. Pokud je přítomen štítek, zobrazí se řetězec, který je shodný s hodnotou tohoto atributu, a textový obsah uvnitř tagu volby je ignorován. Totéž se stane, pokud obsah mezi zcela chybí.
Textarea tag Štítek štítek Štítek sady polí Legenda |
Vidět. Ve výše uvedeném příkladu je první řádek pro volbu v kódu prázdný (na levé straně tabulky), ale je zadán parametr label="Option tag", v důsledku toho se tento text objevil v seznamu (na pravá strana). Druhý řádek kódu obsahuje text "Textarea Tag" jako obsah tagu volby, ale rozevírací seznam napravo zobrazuje slovo "Textarea", které odpovídá hodnotě label="Textarea".
4. Vybraný- zvýrazní aktuální položku rozevíracího seznamu:
Možnost Textarea Popisek sady polí Legenda |
Pokud je přítomen atribut multiple, lze vybrat více než jeden prvek:
Možnost Textarea Popisek sady polí Legenda |
atributy tagu optgroup
Pokud je potřeba rozevírací seznam nějak seřadit, například rozdělit do skupin, pak se pro každou z těchto skupin použije kontejner skládající se z otevíracích a zavíracích značek optgroup, který obsahuje část položek rozbalovacího seznamu. Existují však dva atributy pro přizpůsobení takového rozevíracího seznamu.
1. označení- nastaví název každé skupiny jako parametr:
Možnost Textarea Popisek sady polí Legenda |
Totéž, ale s násobkem a size="7" značky select:
Možnost Textarea Popisek sady polí Legenda |
2. Zakázáno(žádné hodnoty) - blokuje výběr prvků skupiny, vůči které je nastaven, navíc neaktivní položky jsou obvykle zašedlé:
Možnost Textarea Popisek sady polí Legenda |
Zde by velmi pomohlo krátké video:
Textové pole ve formuláři přes textarea
Dalším prvkem formuláře pro web, který budeme uvažovat, je pole s možností vkládat do něj víceřádkový text. Lze jej vytvořit pomocí tagu textarea. Bez výchozích atributů vyvolá použití této značky následující výsledek:
Zadejte text: |
V poli můžete provádět zalomení řádků, zatímco text bude přenesen do handleru na serveru s ohledem na provedené změny. Pole lze roztáhnout do šířky a délky uchopením myši za pravý dolní roh, který je označen dvěma diagonálními pruhy.
Nyní zkusme do původního kódu přidat několik atributů s parametry:
1. název- Určuje název textové oblasti jako hodnotu pro její identifikaci po odeslání dat formuláře při jejich zpracování na serveru.
2. plk- šířka pole, která je jako parametr nastavena počtem identických znaků stojících vedle sebe, umístěných vodorovně. Výchozí hodnota je 20.
3. Řádky- výška textového pole určená počtem řádků. Pokud je počet řádků textu zadaného uživatelem větší než hodnota určená tímto atributem, zobrazí se vpravo svislý posuvník.
4. Maximální délka- Určuje maximální počet znaků, které lze umístit do textového pole. Pokud je limit překročen, další zadání nebude možné.
Níže je uveden příklad se všemi výše uvedenými atributy, účinek každého z nich si můžete sami zkontrolovat jednoduchým umístěním požadovaného počtu písmen a řádků do textové oblasti (stačí zadat stejný znak několikrát):
Zadejte text: |
5. mindélka- Určuje minimální počet znaků, které je nutné zadat do textové oblasti. Pokud se uživatel pokusí odeslat text s méně znaky, prohlížeč zobrazí krátkou zprávu s informací, která zmiňuje nutnost doplnění obsahu formuláře a kolik znaků již bylo zadáno.
7. Pouze ke čtení(bez parametrů) - pokud je tento atribut připojen k textové oblasti, pak textové pole nebude pro uživatele přístupné a bude pouze pro čtení. Ale můžete se na něj zaměřit (přesunout kurzor do pole a kliknout levým tlačítkem), stejně jako vybrat a zkopírovat (částečně nebo úplně) text:
Několik dalších atributů, které implementují další funkce při vyplňování polí:
8. Automatické doplňování- označuje, zda má prohlížeč dávat rady, když uživatel vyplní formulář na základě dříve zadaných údajů, a umožňuje automaticky vložit příslušný text.
Má celkem dva parametry: na(zapnuto) a vypnuto(vypnut). Zde je příklad kódu:
Tento atribut nastavený na „on“ funguje pouze tehdy, když má webový prohlížeč uživatele povoleno automatické doplňování polí formuláře.
9. Zabalit- nastaví pravidla prohlížeče pro zalamování řádků v textové oblasti pomocí tří hodnot:
Měkký- sada znaků, která se na šířku nevejde do pole, se automaticky zalomí do nového řádku. Zároveň i procesor text bude odeslán jako jeden řádek. V případě, že uživatel zalomí text na libovolné požadované místo pomocí klávesy "Enter", pak se takovéto zalomení uloží při odeslání webového formuláře.
Zadejte text: |
Tvrdý- dělení slov se provádí automaticky, pokud se text na šířku nevejde do pole a po odeslání do handleru se místa takového dělení uloží. Toto nastavení se používá pouze v ve spojení s atributem cols:
Zadejte text: |
Vypnuto- zakázat zalomení řádků. Pokud zadáte textový fragment bez mechanického přenosu pomocí klávesy "Enter", bude celý text umístěn na jeden řádek a zobrazí se vodorovný posuvník:
Zadejte text: |
10. automatické ostření(bez parametrů) - Zahájí fokus na textové pole při načtení stránky s formulářem.
11. Zakázáno- na rozdíl od atributu readonly (který také zakazuje upravovat obsah pole, ale umožňuje se na něj zaměřit) zcela blokuje přístup do textové oblasti, která je obvykle vybarvena šedou barvou:
Zdravím všechny čtenáře mého blogu. Dnes vám řeknu, jak vytvořit rozevírací seznam v html, jaké značky a atributy musíte použít a také pro jaké účely je můžete potřebovat.
Vyberte značku a vytvořte rozevírací seznam
Rozevírací seznam v html je tedy vytvořen pomocí párového select tagu, do kterého jsou umístěny párové tagy možností. Právě v nich jsou zaznamenány všechny možnosti, které se po kliknutí na seznam nabídnou. Příklad:
Vyberte si zvíře
V tomto případě to, co je zobrazeno mezi úvodní a závěrečnou částí volby , uvidíte na obrazovce a hodnota obsažená v atributu value bude odeslána na server nebo zpracována pomocí skriptu.
Seznam v html může být normální a s více možnostmi výběru. Aby bylo možné vybrat více položek, musíte do selectu přidat prázdný atribut multiple. Chcete-li vybrat více hodnot, podržte ctrl a stiskněte levé tlačítko myši.
Dalším užitečným atributem je velikost . Umožňuje vám vybrat, kolik řádků se zobrazí v rozevíracím seznamu.
Další atribut je zakázán. Znepřístupňuje seznam pro klikání a prohlížení položek, ale zároveň je na stránce viditelný.
Povinný je atribut html5. Je-li nastaveno, formulář nebude odeslán, dokud nebude vybrána hodnota z rozevíracího seznamu. Obecně se stává nezbytnou volbou. I když atribut nefunguje ve všech prohlížečích.
atributy tagu volby
Select vlastně slouží pouze jako kontejner pro položky seznamu, samy se nastavují pomocí tagu option. Má parametr value, jak jsme již zjistili, ale kromě toho existují i další. Například:
Vypnuto – znemožní výběr položky seznamu. Zobrazí se, ale nelze na něj kliknout.
Vybráno – prvek bude ve výchozím nastavení vybrán. V běžném seznamu lze tento atribut bez hodnoty nastavit pouze na jednu položku, ve vícenásobném seznamu na několik.
Důležité vysvětlení pro správnou funkci
Pokud bude nutné výsledek výběru odeslat na server nebo zpracovat pomocí skriptů, vložte výběr do formuláře, aby nedocházelo k chybám. Faktem je, že rozevírací seznam byl původně vytvořen přesně jako jeden z prvků formuláře.
K čemu slouží výběr?
Obvykle to pro vás může být užitečné, pokud se registrujete na svých stránkách nebo chcete provést průzkum. Prvek má nevýhodu - přes css příliš nemění vzhled.
Ve výchozím nastavení se po kliknutí na seznam zobrazí modrý rámeček, stejnou barvou jsou zvýrazněny položky seznamu, nad kterými se pohybuje kurzor. Aby se po kliknutí rámeček neobjevil nebo byl zvýrazněn jinou barvou, můžete napsat následující selektor:
select:focus(
obrys: 1px plná oranžová;
}
Rám bude nyní oranžový.
Možnost lze také upravit, ale když najedete na položku, její pozadí zmodrá a z nějakého důvodu se to prostřednictvím stylů nezmění.
Volba(
barva: hnědá
pozadí: aqua;
}
Mimochodem, možná někdo z vás ví, jak změnit barvu pozadí při najetí myší na položku pomocí css?
To je ve skutečnosti vše o značce select a její aplikaci. Nejsou pro něj poskytovány žádné další funkce v html. Všechny ostatní operace s ním lze provádět pomocí javascriptu a php. Pokud například potřebujete vytvořit seznam pro výběr roku narození a může existovat 80-100 různých možností, nenapsali byste je ručně?
Právě k tomu musíte použít programování, konkrétně smyčku. Dobře, toto je téma na další rozhovor, ale pro dnešek jsou to všechny informace, které jsem vám chtěl sdělit. S dalšími základními značkami se můžete seznámit v html.
Značka volby HTML se používá k vytvoření rozevíracího seznamu, který umožňuje uživateli vybrat jednu možnost z předdefinované sady hodnot.
Text viditelný pro uživatele se může lišit od textu uvedeného v atributu value. Zde je návod, jak vytvořit rozevírací seznam:
- Rozbalovací seznam je vytvořen pomocí značky
- Uvnitř štítku
- Ve štítku
Můžete také nastavit třídu CSS namísto použití ID pro stylování rozevíracího seznamu.
V další části ukážu příklady, jak používat rozevírací seznam HTML v JavaScriptu/JQuery. Příklady také ukáží, jak stylizovat
Příklad vytvoření jednoduchého rozevíracího seznamu
Tento příklad možnosti výběru HTML se používá k vytvoření rozevíracího seznamu se třemi možnostmi na výběr:
Ve výše uvedeném příkladu je k vytvoření rozevíracího seznamu použito následující označení:
Použití atributu value
Jak již bylo zmíněno dříve, hodnota atributu value se může lišit od textu zobrazeného na stránce. Můžete například uživatelům zobrazit názvy zemí nebo barvy a použít zkratky v atributu value.
V následujícím příkladu vytvoříme rozevírací seznam s atributem value:
Zobrazit online demo a kód
Pro Tag
Příklad přístupu k vybrané možnosti v JavaScriptu
Nyní vytvoříme příklad přístupu k hodnotě vybrané možnosti a provedení některých akcí. Stejný seznam jako ve výše uvedeném příkladu vytvoříme s výběrem barev. Po výběru klikněte na tlačítko a použijte tuto barvu na dokument:
Zobrazit online demo a kód
Hodnota volby HTML používá následující kód:
Následující řádek kódu se v JavaScriptu používá k přístupu k hodnotě atributu value možnosti
var seltheme = document.getElementById(“selcolor”).value;
Po kliknutí na tlačítko se zavolá funkce JS, která přiřadí hodnotu vybranou v rozevíracím seznamu proměnné. Tato hodnota se používá k aplikaci barvy na aktuální dokument.
Přístup k viditelnému textu v jQuery
Tentokrát použiji JQuery pro přístup k hodnotě vybrané možnosti: text i value . V této ukázce budu přistupovat k viditelnému textu ve značce volby v HTML:
Zobrazit online demo a kód
V kódu pro každou možnost ve značce
Zde je návod, jak se k této hodnotě přistupuje HTML vybrat možnost vybraný JavaScript:
var selectedcolor = $("#jqueryselect option:selected").text();
K hodnotě můžete také přistupovat pomocí metody $.val() jQuery:
var selectedcolor = $("#jqueryselect").val();
Nahraďte tento řádek ve výše uvedeném příkladu a kód zobrazí hodnotu shortcode/color v atributu value namísto viditelného textu.
Příklad získání hodnoty ve skriptu PHP
V tomto příkladu získání hodnoty možnosti vybrané z rozevíracího seznamu je formulář vytvořen pomocí značky
Zobrazit online demo a kód
Metoda formuláře použitá v příkladu je POST , takže hodnoty formuláře můžete získat pomocí pole $_POST[“”] PHP. Toto je kód formuláře použitý v příkladu:
A zde je návod, jak se skript PHP používá k získání hodnoty možnosti výběru HTML:
".$_POST["selphp"].""; } ?>
Pokud má formulář metodu GET, použijte PHP pole $_GET[“”].
Definování rozevíracích stylů pomocí CSS
Nyní se podíváme na to, jak stylizovat rozevírací seznam.
Zobrazit online demo a kód
Vlastnost box-shadow je zde použita spolu s linear-gradient . Kompletní kód CSS vypadá takto:
Selcls ( padding: 3px; border: solid 1px #517B97; obrys: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to (#FFFFFF)); pozadí: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0,1) 0px 0px 8px; -moz- box-shadow: rgba(0,0,0, 0,1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0,1) 0px 0px 8px; šířka:150px; )
Zaoblené rohy s vlastností border-radius
U možnosti HTML select nastavíme vlastnost border-radius CSS3 tak, aby byly rohy zaoblené. Mění se i barevné schéma. Můžete experimentovat s okraji, šířkami, okraji a dalšími vlastnostmi, jak chcete:
Zobrazit online demo a kód
Použití více CSS atributů a stylů
Chcete-li uživatelům umožnit vybrat více možností ze seznamu, použijte atribut multiple. Ve výše uvedeném příkladu lze vybrat pouze jednu možnost. Při použití více položek můžete vybrat více možností stisknutím klávesy CTRL:
Zobrazit online demo a kód
V tomto článku se budeme zabývat prvky, které vám umožňují vytvářet rozevírací seznamy, naučíme se vytvářet skupiny v těchto seznamech, zvážíme, jak deaktivovat položky a dokonce i skupiny seznamů, seznámíme se s prvkem, který vám umožní vytvořit více -řádkové textové pole, můžete jej později použít ve formulářích HTML (element
Do formuláře jsme navíc umístili tlačítko, které slouží k odeslání formuláře (prvek s tlačítkem typu "odeslat formulář": typ = "odeslat" ).
Výsledek našeho příkladu:
Popisek textové oblasti
A tak zvážíme poslední příklad a přejdeme k praktickému úkolu článku v tomto tutoriálu.
Díky atributu (HTML tag
Text popisku se skryje, když uživatel zadá hodnotu (libovolný znak) do textového pole, pokud je odstraněn, popis se znovu zobrazí.
Podívejme se na příklad použití:
type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}
V tomto příkladu jsme vytvořili dvě textové oblasti (element
Všimněte si, že pokud je textové pole pouze pro čtení, pak obsah nelze změnit, ale uživatel může stále na obsah přejít, vybrat jej a zkopírovat.
Do formuláře jsme navíc umístili tlačítko, které slouží k odeslání formuláře (prvek s tlačítkem typu "odeslat formulář": typ = "odeslat" ).
Výsledek našeho příkladu:
Otázky a úkoly k tématu
Než přejdete k dalšímu tématu, dokončete praktický úkol:
- Na základě získaných znalostí sestavte následující formulář pro zveřejnění volného místa:
Před pokračováním v úloze otevřete příklad v novém okně a pečlivě prozkoumejte formulář, abyste zopakovali všechny jeho body. K dokončení úkolu budete potřebovat znalosti z článku. Pokud vám to uniklo, vraťte se a prostudujte si to.
Po dokončení cvičení zkontrolujte kód stránky otevřením příkladu v samostatném okně, abyste se ujistili, že jste vše udělali správně.
Pomocí značky můžete vytvořit rozevírací seznam v HTML vybrat. Kromě rozbalovacího (nebo „rozbalovacího“) seznamu značka vybrat umožňuje vytvořit položku seznamu s vícenásobným výběrem. Syntaxe pro použití značky vybrat HTML vypadá takto:
Tady s tagem volba jsou uvedeny prvky seznamu.
Výsledek aplikace:
Elektronika Syroezhkin Chizhikov Kukushkina
SELECT atributy tagu
Zvažte atributy značky vybrat:
- název
- velikost- počet zobrazených řádků v seznamu (číslo);
- násobek- obsahuje funkci vícenásobného výběru prvků rozevíracího seznamu;
- zakázáno- blokuje přístup k prvku;
- formulář- umožňuje propojit rozevírací seznam s formulářem (může být potřeba, pokud je samotný seznam mimo formulář, ke kterému má být připojen). ID formuláře je předáno jako argument.
To jsou možná všechny hlavní atributy tagu vybrat které se nejčastěji používají. Podívejme se nyní, jak vytvořit rozevírací seznam v HTML pomocí zadaných atributů:
Atributy tagu OPTION
Štítek volba, jak již bylo uvedeno, umožňuje definovat potomky rozevíracího seznamu vybrat, který zase funguje jako kontejner. Štítek volba má své vlastní atributy:
- zakázáno- stanoví zákaz výběru tohoto prvku seznamu;
- označení- umožňuje nastavit štítek pro aktuální prvek seznamu (místo textu uvedeného v tagu se zobrazuje hodnota štítku, což umožňuje zobrazit zkrácenou hodnotu); Pozor: Atribut není podporován v prohlížeči Firefox
- vybraný- ve výchozím nastavení bude vybrána aktuální položka seznamu;
- hodnota- hodnota, která bude předána serveru;
Podívejme se na pokročilý případ použití značky volba:
Výsledek tohoto příkladu bude vypadat takto:
Pan Electronic Syroezhkin Chizhikov Kukushkina
Tvůrce webových stránek Nubex má schopnost vytvářet vlastní formuláře pomocí modulu tvůrce formulářů. Práce s rozevíracími seznamy v "Nubex" je popsána v článku: