Jak vytvořit formulář v HTML

Jak vytvořit formulář v HTML

Shromažďování dat od uživatele webových stránek lze provádět několika různými způsoby. Formuláře na webových stránkách mohou mít jednoduchou funkci, jako je přihlášení uživatele k odběru zpravodaje, nebo složitější účel, jako je například žádost o zaměstnání.





Jedna věc, kterou mají všechny tyto jednoduché až složité formy společné, je HTML a konkrétněji HTML štítek.



Pomocí značky formuláře

The tag je prvek HTML, který se používá jako kontejner k uzavření dalších prvků, které lze považovat za stavební bloky formulářů. Některé z těchto základních prvků zahrnují tag, tag a štítek.





The tag má důležitý atribut, který přispívá k jeho funkčnosti. Tento atribut se nazývá akce a slouží k identifikaci souboru, do kterého budou data zadaná do formuláře předána.

Použití příkladu značky





Výše uvedený příklad ukazuje, jak použít značku formuláře ve vašich projektech. Jedním z hlavních způsobů je, že pokud otevřete značku formuláře, měli byste ji zavřít. Tím se vytvoří struktura formuláře a také se zajistí, že data zadaná do formuláře budou správně zpracována.



Použití značky

The tag se používá k popisu dat v každém vstupním poli ve formuláři. Tato značka má příponu pro atribut, který se používá k vylepšení funkcí formuláře.

Příbuzný: Nejlepší online editory HTML k otestování vašeho kódu



Pokud se ID přiřazené k odpovídajícímu vstupnímu poli shoduje s pro hodnota v tag, pak se toto vstupní pole automaticky zvýrazní po kliknutí na štítek.

Použití příkladu značky


First Name:

Na výše uvedeném příkladu vidíte, že pro atributu je přiřazena hodnota fname . Pokud tedy vytvoříte vstupní pole pomocí fname id, toto pole bude zvýrazněno při každém kliknutí na za prvé název označení.



Použití značky

Ve své nejzákladnější podobě značku lze považovat za textové pole. The tag zachycuje data od uživatele a jednou z jeho klíčových funkcí je typ atribut. The typ atribut udává typ dat, která může toto textové pole shromažďovat.

Příbuzný: Jak vytvořit skládaný formulář v CSS

Existuje několik různých hodnot, které můžete přiřadit typ atribut, ale některé z populárnějších jsou následující.

  • Text
  • Číslo
  • E-mailem
  • obraz
  • datum
  • Zaškrtávací políčko
  • Rádio
  • Heslo

Použití značky Příklad


First Name:

The tag ve výše uvedeném kódu má tři různé atributy, z nichž každý má jedinečnou funkci. The typ atributu je přiřazena textová hodnota, což znamená, že textové pole bude přijímat pouze znaky.

The id atribut je jedinečný identifikátor pro textové pole a je důležitý, protože poskytuje přístup k tomuto prvku ze souboru CSS. The název atribut je také jedinečný identifikátor; atribut name se však používá k interakci s prvkem na straně serveru na straně vývoje.

The id a název atributům je obvykle přiřazena stejná hodnota, protože jeden poskytuje přístup k prvku na straně klienta a druhý na straně serveru.

Pomocí prvku Checkbox

Prvek zaškrtávacího políčka je velmi jedinečný ve srovnání s ostatními prvky, které můžete použít s štítek. Umožňuje uživateli vybrat jednu nebo více možností ze seznamu souvisejících voleb. Zaškrtávací políčka lze snadno identifikovat, protože jsou reprezentována malými čtvercovými políčky, která po zaškrtnutí obsahují zaškrtnutí.

Použití příkladu prvku zaškrtávacího políčka


Programming Languages:
Java
JavaScript
Python

Ve výše uvedeném příkladu má každý prvek zaškrtávacího políčka atribut hodnoty, což je důležité, protože pomáhá odlišit každou možnost zaškrtávacího políčka od kolekce. Pokud tedy uživatel z výše uvedených možností zvolí „Java“, data to budou odrážet.

Používání tagu a rádiových prvků

The tag a rádiové prvky jsou podobné v tom smyslu, že umožňují uživateli vybrat pouze jednu hodnotu najednou; lze tedy říci, že mají stejnou funkci. Vzhledově se však velmi liší.

Rádiový prvek je vzhledově blíže prvku zaškrtávacího políčka, ale u rádiového prvku máte místo čtverců kruhy.

The tag vytváří v podstatě rozevírací pole, které uživateli umožňuje vybrat jednu hodnotu.

Použití pří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

Pomocí prvku Datum

Prvek data vytvoří malé textové pole, které po kliknutí vygeneruje kalendář. Použitím datum jako typ vstupu ve vašich formulářích chrání uživatele před potenciálním zadáním nesprávného data, což může potenciálně vést ke shromažďování chybných dat.

Použití příkladu prvku data


Pomocí e -mailu a hesla

Když vývojář přiřadí hodnoty e -mailu nebo hesla k atributu typu souboru tag, každý vytvoří stejné textové pole. Když však začnete tato pole používat, rozdíly se stanou zjevnými.

Prvek e -mailu monitoruje data zadaná do textového pole a zajišťuje, aby každé podání splňovalo standardní požadavek na e -mailovou adresu; což znamená mít místní část, za ní symbol @ a končit doménou.

Použití příkladu prvku e -mailu


Ve výše uvedeném příkladu se seznámíte s novým atributem s názvem zástupný symbol , a tento atribut nabývá textové hodnoty, která je zobrazena v textovém poli vybledlou šedou. Tento text se používá k označení dat, která mají být umístěna do textového pole, jak je vidět na výše uvedeném příkladu.

Prvek hesla mění znaky při zadávání do textového pole na hvězdičky. Pokud je tedy obrazovka vašeho počítače viditelná pro ostatní lidi, neuvidí zadané heslo.

Použití příkladu prvku hesla


Pomocí tlačítka Button

Ve formě obvykle existují dva různé typy tlačítek. Prvním je tlačítko Odeslat, které odešle data zadaná ve formuláři na hodnotu přiřazenou k atributu akce (která se nachází v < formulář> štítek).

Příklad tlačítka Odeslat

Submit

Druhým typem tlačítka, které se obvykle používá ve formuláři, je tlačítko pro reset, které vymaže data ve formuláři, aby uživatel mohl zadat nová data. The tag má a typ atribut, který slouží k označení funkce tlačítka. V příkladu výše typ atribut je přiřadit hodnotu Předložit , tedy tlačítko, které má a typ hodnota resetovat slouží k resetování formuláře.

Příklad tlačítka Reset

Reset

Vytvoření formuláře

Chcete -li vytvořit jednoduchý formulář v HTML, budete muset přiložit všechny výše uvedené prvky do souboru štítek.

Vytvoření příkladu formuláře






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




Výše uvedený kód vytvoří následující formulář:

je legální stahovat videa z youtube?

Nyní můžete vytvořit jednoduchý formulář v HTML

Tento článek vám poskytne všechny nástroje k vytvoření funkčního formuláře HTML. Identifikuje různé značky HTML, které se používají při vytváření formulářů, a zkoumá různé atributy, které lze s těmito značkami použít.

Většina formulářů, které vidíte na webových stránkách, má však jednu další součást; CSS, který se používá k tomu, aby forma ožila a byla estetičtější.

Podíl Podíl tweet E-mailem Cheat Sheet Essential CSS3 Properties

Zvládněte základní syntaxi CSS s naším cheatem vlastností CSS3.

Číst dále Související témata
  • Programování
  • HTML
  • Vývoj webu
  • Návody na kódování
O autorovi Kadeisha Kean(21 článků zveřejněno)

Kadeisha Kean je vývojář softwaru a technický/technologický spisovatel v plném zásobníku. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; produkující materiál, kterému každý technologický nováček snadno porozumí. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).

Více od Kadeisha Kean

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru