Ako vytvoriť HTML formuláre: 11 krokov (s obrázkami)

Formulár môžete pridať do existujúceho dokumentu HTML vo vnútri <formulár></form> Značky. Tieto značky slúžia ako kontajner pre všetky údaje vášho formulára, ako sú textové polia, zoznamy a tlačidlá. Keď niekto odošle informácie prostredníctvom vášho formulára, údaje sa odošlú na sever, ktorý na základe obsahu uloží, spracuje, odošle alebo zobrazí výsledky. Naučte sa, ako nastaviť <formulár> aby váš formulár robil to, čo chcete, ako aj to, ako pridať vstupy na zhromažďovanie informácií.

Časť 1 z 3:Vytvorenie značky formulára

Otvorte dokument HTML v preferovanom textovom editore. Obsah formulára HTML musí byť zadaný v rámci <formulára> a </form> tagy. Tieto značky fungujú ako kontajner pre váš formulár, podobne ako iné kontajnerové značky, napr <div></div> a <tabuľka></tabuľka>[1]

  • Vo vnútri môžete použiť CSS alebo HTML <formulár></formulár> značky, aby váš formulár vyzeral podľa vašich predstáv.

Otvoriť <formulár> prvku. Ak chcete spustiť formulár, prejdite na miesto v súbore, kde by sa mal formulár začať, a zadajte <formulár> na vlastnom riadku. Táto značka označuje začiatok vášho formulára.

Pridajte atribút „action=“ do <formulár> tag. Týmto poviete <formulár> značka, čo sa má robiť s údajmi formulára. Definujete ho pridaním action="path_to_script" na <Formulár> tag.

  • Napríklad: <form action="/cgi-bin/myformscript.pl"> (ak sa skript, ktorý bude analyzovať údaje formulára, nachádza v adresári na vašom serveri s názvom „cgi-bin“).
  • Ak je skript na inom serveri: <form action="https://www.wikihow.com/formulár">
  • Odoslanie údajov z formulára na e-mailovú adresu (nie skript): [2]
    <form action="mailto:[email protected]" enctype="text/plain">

Rozhodnite sa, ako sa budú odosielať údaje z formulára. Teraz, keď ste definovali, kam sa budú údaje formulára odosielať, musíte sa rozhodnúť, či váš formulár bude údaje „GET“ alebo „POST“. Potom pridáte buď „GET“ alebo „POST“ ako metóda atribút vo vnútri <formulár> označiť.[3]

  • Použite stránku method="get" na vyžiadanie údajov zo zdroja. Na načítanie údajov by ste mali používať len metódu GET. Nikdy nepoužívajte GET s citlivými informáciami, ako sú heslá alebo čísla sociálneho zabezpečenia.
  • Použite method="post" na odoslanie údajov na spracovanie. Použite to, ak sú údaje vo formulári citlivé, napríklad pre heslá alebo čísla kreditných kariet.
  • Konečný výsledok by mal mať tento formát: <form action="/cgi-bin/myformscript.pl" method="post">

Časť 2 z 3:Pridávanie možností formulára

Vytvorenie textového poľa pomocou <input type="text" />. Môžete pridať prázdne pole, do ktorého môžu návštevníci napísať svoje meno, komentár alebo čokoľvek iné, čo budete potrebovať. Začnite ju na novom riadku za <formulár> tag.

  • Napríklad, Krstné meno: <input type="text" id="meno" /> vytvorí textové pole s predponou „Krstné meno:“, aby používatelia vedeli, čo majú do poľa napísať.
  • Zmeňte hodnotu „id=“ („meno“ v príklade) tak, aby zodpovedala tomu, čo s údajmi robíte. Ak sa údaje odosielajú do skriptu, táto hodnota by mala zodpovedať niečomu v skripte.

Vytvorenie poľa s heslom. Ak váš skript vyžaduje, aby používateľ zadal heslo, pridáte ďalší <input />, tentoraz s atribútom „type“ nastaveným na „password“.“

  • Na novom riadku zadajte Heslo: <input type="password" name="password" />

Pridajte rádiové tlačidlá pre možnosti. Ak chcete, aby si návštevníci vybrali zo zoznamu položiek, vytvorte zoznam možností s rádiovými tlačidlami. Na tento účel použijete <input /> s atribútom „type“ nastaveným na „radio“.

  • Vytvorenie rádiového tlačidla na výber „Pes“ alebo „Mačka“:
    • <input type="radio" name="pets" value="dog" /> Pes
    • <input type="radio" name="pets" value="cat" /> Kat
  • Skupina rádiových tlačidiel by mala mať rovnaký atribút „názov“.

Ďalšie pokročilé možnosti formulára. Existuje veľa typov vstupov a zoznamov, ktoré môžete zahrnúť do formulára. Skvelým spôsobom, ako rozšíriť svoje znalosti o formulároch HTML, je prezrieť si stránku HTML Forms spoločnosti W3school. Okrem toho existuje mnoho užitočných článkov wikiHows, ktoré vás prevedú nastavením položiek, ako sú vyberateľné zoznamy, tlačidlá na resetovanie/vymazanie a zaškrtávacie políčka.

Časť 3 z 3:Uzatvorenie formulára

Vytvorenie formulára Odoslať <Tlačidlo>. Keď váš návštevník vyplní formulár, bude ho musieť odoslať kliknutím na tlačidlo odoslať. Tu je príklad: [4]

  • <button type="submit">Odoslať správu</button>
  • Nahraďte text „Odoslať správu“ textom, ktorý sa má zobraziť na tlačidle.

Typ </form> na konci formulára. Tento tag označuje, že formulár je ukončený. Nezabudnite, že všetok obsah formulára sa musí nachádzať vo vnútri <formulár> a </formulár>.

  • Nahrajte dokument na webový server. Teraz, keď ste pridali formulár do dokumentu HTML, nahrajte ho na webový server a otestujte ho!
  • Odkazy