Vytvorenie formulára v HTML. Ako sa robí rozbaľovací zoznam v html? Vytváranie skupín rozbaľovacích prvkov zoznamov formulárov

Dobrý deň, milí čitatelia blogu. V rámci štúdia zložitostí, ako ďalšia úloha, budeme pokračovať v analýze podrobností o vytváraní formulárov na webe pomocou vhodných.

Dnes sa naučíme tvoriť rozbaľovacie (rozbaľovacie) zoznamy, vrátane s viacnásobným výberom, pomocou výberu a voľby, ako zostaviť textové pole cez textarea a hovoríme aj o možnosti rozšírenia funkčnosti formulárov pomocou tagov fieldset, štítok a legenda.

Dovoľte mi pripomenúť, že akýkoľvek formulár prítomný na stránke je vytvorený pomocou a je určený na zadanie akýchkoľvek informácií od používateľa a ich odoslanie na server (príklad -).

Žiaľ, nástroje hypertextového značkovacieho jazyka nám neumožňujú priamo spracovať tieto informácie, takže pomocou HTML vytvoríme iba vzhľad formulára a potrebné údaje sa odošlú na spracovanie. Na tento účel je na webovom serveri účelovo vytvorený špeciálny súbor napísaný v niektorom zo serverových jazykov (najčastejšie PHP). Povedzme, že pre spätnú väzbu môžete vytvoriť súbor mail.php, ktorý bude obslužným programom.

Pri praktickom využití informácií získaných v tejto publikácii nezabudnite, ako by mala vyzerať, kde kódy všetkých viditeľných prvkov stránky vrátane formulárov sú vždy v rámci značky body.

Tieto informácie sú nevyhnutné, pretože aj keď používate všetky moderné vstavané vývojárske nástroje (pripomínam, že prvým znakom pri implementácii tejto funkcie bolo), musíte jasne pochopiť mechanizmus používania hlavných značiek a potom upravovať kód HTML kód, ktorého potreba z času na čas vyvstane, premenia na zábavnú činnosť.

2. viacnásobný- tento atribút, ktorý nemá žiadne parametre, umožňuje viacnásobný výber, na rozdiel od vyššie uvedeného príkladu, kde môžete vybrať iba jeden prvok (riadok). Skúste v tomto zozname vybrať myšou niekoľko riadkov naraz (jeden po druhom na ľubovoľnom mieste, podržte stlačený kláves Ctrl alebo pomocou klávesu Shift postupujte jeden po druhom v rade):

3. veľkosť- nastavuje výšku rozbaľovacieho zoznamu, t.j. počet zobrazených riadkov. Ak je prítomný atribút multiple a veľkosť nie je špecifikovaná (ako v príklade vyššie), potom štandardne sa zobrazujú štyri riadky a napríklad s size="5" bude viditeľných päť:

Možnosť Textarea Label Set Fieldset Legend

4. Požadovaný(nemá žiadne parametre) – určuje, že pred odoslaním údajov obsluhe musí byť vykonaná voľba. Ak nie je vybratý prvok zo zoznamu, údaje formulára sa neodošlú:

Možnosť Textarea Label Set Fieldset Legend

5. automatické zaostrovanie(nezáleží na tom) nastaví zameranie na zoznam hneď po načítaní stránky. Navyše, ak je používateľ zvyknutý vykonávať väčšinu akcií pomocou kláves, potom práve takéto predkonfigurované zaostrenie pomôže vybrať si zo zoznamu pomocou šípok na klávesnici bez použitia myši:

6. Zakázané(bez parametrov) - blokuje prístup do zoznamu (zakazuje ho). V praxi sa zvyčajne používa spolu so skriptami v prípadoch, keď potrebujete povoliť rozbaľovací zoznam iba vtedy, ak sú splnené určité podmienky:

7. Formulár— spája zoznam s jedným alebo viacerými formulármi, ku ktorým patrí, ale je mimo kontajnera

. Parameter je zároveň zapísaný v úlohe hodnoty atribútu form atribút globálneho id, ktorý sa pridá k značke formulára:

Vyberte zo zoznamu Možnosť Textarea Label Fieldset Legend

Nezamieňajte si atribút tagu select s hlavným tagom na vytvorenie formulára. Vo vyššie uvedenom príklade je atribút id="data" pridaný do značky formulára a atribút form="data" je pridaný do značky select, čo umožnilo priradiť rozbaľovací zoznam ku konkrétnemu formuláru.

atribúty tagu voľby

1. hodnotu- určuje hodnotu z rozbaľovacieho zoznamu, ktorá bude odoslaná na server (obslužný program formulára). V skutočnosti sa meno odošle obsluhe, ktorá je nastavená atribútom name tagu select a hodnotu(pre tento príklad - 1, 2, 3, 4, 5), ktoré zodpovedajú vybratému riadku rozbaľovacieho zoznamu:

Možnosť Textarea Label Set Fieldset Legend

2. Zakázané— blokuje prvok rozbaľovacieho zoznamu na výber.

Možnosť Textarea Label Set Fieldset Legend

Ako vidíte z príkladu, riadok "Možnosť" je neaktívny a nedá sa vybrať.

3. štítok- zobrazuje textový obsah (čo je jeho hodnota) jedného alebo druhého prvku zoznamu. Ak je prítomný štítok, potom sa zobrazí reťazec, ktorý je identický s hodnotou tohto atribútu a textový obsah vo vnútri tagu voľby sa ignoruje. To isté sa stane, ak obsah medzi úplne chýba.

Značka textovej oblasti Značka štítku Značka sady polí Značka legendy

Pozri. Vo vyššie uvedenom príklade je prvý riadok pre voľbu v kóde prázdny (na ľavej strane tabuľky), ale je zadaný parameter label="Option tag", v dôsledku čoho sa tento text objavil v zozname (na pravá strana). Druhý riadok kódu obsahuje text „Textarea Tag“ ako obsah tagu voľby, ale rozbaľovací zoznam napravo zobrazuje slovo „Textarea“, ktoré sa zhoduje s hodnotou label="Textarea".

4. Vybraný- zvýrazní aktuálnu položku rozbaľovacieho zoznamu:

Možnosť Textarea Label Set Fieldset Legend

Ak je prítomný viacnásobný atribút, je možné vybrať viac ako jeden prvok:

Možnosť Textarea Label Set Fieldset Legend

atribúty značky optgroup

Ak je potrebné rozbaľovací zoznam nejako zoradiť, napríklad rozdeliť do skupín, potom sa pre každú z týchto skupín použije kontajner pozostávajúci z otváracích a zatváracích značiek optgroup, ktorý obsahuje časť položiek rozbaľovacieho zoznamu. Existujú však dva atribúty na prispôsobenie takéhoto rozbaľovacieho zoznamu.

1. štítok- nastaví názov každej skupiny ako parameter:

Možnosť Textarea Label Set Fieldset Legend

To isté, ale s násobkom a size="7" značky select:

Možnosť Textarea Label Set Fieldset Legend

2. Zakázané(žiadne hodnoty) - blokuje výber prvkov skupiny, vo vzťahu ku ktorej je nastavená, navyše neaktívne položky sú zvyčajne sivé:

Možnosť Textarea Label Set Fieldset Legend

Veľmi by pomohlo krátke video:

Textové pole vo formulári cez textarea

Ďalším prvkom formulára pre web, ktorý budeme uvažovať, je pole s možnosťou zadať doň viacriadkový text. Dá sa vytvoriť pomocou značky textarea. Bez predvolených atribútov prinesie použitie tejto značky nasledujúci výsledok:

Zadajte text:

Zadajte text:

V poli môžete vykonávať zalomenia riadkov, pričom text sa prenesie do obsluhy na serveri, pričom sa zohľadnia vykonané zmeny. Pole sa dá roztiahnuť do šírky a dĺžky tak, že myšou uchopíte pravý dolný roh, ktorý je označený dvoma diagonálnymi pruhmi.

Teraz sa pokúsime pridať niekoľko atribútov s parametrami do pôvodného kódu:

1. názov- Určuje názov textovej oblasti ako hodnotu na jej identifikáciu po odoslaní údajov formulára pri ich spracovaní na serveri.

2. plk- šírka poľa, ktorá je ako parameter určená počtom rovnakých znakov stojacich vedľa seba, umiestnených vodorovne. Predvolená hodnota je 20.

3. Riadky- výška textového poľa určená počtom riadkov. Ak je počet riadkov textu zadaných používateľom väčší ako hodnota určená týmto atribútom, napravo sa zobrazí zvislý posuvník.

4. Maximálna dĺžka- Určuje maximálny počet znakov, ktoré možno umiestniť do textového poľa. Ak je limit prekročený, ďalšie zadávanie nebude možné.

Nižšie je uvedený príklad so všetkými vyššie uvedenými atribútmi, pričom účinok každého z nich si môžete sami skontrolovať jednoduchým umiestnením požadovaného počtu písmen a riadkov do textovej oblasti (ten istý znak môžete jednoducho zadať niekoľkokrát):

Zadajte text:

Zadajte text:

5. mindĺžka- Určuje minimálny počet znakov, ktoré je potrebné zadať do textovej oblasti. Ak sa používateľ pokúsi odoslať text s menším počtom znakov, prehliadač zobrazí krátku správu s informáciou, že je potrebné vyplniť obsah formulára a koľko znakov už bolo zadaných.

7. Iba na čítanie(bez parametrov) - ak je tento atribút pripojený k textovej oblasti, textové pole nebude pre používateľov prístupné a bude len na čítanie. Môžete sa však naň zamerať (presunúť kurzor do poľa a kliknúť ľavým tlačidlom myši), ako aj vybrať a skopírovať (čiastočne alebo úplne) text:

Niekoľko ďalších atribútov, ktoré implementujú ďalšie funkcie pri vypĺňaní polí:

8. Automatické dopĺňanie- označuje, či má prehliadač poskytnúť rady, keď používateľ vyplní formulár na základe predtým zadaných údajov, a umožňuje automaticky vložiť príslušný text.

Má celkom dva parametre: na(zapnuté) a vypnuté(vypnutý). Tu je príklad kódu:

Zadajte text:

Tento atribút nastavený na „on“ funguje iba vtedy, keď má webový prehliadač používateľa povolené automatické dopĺňanie polí formulára.

9. Zabaliť- nastavuje pravidlá prehliadača zalamovania riadkov v textovej oblasti pomocou troch hodnôt:

Mäkký- množina znakov, ktorá sa nezmestí do poľa na šírku, sa automaticky zalomí do nového riadku. Zároveň aj procesor text sa odošle ako jeden riadok. V prípade, že užívateľ zalomí text na ľubovoľné miesto pomocou klávesu "Enter", potom sa takéto zalomenie uloží pri odosielaní webového formulára.

Zadajte text:

Zadajte text:

Ťažko- delenie slov sa vykoná automaticky, ak sa text na šírku nezmestí do poľa a po odoslaní do handlera sa miesta takéhoto delenia uložia. Toto nastavenie sa používa iba v v spojení s atribútom cols:

Zadajte text:

Zadajte text:

Vypnuté- zakázať zlomy riadkov. Ak zadáte textový fragment bez mechanického prenosu pomocou klávesu "Enter", celý text sa umiestni na jeden riadok a zobrazí sa vodorovný posúvač:

Zadajte text:

Zadajte text:

10. automatické zaostrovanie(bez parametrov) - Iniciuje zameranie na textové pole pri načítaní stránky s formulárom.

11. Zakázané- na rozdiel od atribútu readonly (ktorý tiež zakazuje upravovať obsah poľa, ale umožňuje sa naň zamerať), úplne blokuje prístup k textovej oblasti, ktorá je zvyčajne vyfarbená sivou farbou:

Zdravím všetkých čitateľov môjho blogu. Dnes vám poviem, ako vytvoriť rozbaľovací zoznam v html, aké značky a atribúty musíte použiť a tiež na aké účely to možno budete potrebovať.

Vyberte značku a vytvorte rozbaľovací zoznam

Takže rozbaľovací zoznam v html sa vytvorí pomocou párovej značky výberu, v ktorej sú umiestnené párové značky možností. Práve v nich sú zaznamenané všetky možnosti, ktoré sa po kliknutí na zoznam ponúknu. Príklad:

Vyberte si zviera

V tomto prípade to, čo je zobrazené medzi úvodnou a záverečnou časťou možnosti , uvidíte na obrazovke a hodnota obsiahnutá v atribúte value bude odoslaná na server alebo spracovaná pomocou skriptu.

Zoznam v html môže byť normálny a s možnosťou výberu z viacerých možností. Aby bolo možné vybrať viacero položiek, je potrebné pridať prázdny atribút multiple do select . Ak chcete vybrať viacero hodnôt, podržte ctrl a stlačte ľavé tlačidlo myši.

Ďalším užitočným atribútom je veľkosť . Umožňuje vám vybrať, koľko riadkov sa má zobraziť v rozbaľovacom zozname.

Ďalší atribút je zakázaný. Zoznam zneprístupní pre klikanie a prezeranie položiek, no zároveň je na stránke viditeľný.

Vyžaduje sa atribút html5. Ak je nastavené, formulár sa neodošle, kým sa nevyberie hodnota z rozbaľovacieho zoznamu. Vo všeobecnosti sa stáva nevyhnutnou voľbou. Aj keď tento atribút nefunguje vo všetkých prehliadačoch.

atribúty tagu voľby

Select vlastne slúži len ako kontajner pre položky zoznamu, samotné sa nastavujú pomocou tagu option. Má hodnotový parameter, ako sme už zistili, ale okrem tohto existujú aj ďalšie. Napríklad:
Vypnuté – položka zoznamu nebude dostupná na výber. Zobrazí sa, ale nemôžete naň kliknúť.

Vybraté – Prvok bude predvolene vybratý. V bežnom zozname môže byť tento atribút bez hodnoty nastavený iba na jednu položku, vo viacnásobnom zozname na viacero.

Dôležité vysvetlenie pre správnu prevádzku

Ak bude potrebné výsledok výberu odoslať na server alebo spracovať pomocou skriptov, zadajte výber do formulára, aby nedošlo k chybám. Faktom je, že rozbaľovací zoznam bol pôvodne vytvorený presne ako jeden z prvkov formulára.

Na čo slúži výber?

Zvyčajne to môže byť pre vás užitočné, ak sa registrujete na svojej stránke alebo chcete vykonať prieskum. Prvok má nevýhodu - veľmi dobre nemení vzhľad cez css.

Štandardne sa po kliknutí na zoznam zobrazí modrý rám, položky zoznamu, nad ktorými sa pohybuje kurzor, sú zvýraznené rovnakou farbou. Aby sa po kliknutí rám nezobrazil alebo bol zvýraznený inou farbou, môžete napísať nasledujúci selektor:

select:focus(
obrys: 1px plná oranžová;
}

Rám bude teraz oranžový.

Možnosť môže byť tiež upravená, ale keď umiestnite kurzor myši na položku, jej pozadie sa zmení na modré a z nejakého dôvodu sa to prostredníctvom štýlov nezmení.

Možnosť(
farba: hnedá
pozadie: aqua;
}

Mimochodom, možno niekto z vás vie, ako zmeniť farbu pozadia pri umiestnení kurzora myši nad položku pomocou css?

To je v skutočnosti všetko o značke select a jej aplikácii. V html nie sú k dispozícii žiadne ďalšie funkcie. Všetky ostatné operácie s ním je možné vykonať pomocou javascriptu a php. Napríklad, ak potrebujete vytvoriť zoznam na výber roku narodenia a môže existovať 80-100 rôznych možností, napísali by ste ich ručne?

Na to musíte použiť programovanie, konkrétne slučku. Dobre, toto je téma na ďalší rozhovor, ale pre dnešok sú to všetky informácie, ktoré som vám chcel povedať. S ďalšími základnými značkami sa môžete zoznámiť v html.

Značka voľby HTML sa používa na vytvorenie rozbaľovacieho zoznamu, ktorý umožňuje používateľovi vybrať jednu možnosť z preddefinovanej množiny hodnôt.

Text viditeľný pre používateľa sa môže líšiť od textu uvedeného v atribúte value. Tu je postup, ako môžete vytvoriť rozbaľovací zoznam:

  • Rozbaľovací zoznam sa vytvorí pomocou značky definovať možnosti výberu pomocou značky
  • V tagu

Môžete tiež nastaviť triedu CSS namiesto použitia ID na úpravu rozbaľovacej ponuky.

V ďalšej časti ukážem príklady použitia HTML rozbaľovacieho zoznamu v JavaScript/JQuery. Príklady tiež ukážu, ako štýlovať

Použitie atribútu value

Ako už bolo spomenuté, hodnota atribútu value sa môže líšiť od textu zobrazeného na stránke. Môžete napríklad používateľom zobraziť názvy krajín alebo farby a použiť krátke kódy v atribúte value.

V nasledujúcom príklade vytvoríme rozbaľovací zoznam s atribútom value:

Pozrite si online demo a kód

Pre Tag

Príklad prístupu k vybranej možnosti v JavaScripte

Teraz vytvorte príklad prístupu k hodnote vybranej možnosti a vykonania niektorých akcií. Rovnaký zoznam ako v príklade vyššie vytvoríme s výberom farieb. Po výbere kliknutím na tlačidlo aplikujte túto farbu na dokument:

Pozrite si online demo a kód

Hodnota voľby HTML používa nasledujúci kód:

Nasledujúci riadok kódu sa používa v JavaScripte na prístup k hodnote atribútu value možnosti hodnota sa líši od textu. Po výbere farby jQuery zobrazí viditeľný text vo výstrahe. Kód značky

Tu je návod, ako sa k tejto hodnote pristupuje HTML vybrať možnosť vybratý JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

K hodnote môžete pristupovať aj pomocou metódy $.val() jQuery:

var selectedcolor = $("#jqueryselect").val();

Nahraďte tento riadok vo vyššie uvedenom príklade a kód zobrazí hodnotu skráteného kódu/farby v atribúte value namiesto viditeľného textu.

Príklad získania hodnoty v skripte PHP

V tomto príklade získania hodnoty voľby vybratej z rozbaľovacieho zoznamu sa formulár vytvorí pomocou značky

A tu je návod, ako sa skript PHP používa na získanie hodnoty možnosti výberu HTML:

".$_POST["selphp"].""; } ?>

Ak má formulár metódu GET, použite PHP pole $_GET[“”].

Definovanie rozbaľovacích štýlov pomocou CSS

Teraz sa pozrime na to, ako upraviť štýl rozbaľovacieho zoznamu.

V tomto príklade označujeme

V prehliadači to vyzerá takto:

Zoskupovanie položiek ponuky

Zoberme si nasledujúcu značku A, ktorá sa používa na zoskupenie súvisiacich údajov v rozbaľovacom zozname name="black&white"> label="whitelist">

V tomto príklade sme vybrali 2 skupiny so značkou . Atribút label prvku špecifikuje názov vybranej skupiny tučným písmom:

V nasledujúcom príklade pomocou boolovského atribútu disabled zakážeme jednu skupinu (" Skupina B"):

</span> Príklad použitia zakázaného atribútu značky HTML <optgroup><span>

Výsledok nášho príkladu:

Vypnutie zoznamu a viacnásobného výberu

</span> Zakázané a viaceré atribúty značky <select><span>

V tomto príklade sme vytvorili dva rozbaľovacie zoznamy. Pre prvý zoznam sme použili atribút vypnutý, ktorý zabraňuje interakcii so zoznamom (vypína ho).

Pre druhý zoznam sme použili atribút viacnásobný, ktorý označuje, že je povolené vybrať viacero možností v zozname naraz (cez ctrl v systéme Windows a cez príkaz na Macu).

V prehliadači to vyzerá takto:

Textová oblasť

Výsledok nášho príkladu:

Vypnutie textovej oblasti

Analogicky s predtým uvažovanými prvkami, tag


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

V tomto príklade sme vytvorili dve textové oblasti (prvok