Zhromažďovanie údajov od používateľa webovej stránky je možné vykonať niekoľkými rôznymi spôsobmi. Formuláre na webových stránkach môžu mať jednoduchú funkciu, ako je prihlásenie používateľa na odber bulletinu, alebo zložitejší účel, napríklad funkciu formulára žiadosti o zamestnanie.
Jedna vec, ktorú majú všetky tieto jednoduché až komplexné formy spoločné, je HTML a konkrétnejšie HTML tag.
Použitie značky formulára
The tag je prvok HTML, ktorý sa používa ako kontajner na uzavretie ďalších prvkov, ktoré možno považovať za stavebné bloky pre formuláre. Niektoré z týchto základných prvkov zahŕňajú značka, tag a tag.
The tag má dôležitý atribút, ktorý prispieva k jeho funkčnosti. Tento atribút sa nazýva akcia a slúži na identifikáciu súboru, do ktorého budú odoslané údaje zadané do formulára.
Použitie príkladu značky
Vyššie uvedený príklad ukazuje, ako používať značku formulára vo vašich projektoch. Jednou z hlavných možností je, že ak otvoríte značku formulára, nezabudnite ju zavrieť. Tým sa vytvorí štruktúra formulára a tiež sa zaistí správne spracovanie údajov zadaných do formulára.
Použitie značky
The tag sa používa na opis údajov vo všetkých vstupných poliach vo formulári. Táto značka má príponu pre atribút, ktorý sa používa na vylepšenie funkčnosti formulára.
Súvisiace: Najlepšie bezplatné online editory HTML na testovanie kódu
Ak sa ID priradené k zodpovedajúcemu vstupnému poľu zhoduje s pre hodnota v tag, potom sa toto vstupné pole automaticky zvýrazní, keď kliknete na štítok.
Použitie príkladu značky
First Name:
Na vyššie uvedenom príklade vidíte, že pre atribútu je priradená hodnota fname . Ak teda vytvoríte vstupné pole s príponou fname id, toto pole sa zvýrazní pri každom kliknutí na najprv názov štítok.
Použitie značky
Vo svojej najzákladnejšej forme značku možno považovať za textové pole. The tag zachytáva údaje od používateľa a jednou z jeho najdôležitejších funkcií je typ atribút. The typ atribút označuje typ údajov, ktoré môže toto textové pole zhromažďovať.
Súvisiace: Ako vytvoriť skladaný formulár v CSS
Existuje niekoľko rôznych hodnôt, ktoré môžete priradiť typ atribút, ale niektoré z obľúbenejších sú nasledujúce.
- Text
- Číslo
- E -mail
- Obrázok
- Dátum
- Začiarkavacie políčko
- Rádio
- Heslo
Použitie značky Príklad
First Name:
The tag v kóde uvedenom vyššie má tri rôzne atribúty, z ktorých každý má jedinečnú funkciu. The typ atribútu je priradená textová hodnota, čo znamená, že textové pole bude akceptovať iba znaky.
The id atribút je jedinečný identifikátor textového poľa a je dôležitý, pretože poskytuje prístup k tomuto prvku zo súboru CSS. The názov atribút je tiež jedinečný identifikátor; atribút name sa však používa na interakciu s prvkom na strane servera vývoja.
The id a názov atribútom sa zvyčajne priraďuje rovnaká hodnota, pretože jednému poskytuje prístup k prvku z klientskej strany a druhému zo serverovej strany.
Použitie prvku začiarkavacieho políčka
Prvok začiarkavacieho políčka je v porovnaní s ostatnými prvkami, ktoré môžete použiť s, veľmi jedinečný tag. Umožňuje používateľovi vybrať jednu alebo viac možností zo zoznamu súvisiacich možností. Začiarkavacie políčka sú ľahko identifikovateľné, pretože sú reprezentované malými štvorcovými políčkami, ktoré po zaškrtnutí obsahujú začiarknutie.
Použitie príkladu prvku začiarkavacieho políčka
Programming Languages:
Java
JavaScript
Python
Vo vyššie uvedenom príklade má každý prvok začiarkavacieho políčka atribút hodnoty, čo je dôležité, pretože pomáha odlíšiť každú možnosť začiarkavacieho políčka od kolekcie. Ak si teda používateľ z vyššie uvedených možností vyberie „Java“, údaje to budú odzrkadľovať.
Používanie štítku a rádiových prvkov
The tag a rádiové prvky sú podobné v tom zmysle, že umožňujú používateľovi vybrať iba jednu hodnotu súčasne; dá sa teda povedať, že majú rovnakú funkciu. Vzhľadovo sa však veľmi líšia.
Rádiový prvok je svojim vzhľadom bližšie k prvku začiarkavacieho políčka, avšak pri rádiovom prvku máte namiesto štvorcov kruhy.
The tag vytvára v podstate rozbaľovacie pole, ktoré umožňuje používateľovi vybrať jednu hodnotu.
Použitie príkladu tagu a rádiového prvku
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Použitie prvku dátumu
Prvok dátumu vytvorí malé textové pole, ktoré po kliknutí vygeneruje kalendár. Použitím dátum ako typ vstupu vo vašich formulároch chráni pred prípadným zadaním nesprávneho dátumu používateľom, čo môže potenciálne viesť k zhromažďovaniu chybných údajov.
Použitie príkladu prvku dátumu
Použitie prvku E -mail a heslo
Keď vývojár priradí hodnoty e -mailu alebo hesla k atribútu typu súboru tag, každý produkuje identické textové pole. Keď však tieto políčka začnete používať, rozdiely budú zrejmé.
Prvok e -mailu monitoruje údaje zadané do textového poľa a zaisťuje, aby každé odoslanie spĺňalo štandardné požiadavky na e -mailovú adresu; čo znamená mať miestnu časť, za ktorou nasleduje symbol @ a končiť doménou.
Použitie príkladu prvku e -mailu
V uvedenom príklade sa vám predstaví nový atribút s názvom zástupný symbol , a tento atribút má textovú hodnotu, ktorá je zobrazená v textovom poli vyblednutou sivou. Tento text sa používa na označenie údajov, ktoré sa majú vložiť do textového poľa, ako je vidieť na vyššie uvedenom príklade.
Element hesla pri zadávaní do textového poľa zmení znaky na hviezdičky. Preto, ak je obrazovka vášho počítača viditeľná pre ostatných, neuvidí zadané heslo.
Použitie príkladu prvku hesla
Použitie značky tlačidla
Vo forme zvyčajne existujú dva rôzne typy tlačidiel. Prvým je tlačidlo Odoslať, ktoré odosiela údaje zadané vo formulári na hodnotu priradenú k atribútu akcie (ktorá sa nachádza v < forma> značka).
Príklad tlačidla Odoslať
Submit
Druhým typom tlačidla, ktoré sa zvyčajne používa vo formulári, je tlačidlo reset, ktoré vymaže údaje vo formulári, aby používateľ mohol zadávať nové údaje. The značka má a typ atribút, ktorý slúži na označenie funkcie tlačidla. V príklade vyššie typ atribútu je priradená hodnota Predložiť , teda tlačidlo, ktoré má a typ hodnota resetovať slúži na reset formulára.
Príklad tlačidla Reset
Reset
Vytvorenie formulára
Na vytvorenie jednoduchého formulára v HTML budete potrebovať všetky vyššie uvedené prvky tag.
Vytvorenie príkladu formulára
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Vyššie uvedený kód vytvorí nasledujúci formulár:
ako hrať počítačové hry v televízii
Teraz môžete vytvoriť jednoduchý formulár v HTML
Tento článok vám poskytne všetky nástroje na vytvorenie funkčného formulára HTML. Identifikuje rôzne značky HTML, ktoré sa používajú pri vytváraní formulárov, a skúma rôzne atribúty, ktoré je možné s týmito značkami použiť.
Väčšina formulárov, ktoré vidíte na webových stránkach, má však jednu ďalšiu súčasť; CSS, ktorý sa používa na uvedenie formy do života a jej zvýšenie estetiky.
zdieľam zdieľam Tweet E -mail Cheat Sheet The Essential CSS3 PropertiesOvládajte základnú syntax CSS s naším cheatovým hárkom vlastností CSS3.
Čítajte ďalej Súvisiace témy- Programovanie
- HTML
- Vývoj webových aplikácií
- Návody na kódovanie
Kadeisha Kean je softvérový vývojár a technický/technologický spisovateľ. Má výraznú schopnosť zjednodušiť niektoré z najzložitejších technologických konceptov; produkovať materiál, ktorému každý technologický nováčik ľahko porozumie. Je nadšená písaním, vývojom zaujímavého softvéru a cestovaním po svete (prostredníctvom dokumentov).
Viac od Kadeisha Keanaprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber