Úvod do ovládania formulárov HTML
HTML je značkovací jazyk pre tvorbu webových stránok. Definuje štruktúru a správanie webovej stránky. HTML pozostáva zo značiek a prvkov, ktoré pomáhajú pri štruktúrovaní webových stránok. Tieto prvky môžu byť zoskupené vo formulári na zhromažďovanie údajov od používateľa spôsobom, ktorý je užívateľsky príjemný. Všimnite si však, že HTML je protokol bez štátnej príslušnosti, čo znamená, že nemôže ukladať nič a stratíte údaje pri obnovovaní stránky.
HTML kontrola formulárov
Existujú rôzne typy riadenia formulárov, ktoré sú definované v HTML. Tieto ovládacie prvky sú zodpovedné za akceptovanie vstupu používateľa určeným spôsobom. Pozrime sa na rôzne typy dostupných ovládacích prvkov formulára v HTML.
1) Ovládanie vstupného textu
Ovládacie prvky vstupného textu sa používajú na zhromažďovanie údajov používateľa ako voľného textu. Na webovej stránke vytvorí obdĺžnikové pole, do ktorého môžu používatelia vkladať údaje.
Existujú rôzne typy ovládacích prvkov vstupného textu, ktoré sa dajú použiť vo formátoch HTML. Pozrime sa na rôzne typy ovládacích prvkov vstupného textu.
- Jednoriadkový vstupný text
To umožňuje užívateľovi zadať iba jeden riadok údajov. Typickým príkladom takýchto ovládacích prvkov vstupného textu je zadanie názvu, vyhľadávacieho poľa, mesta atď.
- Viacriadkový vstupný text
Tento typ riadenia vstupu umožňuje užívateľovi zadávať údaje z viacerých riadkov. Typické použitie takýchto vstupných ovládacích prvkov je pre komentáre, adresy, popis atď.
Riadky tu označujú počet riadkov v textovej oblasti a stĺpec označuje počet stĺpcov.
- Ovládanie zadávania hesla
Ako už názov napovedá, zvyčajne sa používa v poli pre heslo. Funguje to rovnako ako vstupné textové pole, ale text je z bezpečnostných dôvodov maskovaný.
2) Zadanie typu vstupu
Keď sa zadáva typ vstupu, vykoná akciu definovanú v akcii formulára a odošle údaje formulára na server.
Hodnoty užívateľského mena a hesla sa tu odošlú na server kliknutím na udalosť tlačidla Odoslať. Akcia vo forme je serverová metóda, ktorá akceptuje vstup.
3) Typ vstupu Rádio
Prepínače sa používajú, keď očakávate, že používatelia vyplnia údaje ako logické hodnoty, alebo ak z viacerých možností očakávate iba jeden vstup. Najbežnejším prípadom použitia prepínačov je určenie pohlavia, typ zamestnanca (bežný / dočasný) a tak ďalej.
4) Zaškrtávacie políčko Typ vstupu
Zaškrtávacie políčko umožňuje používateľovi vybrať, ktoré informácie sú v jeho prípade pravdivé. Je to veľmi pohodlný spôsob prijímania údajov, keď je možný vstup už známy.
Napríklad, ak chcete zozbierať typ poistenia, ktoré drží jednotlivec, môžete pomocou začiarkavacích políčok ľahko obmedziť možnosti.
5) Rozbaľovací zoznam Typ vstupu
Rozbaľovací zoznam umožňuje užívateľovi vybrať jednu z viacerých možností. Jedná sa o veľmi príjemný spôsob, ako získať podrobnosti od používateľa, pretože poskytuje vyčerpávajúci zoznam možných možností, ktoré používateľovi pomáhajú určiť najvhodnejšiu možnosť.
Napríklad rozbaľovacia ponuka zobrazí zoznam miest, v ktorých môže zamestnanec patriť
6) Typ vstupu Optgroup
Optgroup funguje podobným spôsobom ako v rozbaľovacom zozname, jediný rozdiel je v tom, že optgroup umožňuje logicky zoskupiť určité možnosti pod jeden dáždnik. Pomáha užívateľovi rýchlo identifikovať príslušnú možnosť pomocou označenia optgroup.
Napríklad rozbaľovacie zoznamy zobrazia zoznamy miest rôznych štátov v Indii zoskupené podľa štátov.
7) fieldset
Fieldset je ďalšia užitočná značka vo forme html, ktorá umožňuje vývojárovi logicky zoskupiť určité ovládacie prvky pod jednu legendu, čo vývojárovi pomáha dať používateľovi jasnú inštrukciu o tom, čo v tejto časti môže očakávať.
Napríklad pole pre prihlasovaciu stránku
8) Výstupná značka HTML
Táto výstupná značka je zavedená v HTML5. Umožní vám okamžite zobraziť výstup výpočtu. To je veľmi užitočné, keď používateľ musí okamžite vykonať výpočet a vidieť výsledky. Typickým príkladom takýchto prípadov je, keď používateľ chce skontrolovať súčet všetkých položiek v košíku.
Vo vyššie uvedenom príklade sme definovali cenové rozpätie položiek ako 0 až 100 a možno ho zmeniť za behu, ďalšie textové pole, ktoré má v ňom hodnotu 12, je daň z tejto položky, môže sa zmeniť aj za behu. Výstupný výsledok 58 je súčtom oboch hodnôt.
Poznámka: Táto značka nie je podporovaná na Edge 12 alebo Internet Explorer staršej verzie.
9) Typ vstupu Farba
Vo forme sa často vyžaduje, aby namiesto akéhokoľvek textu zobrazovala iba farbu. Umožní vám to farba typu vstupu v HTML 5. Ukazuje farbu, ktorú chcete zobraziť vo formulári. Typickým scenárom, v ktorom sa používa, je znázornenie stavu projektu alebo fázy.
Poznámka : Farba nie je podporovaná v niektorých verziách prehliadača Internet Explorer a Edge.
10) Typ vstupu Dátum
Dátum typu vstupu sa bežne používa tam, kde Užívateľ očakáva pole typu dátumu ako vstup, môže to byť napríklad Dátum narodenia, Dátum prijatia do zamestnania, Dátum ukončenia atď. Je zavedený v HTML 5 a formát dátumu sa mierne mení so zmenou prehliadača.
záver
- Zavedením HTML 5 došlo k obrovskému nárastu počtu podporovaných HTML ovládacích prvkov. Tieto ovládacie prvky HTML formulára môžu mať rôzne efekty a farby pomocou CSS 3 a JavaScriptu / jQuery / Angular JS.
- V tomto článku sme sa zaoberali všetkými bežne používanými ovládacími prvkami HTML. Existuje mnoho ovládacích prvkov, ako sú skryté, resetovacie, týždenné, URL, čas, e-mail, súbor, DateTime-local, image, tel, na ktoré sa tento článok nevzťahuje. Pred implementáciou do projektu je veľmi dôležité skontrolovať kompatibilitu týchto ovládačov v prehliadači, pretože veľa verzií prehliadača nepodporuje ovládače formulárov HTML 5.
Odporúčané články
Toto bola príručka pre kontrolu formulárov HTML. Tu diskutujeme úvod a rôzne typy riadenia formulárov, ktoré sú definované v HTML. Viac informácií nájdete aj v ďalších navrhovaných článkoch -
- Atribúty HTML
- Značky formátu HTML
- HTML štýly
- Kariéra v HTML
- Rámčeky HTML
- Bloky HTML
- Nové prvky HTML5
- Nastavte farbu pozadia v HTML s príkladom