HTML tagy, které definují HTML formuláře na webu

Vytváříme webové stránky a jednotlivé stránky na internetu komunikovat s návštěvníky.

HTML formuláře se používají k registraci návštěvníků na webu, k interaktivním anketám a hlasování, umožňují posílat zprávy, nakupovat a tak dále. HTML Formulář je vytvořen za jedním účelem: sběr a následný přenos informací pro zpracování do programového skriptu popř e-mailem.

Ukázka HTML formuláře | Přihlásit se

Značky, atributy a hodnoty

• - určit formu.
• name="" - definuje název formuláře.
• method="" - určuje způsob odesílání dat z formuláře. Hodnoty: "get" (výchozí) a "post" . Častěji se používá metoda „post“, protože umožňuje přenášet velké množství dat.
• action="" - určuje adresu URL, pomocí které jsou data odeslána ke zpracování. V našem případě - enter_data.php ..
• - definovat takové prvky formuláře, jako jsou tlačítka, přepínače, textová pole pro zadávání dat.
• type="text" - definuje textové pole pro zadávání dat.
• type="password" - definuje pole pro zadání hesla, přičemž text je zobrazen jako hvězdičky nebo kroužky.
• type="checkbox" - definuje přepínač.
• type="hidden" - definuje skrytý prvek formuláře – slouží k zasílání dalších informací na server.
• size="25" - délka textové pole ve znacích.
• maxlength="30" - maximální povolený počet vstupních znaků.
• value="" - definuje hodnotu, která bude odeslána ke zpracování, pokud odkazuje na přepínače nebo přepínače. Hodnota tohoto atributu jako součásti textového pole nebo tlačítka bude ve výše uvedeném příkladu zobrazena například jako John nebo Login.

Ukázka HTML formuláře | Komentáře na webu

Značky, atributy a hodnoty

• action="http://site/comments.php" - určuje url, na který budou odesílány údaje z formuláře.
• id="" - definuje název, identifikátor prvku formuláře.
• name="" - definuje název prvku formuláře.
• - definovat textové pole ve formuláři.
• cols="" - určuje počet sloupců textového pole formuláře.
• rows="" - Určuje počet řádků pro textové pole formuláře.

Pokud mezi vložte text, zobrazí se uvnitř pole jako příklad, který lze snadno odstranit.

Ukázka HTML formuláře | Rozbalovací seznam

Značky, atributy a hodnoty

• - definovat seznam s položkami, ze kterých si můžete vybrat.
• size="" - určuje počet viditelných pozic v seznamu. Pokud je hodnota 1, jedná se o rozevírací seznam.
• - definovat pozice (body) seznamu.
• value="" - obsahuje hodnotu, která bude odeslána formulářem na zadanou url ke zpracování.
• selected="selected" - vybere položku seznamu jako příklad.

Ukázka HTML formuláře | Seznam s posuvníkem

Zvýšením hodnoty atributu size="" získáme seznam s posuvníkem:

Pro tuto možnost používáme příznak multiple="multiple", který umožňuje vybrat více položek. Jeho absence umožňuje vybrat pouze jednu položku.

Viz navíc:

Zdravím vás, milí čtenáři tohoto blogu. Dnes chci mluvit o věcech, jako jsou formuláře HTML. Ať už je motor vašeho webu jakýkoli (cms), určitě bude používat formuláře vytvořené pomocí značek Form a Input, stejně jako Button, Checked, Value, Checkbox, Radio, Checkbox, Odeslat atributy a parametry .

No, můžete k tomu přidat i prvky pro vytváření rozevíracích seznamů a textových polí - Select, Option, Textarea, Label, Fieldset, Legend.

Proč jsou formuláře potřebné a jak fungují na moderních webech

Pomocí těchto značek je vytvořen stejný vyhledávací řetězec na webu () a hledání tohoto řetězce ve vašem projektu bude povinné. Pochopení toho, jak jsou uspořádány a práce, proto nebude narušovat vaši úspěšnou práci na designu a nebude zbytečné pro sebepropagaci a propagaci.

Takže s odůvodněním potřeby studovat tyto prvky si myslím, že by neměly být žádné další otázky, takže je čas přistoupit přímo ke studiu jejich možných možností.

Ano, chci také připomenout, že jsme již stihli zvážit spoustu materiálů na téma hypertextového značkovacího jazyka, například tři ) a .

Formuláře se v jádru skládají z prvků, k jejichž vytvoření se ze značek Form uvnitř hlavního kontejneru vkládají různé značky – Checked, Value, Checkbox, Radio, Checkbox, Submit atd. Stačí umístit jeho kód na libovolné vhodné místo. pro tuto šablonu webu určující, jak by měla vypadat pomocí značek a jejich atributů.

Může se jednat o textové pole s tlačítkem pro odeslání pro zadaný požadavek, volby přepínače (kde můžete ponechat stisknuté pouze jedno z poskytnutých tlačítek), více textových polí s tlačítkem pro odeslání () a další.

Například v případě „hledání“ pomocí atributu Hodnota můžete určit, co přesně se bude psát na tlačítko umístěné vedle pole pro zadání dotazu. Údaje zadané do formulářů je nutné dále nějakým způsobem zpracovávat.

Například v případě zpětná vazba uživatel po vyplnění pole se svým jménem, ​​zadáním svého e-mailu a textu zprávy a poté kliknutím na tlačítko odeslat bude mít právo doufat, že odešle údaje z formuláře na e-mail stránky autor. Ale implementovat to pomocí pouze jednoho hypertextového značkovacího jazyka () bohužel není možné.

Pro tyto účely je nutný speciální handler program, který po kliknutí na tlačítko odeslat uživatel převezme všechna data z polí zpětné vazby a odešle je vlastníkovi zdroje e-mailem. Který program to udělá, musíte sami určit pomocí atributu Action.

Obvykle je programem zpracování skript napsaný jazyk PHP. Proto v atributu Action tagu Form budete muset zadat cestu k souboru tohoto skriptu umístěného na serveru vašeho hostingu. Uvedu jako příklad předplatné na RSS kanál můj blog e-mailem:

Zpočátku to možná vypadá trochu nejasně, ale myslím, že se vše vyjasní, jak bude příběh pokračovat.

Značky Form a Input pro vytváření tlačítek, zaškrtávacích políček a přepínačů

Jakýkoli formulář musí být uzavřen v otevíracích a uzavíracích značkách Formulář. Jedná se o jakýsi kontejner pro jejich tvorbu. Tato značka má řadu povinných a volitelných atributů:

1. Jméno – jedinečný název, který se zadává, pokud html soubor tam, kde něco děláte, bude použito více webových formulářů
2. Akce - povinný atribut označující cestu ke skriptu, kterému budou data z něj přenesena k dalšímu zpracování
3. Metoda - pomocí ní můžete změnit způsob předávání dat z tohoto webového formuláře do skriptu souboru handleru. Pokud jej nezadáte, bude výchozí získat metodu, který je ve skutečnosti určen hlavně pro proměnné a krátké zprávy a kromě toho otevřená cesta předávání dat adresní řádek prohlížeč. Chcete-li předat data formuláře do skriptu handleru, je stále lepší použít Metoda POST, navržený speciálně pro přenos textových zpráv uzavřeným způsobem

Podívejme se na zbytek značek, které umožňují vytvářet různé webové formuláře. Nejuniverzálnější je Vstup. Uvnitř musí být napsán atribut Type, který určuje, jaký přesně bude HTML formulář vytvořený pomocí tohoto tagu.

Pomocí Input and Type můžete vytvořit následující prvky:

1. jednořádková textová pole (Type="Text")
2. pole pro heslo (Type="Password")
3. zaškrtávací políčka (Type="Zaškrtávací políčko")
4. přepínače (Type="Rádio")
5. skrytá pole (Type="Skryté")
6. normální tlačítka (Type="Button")
7. tlačítka pro odeslání dat obsluze (Type="Submit")
8. tlačítka pro přepnutí webového formuláře výchozí stav(Type="Reset")
9. pole pro nahrávání souborů na server (Type="Soubor)
10. tlačítka obrázků (Type="Obrázek")

Vstup nemá uzavírací značku. Co přesně bude pomocí něj vytvořený webový formulář závisí zcela na parametru uvedeném v atributu Type. Pokud není zadán typ, ve výchozím nastavení se vytvoří textové pole.

Příklady formulářů vytvořených na vstupu s různými hodnotami pro Typ

Další atributy tagu Input a příklady jejich použití

Zvažte, k čemu jsou ostatní atributy:

1. Jméno - pokud mají být data odeslána do skriptu programu handler, musíte zadat parametr pro atribut Name. Pod tímto názvem se data odeslaná z formuláře objeví v programu pro zpracování informací.
2. Velikost - pomocí ní se nastavuje velikost pole vytvářeného webového formuláře. Hodnota je určena počtem znaků, které se do tohoto pole vejdou. Pokud není velikost specifikována, bude šířka výchozí 24 znaků.
3. Maxlength - ve výchozím nastavení není počet znaků, které lze zadat do formuláře Html, omezen, ale pomocí Maxlength lze tento limit nastavit. Více znaků, než bude uvedeno, do pole nezadáte
4. Hodnota - u něj můžete nastavit, co přesně se bude standardně psát do pole nebo na tlačítko odeslat data
5. Zaškrtnuto je atribut příznaku, který lze vložit do Vstupu pro přepínače (rádio) nebo pro zaškrtávací políčka (zaškrtávací políčko). V tomto případě bude tento přepínač nebo zaškrtávací políčko aktivní při načtení stránky s webovým formulářem (už budou mít zaškrtnutí)

Nyní se na vše podíváme příklady formulářů se vstupem. Vzhled textového pole je podobný vzhledu pole pro heslo, zvážíme tedy pouze možnost vytvořit Text, například pro zadání e-mailové adresy:

Nyní se podívejme na vytvoření webového formuláře s přepínači (Rádio):

Všimněte si, že tento formulář používá značku Input dvakrát, jednou k vytvoření každého ze dvou přepínačů. Navíc každý z nich má atribut Name se stejnou hodnotou (resultat) a hodnota Value je odlišná (ANO a NE).

To znamená, že při jejím zpracování, pokud je vybrán některý z přepínačů, bude odeslána proměnná, jejíž název je zapsán v Name, ale hodnota této proměnné bude záviset na tom, který přepínač byl vybrán.

Zvažte příklad vytvoření webového formuláře se zaškrtávacími políčky (Zaškrtávací políčko):

Zaškrtávací políčka se liší od přepínačů schopností vybrat více možností najednou. Název se používá k určení v souboru obslužné rutiny, ve kterém zaškrtávacím políčku jsou zaškrtávací políčka nastavena, a Hodnota udává hodnotu, která bude odeslána obslužné rutině (pokud hodnota není nastavena, pak bude obslužné rutině odeslán text umístěný vedle tohoto zaškrtávacího políčka. ).

Select, Option, Textarea, Label, Fieldset, Legend – rozevírací seznamy, textové oblasti a další prvky webového formuláře

Na začátek vám chci trochu připomenout, co vlastně webové formuláře jsou a proč jsou na stránkách webu potřeba. Jsou primárně navrženy tak, aby uživatelsky přívětivým způsobem opakovaly prvky dostupné v jakémkoli operačním systému: tlačítka, pole pro zadávání textu, rozevírací seznamy, zaškrtávací políčka, přepínače a podobně.

Všichni uživatelé bez dalšího vysvětlení chápou účel těchto prvků, a pokud uvidí tlačítko formuláře Html, chápou, že na něj musí kliknout.

Navíc všechny jeho základní prvky (jako Select, Option, Textarea, Label, Fieldset, Legend) jsou již hotové polotovary (kontejnery), pro jejichž vložení bude stačit pouze použít požadovaný tag s potřebnými atributy a parametry.

Samotné prohlížeče vědí, jak zobrazit konkrétní prvek webového formuláře. Pravda, možnosti pro zobrazení stejného prvku v různé prohlížeče se mohou od sebe mírně lišit, ale zpravidla ne výrazně.

Že. ukazuje se, že webové formuláře v Html jsou pokusem o přenos klíče prvky používané v jakémkoli operačním systému, na webové stránky. Ale proč by mohly být potřeba na stránkách webu?

V zásadě ke stejnému účelu, pro který se používají podobné prvky v operační systémy— přenos dat od uživatele. V případě formulářů jsou data od uživatele přenášena na server, kde jsou zpracovávána speciální program(Hypertextový značkovací jazyk bohužel neumožňuje zpracování dat).

Data lze sice posílat nejen na server, ale také například e-mailem na adresu uvedenou v atributu Action tagu Form. Při odesílání dat z Html na E-mail se uživateli, který vyplní pole, po kliknutí na tlačítko odeslat data spustí poštovní program ve výchozím nastavení používá na svém počítači.

Úvodní značka formuláře by pak měla vypadat nějak takto:

Select a Option jsou rozevírací značky

Všechny prvky webového formuláře, které vytvářejí pole s rozevíracími seznamy, jsou vytvořeny stejným způsobem. Nejprve je definován kontejner se seznamem pomocí otevíracích a zavíracích značek Html Select. A pak se uvnitř tohoto kontejneru vytvoří samostatné kontejnery s položkami (prvky) tohoto seznamu. To se provádí pomocí otevírání a zavírání značek Option.

Ukazuje se něco takového:

Ale to je zjednodušený design, protože Select a Option mají řadu atributů, které definují vlastnosti a vzhled pole rozevíracího seznamu, které má být vytvořeno.

1. Název – Musíte zadat jedinečný název pro tento prvek webového formuláře vytvořený pomocí Vybrat. Tento název bude předán serveru v programu zpracování dat jako název proměnné. Hodnota atributu Hodnota (nastavená v Možnostech pro každou položku) položky rozevíracího seznamu, kterou uživatel vybere, bude předána jako hodnota této proměnné.
2. Velikost - pomocí ní můžete nastavit počet zobrazovaných položek. Jinými slovy, pomocí Size můžete nastavit výšku seznamu měřenou počtem zobrazených řádků. Pokud v tagu Vybrat explicitně neurčíte hodnotu Velikost, použije se výchozí výška rozevíracího seznamu, zatímco v případě nepřítomnosti nebo přítomnosti atributu Více v poli Vybrat se bude lišit:
   1. Pokud je v nabídce Vybrat přítomno Více, pak bude výška rozevíracího seznamu ve webovém formuláři standardně rovna počtu jeho prvků. Tito. zobrazí se všechny položky v rozevíracím seznamu s vícenásobným výběrem. Viz příklad v množném čísle níže. Pokud je atribut Size v Select nastaven na méně než počet položek, pak se vpravo zobrazí posuvník.
   2. Pokud v poli Vybrat není vícenásobné, bude výška rozevíracího seznamu ve webovém formuláři výchozí na jeden řádek. Tito. bude viditelný pouze jeden řádek a zbývající položky budou dostupné pouze stisknutím tlačítka výtahu (vpravo). Viz příklad níže
3. Vícenásobné – přiřazení tohoto atributu v tagu Vybrat vám umožní vytvořit rozevírací seznam s možností vybrat více položek současně. Přečtěte si více o tomto atributu níže.

Formuláře s rozevíracími seznamy lze rozdělit do dvou možností. V první volbě lze vybrat pouze jeden prvek (řádek) pole s rozevíracím seznamem, ve druhé volbě lze podržením Ctrl nebo Shift vybrat několik dostupných položek současně.

V tomto případě při druhé možnosti budou na server odeslána data o všech vybraných bodech. Který rozevírací seznam bude vytvořen, je určeno přítomností nebo nepřítomností atributu Multiple v tagu Select.

Multiple je specifikováno v Select bez parametru, protože píše se to jednoduše Multiple a to je vše. Pokud je přítomen, vytvoří se webový formulář rozevíracího seznamu s možností vícenásobného výběru (podržením Ctrl nebo Shift).

Varianta pole s rozevíracím seznamem, ve kterém bude možnost vícenásobného výběru, bude vypadat nějak takto:

Vpravo je příklad webového formuláře s vícenásobným výběrem na základě výše uvedeného kódu. Jak vidíte, podržením Ctrl nebo Shift lze vybrat více položek současně.

Pokud v tagu Select není žádný atribut Multiple, lze vybrat pouze jeden prvek tohoto rozevíracího seznamu (řádek).

Příklad, kdy lze vybrat pouze jednu položku, můžete vidět zde:

Štítek Vyberte legendu vybraného webu

Atributy značek možností

Do vytvořeného rozevíracího seznamu (pomocí Vybrat a Možnost) můžete přidat něco jako oddělovače s nadpisem skupiny, které se budou lišit od ostatních položek nabídky stylem písma.

Chcete-li vytvořit skupinu položek rozevíracího seznamu, musíte je uzavřít do úvodní a závěrečné značky formuláře Optgroup a v úvodní značce Optgroup zadat atribut Label, jako parametr, který budete muset zadat název požadované skupiny.

Například takto:

Vybrat štítek
Legenda vybraného webu

Textarea - vytvoření textového pole ve formuláři

Existuje ještě jeden prvek webového formuláře, který jsme nezvažovali - Textarea (pole s možností zadat víceřádkový text). Je vytvořen pomocí spárované Html Značka Textarea. Navíc v něm můžete přenášet text do nový řádek a bude přenesen na server, přičemž budou zohledněny provedené převody.

Chcete-li tedy vytvořit víceřádkové textové pole, musíte napsat úvodní a závěrečnou Textarea a mezi ně můžete přidat text, který bude viditelný při načtení stránky s webovým formulářem. Uživatel pak může tento text vymazat a napsat svůj vlastní.

Co o sobě můžete říct?

Jak vidíte, klikání na text pro aktivaci tohoto prvku je zbytečné – musíte na něj kliknout sami. To je přesně ten stav, který má štítek Label napravit. Umožňuje, aby byl text vedle prvku webového formuláře klikací, což nepochybně je zlepšit použitelnost.

Ale jak uvázat HTML prvek tvary a text? Chcete-li to provést, musíte do atributu přidat ID s jedinečným parametrem a text musí být obklopen otevíracími a zavíracími značkami Label. A to není vše. V úvodní značce Label je potřeba napsat atribut For, jehož parametr musí být přesně shodný s atributem ID v Html značce elementu formuláře. Ukazuje se něco takového:

Jak vidíte, nyní díky použití Label lze prvky webového formuláře aktivovat nejen kliknutím na něj, ale také kliknutím na text umístěný vedle něj.

Fieldset a Legend - rozdělení formuláře na části

Pravděpodobně jste často viděli, že velké formuláře jsou v Html rozděleny do skupin (Fieldset), které jsou zakroužkované v rámci a každá taková skupina má své záhlaví (Legend). To je implementováno pomocí pouze dvou značek: Fieldset a Legend. Jsou spárované, tzn. musí mít otevírací a zavírací.

Takže, vytvořit skupinu základní části všechny tyto části musíte uzavřít do otevírání a zavírání značek Fieldset. A abyste pro tuto skupinu mohli nastavit titulek (Legendu), musíte ihned po otevření Fieldset napsat konstrukci z úvodní a závěrečné Legendy, mezi kterou je potřeba vložit text titulku skupiny.

Zde je příklad vytváření skupin pomocí Fieldset a Legend:

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás zajímat

Select, Option, Textarea, Label, Fieldset, Legend - HTML tagy rozevírací a textové formuláře
Výpisy v html kód- Štítky UL, OL, LI a DL
MailTo - co to je a jak vytvořit e-mailový odkaz v Html
Jak se nastavují barvy v Html a CSS kódu, výběr odstínů RGB v tabulkách, výsledky Yandex a další programy
Co je jazyk HTML Hypertext Markup Language a jak vypsat všechny značky ve validátoru W3C
Jak vložit HTML odkaz a obrázek (foto) - IMG a A tagy
Tabulky v Html – značky Table, Tr a Td a také Colspan, Cellpadding, Cellspacing a Rowspan k jejich vytvoření
Tagy Font (obličej, velikost a barva), Blockquote a Pre jsou starší formátování textu v čistém HTML (bez Použití CSS)
Jak vytvořit hypertextový odkaz (A, Href, Target blank), jak jej otevřít v novém okně na webu a také udělat z obrázku odkaz v Html kódu

Díky značce bylo možné vytvořit rozevírací seznam a seznam s vícenásobným výběrem. Pokud budete odesílat data na server, pak tag musí být umístěn ve formuláři (tag

Jaké jsou atributy značky select?

Štítek má tři užitečné atributy (ostatní nebudeme zvažovat, o nich jsem již mluvil). První atribut je multiple , díky kterému můžete vybrat více položek seznamu. Chcete-li vybrat více prvků, musíte podržet stisknuté tlačítko Shift nebo ctr a kliknout na požadované prvky myší. Následuje příklad použití atributu multiple:

Jaká jména se vám líbí?
Žádný
Ivane
Petr
Mikuláše

Druhý atribut je povinný , pomocí kterého můžete prohlížeči „sdělit“, že seznam musí být vybrán před odesláním formuláře, jinak prohlížeč odeslání formuláře zakáže a zobrazí příslušnou zprávu za vás. Vzhled této zprávy zcela závisí na prohlížeči a uživatel jej nemůže změnit. Následuje příklad použití povinného atributu:

Třetím atributem je size , který lze použít k určení počtu položek seznamu, které se mají zobrazit. Atribut size může obsahovat pouze celé číslo. Atribut size transformuje seznam, například pokud je roven 1, pak tag se zobrazí jako "rozbalovací seznam" a pokud je atribut size větší než 1, pak se rozevírací seznam zobrazí jako "rolovací seznam". Zde jsou dva příklady použití atributu size:

Ano nebo ne?
Ano
Ne

V procesu vytváření stránek nebo blogu a jejich dalšího naplňování obsahem je z různých důvodů někdy nutné skrýt část textu, umístit objemnější informace do bloku prozatím skrytého, ale přesto naznačit uživatel, co je k dispozici, ještě jedna věc, a dát mu možnost zobrazit skrytý obsah bez přechodu na další řádek nebo stránku.
Dříve se k implementaci takového řešení používala hromada javascriptu, ale nyní lze toto vše provést velmi snadno pomocí úžasných vlastností.

Dnes se podíváme na nejjednodušší způsob vytváření skrytých bloků s obsahem na stránkách webu a v jednotlivých zprávách, které se otevřou po kliknutí na určitý prvek textu, pouze pomocí vlastností CSS3. Jako přepínač může sloužit jedno slovo, vybraná fráze, celá věta nebo informativní ikona.
Takové bloky se často používají na stránkách s velkým množstvím obsahu, aby byly strukturovanější a kompaktnější, přičemž veškerý obsah je rozdělen do tzv. skupin, ve kterých jsou uživateli prezentovány pouze nadpisy, veškerý text je ve výchozím nastavení skrytý a zobrazí se kliknutím na konkrétní prvek (viz výše).

Zkusme se obejít bez přebytečné vody, podívejme se na celý tento jednoduchý mechanismus v akci, na dobrý příklad, můžete také něco upravit, pokud chcete:

Příklad #1

V roli přepínačů rozevíracích bloků s dodatečné informace není použit žádný zvýrazněný nebo označený text s jednoznačnou nabídkou kliknout na něj, což musíte bez obav a pochybností vidět)))

Jak vidíte, vše funguje více než dobře, skrytý obsah se jak bez problémů objeví, tak lehkým kliknutím myši zmizí a přitom jsme použili naprosté minimum spustitelného kódu, jak v html rámci, tak v tvorba css stylů. Bez připojení další javascript knihovny, s věčnou úzkostí a zda jsou na straně uživatele zakázány.
Implementovat všechny tyto akce bylo možné díky pseudotřídě CSS3 :kontrolovány aplikované na prvky rozhraní, jako jsou přepínače (). Co jsme vlastně udělali, v tagu atributu type jsme přiřadili hodnotu checkboxu a také identifikátor id="hd-1" odpovídající jedinečnému identifikátoru for="hd-1" přepínač aktuálního bloku. Skryjme zaškrtávací políčka důkladně a navždy nastavením zobrazení: žádná vlastnost ve třídě .hide;
Ve skutečnosti zde není nic zvláštního k vysvětlování, celý mechanismus pro zapínání a vypínání skrytých bloků se skládá ze tří prvků:

• Zaškrtávací políčko – značka s významem zaškrtávací políčko atribut typ a se specifickým identifikátorem vazby
• Název (přepínač textu) - tag s jedinečnou hodnotou identifikátoru atributu pro, (identifikátor musí být stejný jako identifikátor tagu vstup s významem zaškrtávací políčko atribut typ).
• Blok obsahu je tag div, který bude obsahovat různý skrytý obsah (text, obrázky atd. atd.) až do lepších časů, dokud uživatel neklikne.

Doufám, že z mého chaotického vysvětlení přesto vyplynulo, o jaký trik jde. CSS aplikuje nové styly (pomocí pseudotřídy kontrolovány) zobrazí blok obsahu, který byl dříve skrytý, pouze když uživatel klikne na prvek, který je spojen se zaškrtávacím políčkem pomocí jedinečného ID.

Z toho všeho vyplývá důležitá poznámka:

když použijete více skrytých bloků na stejné stránce, každý přepínač musí mít jedinečné ID, které se bude lišit od ID v jiných blocích.

Takže, slovy, vyřešili jsme, co kam a proč, nyní se podívejme na html rámec celé struktury:

Kliknutím sem otevřete!

Dále postupujeme přímo k formaci css styly, bez kterého se celá konstrukce neobejde. Úplné minimum kódu, bez jakéhokoli stylování, pouze zvýraznilo pozadí rozevíracího pole, aby bylo možné definovat a zobrazit skryté textové rámečky. Bloky můžete libovolně ozdobit, zavěsit okraje, zakulat rohy, zvýrazňovat text nebo .

1. CSS

/* skrýt zaškrtávací políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* text label view */ .hide + label, .hide:checked + label ( padding: 0; color: green ; kurzor: ukazatel; border-bottom: 1px tečkovaný zelený; ) /* zobrazení textu štítku, když je aktivní přepínač */ .hide:checked + štítek ( barva: červená; border-bottom: 0; ) /* zobrazení polí při zaškrtnutí je aktivní s obsahem */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; box-shadow: vložka 3px 3px 10px #7d8e8f; padding: 10px; )

To vše je pro asketický příklad zcela dostatečné minimum. Ale přeci jen to nebudeme my, když nepověsíme alespoň nějaké vychytávky a pro uživatele je lepší vizuálně navrhnout, kam kliknout.
V druhém příkladu jsem přidal jednoduchý symbol v podobě plus, který jasně naznačuje, že se zde skrývá něco jiného, ​​po stisknutí se to okamžitě změní v mínus a u skrytých bloků s obsahem jsem přišrouboval malou animaci, když objevují, a to vše výhradně s pomocí magie CSS3.

2. CSS

/* skrýt zaškrtávací políčka a bloky obsahu */ .hide, .hide + label ~ div ( display: none; ) /* zobrazení textu štítku */ .hide + label ( margin: 0; padding: 0; barva: zelená; kurzor : ukazatel; display: inline-block; ) /* zobrazení textu štítku, když je aktivní přepínač */ .hide:checked + label ( color: red; border-bottom: 0; ) /* když je aktivní checkbox, zobrazit bloky s obsahem */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box- stín: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* malá animace, když se objeví */ -webkit-animation:fade Easy-in 0,5s; -moz-animation:fade easy-in ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) @keyframes fade ( from ( opacity: 0; ) to ( opacity: 1 ) ) .hide + label:before ( background-color: #1e90ff; barva: #fff; obsah: "\002B"; displej:blok; plavat vlevo; velikost písma: 14px; váha písma: tučné; výška: 16px; výška řádku: 16px; okraj: 3px 5px; text-align: center; šířka: 16px; -webkit-border-radius: 50 %; -moz-border-radius: 50 %; hraniční poloměr: 50 % ) .hide:checked + label:before (obsah: "\2212"; )

Podle všeho je metoda nepochybně dobrá, ale jako vždy, není to vůbec překvapivé, nastávají problémy s věčnou brzdou pokroku, prohlížečem IE, pseudotřídou kontrolovány podporují pouze 9. a novější verze tohoto prohlížeče. U starších verzí IE je to stejné jako dříve, musíte použít javascript.

Pomocí skrytých zaškrtávacích políček můžete snadno implementovat , bloky stylů, posuvníky, galerie a další.

Se vší úctou, Andrew

Atributy formuláře:

• Atribut akce určuje soubor serveru se skriptem zodpovědným za hlavní zpracování dat odeslaných z formuláře. Obvykle je kód pro tento soubor napsán v programovacím jazyce na straně serveru, jako je např php nebo perl.
• Atribut enctype označuje typ informace odesílané na server, pokud se jedná pouze o textová data - text/plain , pokud jsou soubory odesílány s formulářem, pak by mělo být specifikováno multipart/form-data.
• Atribut method specifikuje a definuje formu přenosu dat. Nebudeme se tím podrobně zabývat, ale je třeba říci, že pro spolehlivější převod by měl být upřesněn způsob zaúčtování.

html prvky formuláře

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" > !}

Výsledek:

• Hodnota atributu type - text - označuje, že se jedná o textové pole
• velikost - velikost textového pole ve znacích
• maxlength - maximální počet znaků, které se vejdou do pole
• hodnota - počáteční text v textovém poli
• jméno - název prvku, nezbytný pro zpracování dat v souboru handler

Výsledek:


Místo textu se v poli zobrazuje maska ​​– hvězdičky nebo kolečka

<input type="submit" value= "Odeslat data">

Výsledek:

Tlačítko Odeslat shromáždí všechna data formuláře zadaná uživatelem a odešle je na adresu uvedenou v atributu akce formuláře.

<input type = "reset" value = "(!LANG:Clear form" > !}

Výsledek:

Tlačítko vrátí stav všech ovládacích prvků do původního stavu (vymaže formulář)

<input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <input type = "checkbox" name = "js" value = "(!LANG:yes" checked = "checked" > !} javascript<br > <input type = "checkbox" name = "php" value = "(!LANG:yes" > !} PHP<br > <input type = "checkbox" name = "html" value = "(!LANG:yes" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML



Výsledek:

A.S.P.
javascript
PHP
HTML

V html se zaškrtávací políčko používá k uspořádání vícenásobného výběru, tzn. kdy je nutné a možné vybrat několik odpovědí

<typ vstupu = "radio" name = "kniha" hodnota = "(!LANG:asp" > !} A.S.P.<br > <input type = "radio" name = "book" value = "(!LANG:js" > !} javascript<br > <input type = "radio" name = "book" value = "(!LANG:php" > !} PHP<br > <typ vstupu = "radio" name = "kniha" hodnota = "(!LANG:html" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML




Výsledek:

A.S.P.
javascript
PHP
HTML

přepínač html slouží pro jeden výběr z více možností

Atribut zaškrtnuto okamžitě nastaví prvek na zaškrtnuto

Důležité: Pro prvky rádio je nutné, aby hodnota atributu název všechny prvky ve skupině měly stejné: v tomto případě budou prvky fungovat vzájemně propojené, když je jeden prvek zapnutý, ostatní se vypnou

Rozbalovací seznam HTML

Zvažte příklad přidání rozevíracího seznamu:

A.S.P. JavaScript PHP HTML

Výsledek:

• Rozbalovací seznam se skládá z hlavní značky - select - která má uzavírací dvojici a každá položka seznamu je značka volby, uvnitř které je zobrazen text položky
• velikost atributu s hodnotou "jeden" označuje, že seznam ve sbaleném formuláři zobrazuje jednu položku, zbytek se otevře po kliknutí na šipku nabídky
• Vybraný atribut položky (volba) označuje, že tato konkrétní položka bude zpočátku viditelná a ostatní položky jsou „sbalené“

Pro velké a složité seznamy existuje možnost přidat titulky- značka optgroup s atributem label (nápis):

A.S.P. JavaScript PHP HTML ASP v ruštině JavaScript v ruštině

Poskytnout příležitost vybrat více položek současně musíte přidat atribut multiple. Ale v tomto případě by měl být atribut size také nastaven na hodnotu větší než 1:

Text

Výsledek:

• Šířka prvku závisí na atributu cols, který určuje, kolik znaků se vejde vodorovně.
• Atribut rows určuje počet řádků v prvku.

Další prvky

Další prvky a atributy

• Pro ovládání rádio a zaškrtávací políčko je vhodné použít další prvky, které zaprvé ukotví text k samotnému prvku rádia nebo zaškrtávacího políčka a zadruhé při kliknutí přidají tah:

<input type="checkbox" id="book1"> <label for="book1"> A.S.P.</label>

A.S.P.

V příkladu je vytvořen štítek (značka štítku) pro prvek checkbox. Vazba se provádí pomocí atributu id, jehož hodnota je uvedena v atributu label for.

Výsledek:



• Atribut disabled vám umožňuje zakázat prvek, takže jej uživatel nebude moci upravovat:

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" disabled = "disabled" >!} <input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <input type = "checkbox" name = "js" value = "(!LANG:yes" checked = "checked" disabled = "disabled" > !} javascript<br >


A.S.P.
javascript