Ako vytvoriť formulár v HTML

Ako vytvoriť formulár v HTML

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 Properties

Ovlá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
O autorovi Kadeisha Kean(21 publikovaných článkov)

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 Keana

prihlá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