Vytvoření formuláře v HTML. Jak se dělá rozevírací seznam v html? Vytváření skupin rozevíracích prvků seznamů formulářů

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:

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:

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:

Zadejte text:

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:

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:

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:

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 definovat možnosti výběru pomocí značky
  • 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

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 hodnota se liší od textu. Po výběru barvy jQuery zobrazí viditelný text ve výstraze. Kód značky

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

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.

V tomto příkladu označíme

V prohlížeči to vypadá takto:

Seskupování položek nabídky

Podívejme se na následující značku A, která se používá k seskupení souvisejících dat v rozevíracím seznamu name="black&white"> label="whitelist">

V tomto příkladu jsme vybrali 2 skupiny s tagem . Atribut label prvku určuje název vybrané skupiny tučně:

V následujícím příkladu pomocí booleovského atributu disabled zakážeme jednu skupinu (" Skupina B"):

</span> Příklad použití zakázaného atributu značky HTML <optgroup><span>

Výsledek našeho příkladu:

Deaktivace seznamu a vícenásobného výběru

</span> Zakázané a více atributů značky <select><span>

V tomto příkladu jsme vytvořili dva rozevírací seznamy. U prvního seznamu jsme použili atribut disabled, který zabraňuje interakci se seznamem (vypíná jej).

Pro druhý seznam jsme použili atribut multiple, který označuje, že je povoleno vybrat několik možností v seznamu najednou (přes ctrl na Windows a přes příkaz na Macu).

V prohlížeči to vypadá takto:

Textová oblast

Výsledek našeho příkladu:

Deaktivace textové oblasti

Analogicky s dříve uvažovanými prvky, tag


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

V tomto příkladu jsme vytvořili dvě textové oblasti (element