poskytnout svým zákazníkům jednoduché registrační a registrační formuláře na vašem webu je nezbytné pro zachycení potenciálních zákazníků, rozšíření seznamu e-mailů a zvýšení celkového prodeje.
je tu jen jeden problém: HTML.
HTML5 je standardní kód používaný k tomu, aby většina webových stránek fungovala. Je to jazyk internetu. Ale jako každý programovací jazyk-od JavaScriptu a jquery po PHP a CSS3-existuje strmá křivka učení, zvláště pokud jste se nikdy nedotkli žádného kódu.
nebojte se. Jsme tu, abychom vám pomohli. Možná vás budeme moci přes noc proměnit v Billa Gatese, ale s pomocí několika užitečných příkladů budete na konci tohoto tutoriálu připraveni vytvořit základní registrační formulář pomocí HTML v žádném okamžiku.
Before než začneme: chcete se vyhnout problémům s používáním HTML? S formulářem, jako je Paperform, můžete ušetřit čas a vytvořit výkonný, profesionální registrační formulář během několika minut.
5 kroků k vytvoření registračního formuláře HTML
jste zaneprázdněni, víme. K přečtení je bilion článků. Filmy Netflix ke sledování. Televizní pořady na flámu. Pojďme tedy přímo do pětistupňového průvodce vytvořením registračního formuláře v HTML.
Krok 1. Vyberte Editor HTML
stejně jako potřebujete textový procesor k vytvoření textového dokumentu, potřebujete textový editor k vytvoření kódu HTML. Tyto vývojové nástroje převádějí podivný a úžasný kód, který zadáte, do registračního formuláře.
na trhu jsou desítky (ne-li stovky) editorů HTML, z nichž většina má tendenci nabízet podobné funkce. Nebudeme vás nudit detaily, ale existuje několik klíčových věcí, které vám usnadní život:
detekce chyb: Automaticky zvýrazněte chyby syntaxe, abyste usnadnili opravy.
Automatické dokončení: navrhuje relevantní prvky HTML na základě předchozích změn(ušetří vám spoustu času s dlouhým kódem).
zvýraznění syntaxe: použije barvy na různé značky HTML založené na určitých kategoriích, aby bylo snazší číst a třídit kód.
vyhledávání a nahrazování: Vyhledejte a přepište všechny instance určitého kódu, nikoli jednotlivé úpravy.
pokud se opravdu dostáváte do kódování, je třeba se obávat více funkcí, ale to by vás mělo více než pokrýt pro tento jednoduchý registrační formulář.
která aplikace vyberete, je věcí osobních preferencí. Chcete něco, co můžete použít ve svém prohlížeči? Zkuste Codepen. Barebone? Zápisník++. Minimalistické uživatelské rozhraní a intuitivní vstupní pole? Vznešený Text celou cestu.
náš spoluzakladatel a rezidentní kód-geek, Dean, přísahá podle VS kódu.
“ z nerdy hlediska VS kód se pohodlně vejde do Tech zásobníku Paperform a má skvělé pluginy pro vzdálený vývoj, které miluji. Je to skvělé pro HTML věci příliš, a super přizpůsobitelné, pokud se vám líbí vaše nástroje vypadat hezky a přitom mají všechny funkce, které potřebujete.
není třeba se na to příliš fixovat. Bohužel neexistuje HTML editor, který by vám vygeneroval registrační formulář, bez ohledu na to, jak skvělý to může být. Ta část je na tobě.
Krok 2. Vytvořte soubor HTML
dalším krokem je sdělit textovému editoru, že máte v úmyslu vytvořit soubor HTML. Udělejte to vytvořením nového souboru a jeho uložením pomocí“.html “ rozšíření.
například “ myform.html“. Jakmile se do editoru přihlásíte, že vytváříte HTML kód, měl by pro vás automaticky vygenerovat následující kód:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Tip: někteří editoři nebudou automaticky vyplňovat. To je v pořádku. Stačí zkopírovat a vložit tento kód výše a bude mít stejný účinek.
Krok 3. Přidejte textová pole a vytvořte formulář
v pořádku. Je čas začít přidávat příslušný kód a přeměnit tento barebones HTML na registrační formulář.
Nyní, pokud jste právě tady pro kód, kterému rozumíme. Níže najdete vše, co potřebujete, odstavec nebo dva. Neváhejte přeskočit dopředu. 👇
ale pokud máte zájem dozvědět se něco o tom, co vstupujete ve skutečnosti znamená, Dovolte nám quick-fire HTML tutorial interlude.
HTML formulář se skládá z „prvků formuláře“. Jedná se o věci, jako jsou textová pole, přepínací tlačítka, zaškrtávací políčka a rozbalovací nabídky, díky nimž mohou lidé skutečně komunikovat s vaší živou formou.
každý prvek má svou vlastní specifickou značku. Například značka HTML <form> definuje váš kód jako formulář, zatímco <textarea> lze použít ke shromažďování uživatelských vstupů.
tyto prvky jsou jako boty: vždy přicházejí ve dvojicích. Všechny značky, které chcete zahrnout do formuláře, musí být vloženy mezi otevřené <formuláře> a uzavřené </formuláře> značky.
dobře, to jsou Sparknotes. Nyní pro kód, který skutečně musíte zadat. Zde:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>tento (základní) HTML kód vypíše něco, co vypadá takto:
není to zrovna nejlépe vypadající věc na světě, že? Ale hej, zeptali jste se, jak vytvořit registrační formulář HTML. Nestřílejte na poslíčka.
značka <tr> jí říká, aby uspořádala odpovědi v řadě, zatímco <td> (což je zkratka pro data tabulky) ukazatele, které chcete zachytit bez ohledu na typ respondentů. V tomto případě jsme pro jednoduchost přidali dvě pole:
- zadejte e-mailovou adresu
- zadejte hesla
nic vám nebrání v přidávání dalších polí. Typy vstupů se pohybují od čísel a dat až po barvy nebo dokonce obrázky. Stačí zkopírovat níže uvedený kód a vložit požadovaný typ vstupu. W3Schools má skvělý seznam, který vás provede.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Tip: výběr správného typu vstupu je zásadní. Říká formulář, jak by měl být text zobrazen na obrazovce. Například poslední věc, kterou chceme, je, aby heslo někoho bylo viditelné při jeho psaní, takže k jeho skrytí používáme typ vstupu „heslo“.
Krok 4. Přidat zástupné symboly
zástupný symbol je text uvnitř polí formuláře, který vyzve respondenty, aby odpověděli určitým způsobem. Používá se hlavně jako šťouchnutí správným směrem, ale je to také užitečná strategie, jak učinit formuláře poutavějšími.
řekněme například, že do formuláře přidáváte pole s jednoduchým názvem. Dalo by se zadat „vložit jméno“ a musí být provedeno s ním, nebo byste mohli smrk věci do psaní „Bruce Wayne“ pro trochu vkusu.
bez ohledu na strategii, kterou hledáte, je poměrně jednoduché přidat zástupné symboly do registračního formuláře HTML. Za typ vstupu vložte „placeholder=“ s textem, který chcete zobrazit.
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>zadáním tohoto kódu vznikne formulář jako je tento:
Pretty barebones. Ale funguje to. Můžete vytvořit další možnosti pro zákazníky, aby si vybrali své demografické údaje, jako je věk nebo pohlaví, pomocí podobného kódu jako výše.
Chcete-li vytvořit pole pohlaví, vložte do kódu následující hodnoty (přímo nad poslední značku </table>). Přidáme také telefonní číslo a rozevírací možnost „předmět“.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>tím se pole dat změní na zaškrtávací políčka-jedno pro muže a jedno pro ženy. Zde je návod, jak bude vypadat konečná iterace vašeho registračního formuláře HTML:
není to přesně velké odhalení, které jste očekávali,že? Dokážete si představit, že by někdo hledal vaši firmu na Googlu a setkal se s touto stránkou? Nebo sdílení na sociálních médiích?
je bezpečné říci, že tento druh přihlašovacího formuláře HTML by nikoho přesně nepodporoval, aby se přihlásil k Vaší firmě. V jejich myslích by byla jedna zdrcující otázka, což je pravděpodobně ta samá, kterou máte. . .
proč je můj HTML registrační formulář tak ošklivý?
protože nevidíte, že váš HTML formulář není nijak zvlášť atraktivní. Je to trochu ošklivé káčátko. Což je v pořádku-nemůžeme být všichni Margot Robbie-ale lidi to zrovna neláká, aby to vyplnili.
a to je problém. HTML formuláře bývají:
- nudné
- nudné
- obtížné přizpůsobit
- neohrabaný spravovat
to je až na jednoduchou povahu HTML. Je to rámec, který pomáhá dokončit potřebné formy akcí, nicméně, to určitě nevyhraje žádné ocenění za design.
snadným řešením tohoto problému je použití specializovaného online tvůrce formulářů, jako je Paperform, aby se zabránilo těžkému zvedání HTML nebo CSS. Můžete si vytvořit krásnou registraci, kontaktní formuláře a plné vstupní stránky—mezi stovkami dalších výtvorů—během několika minut bez jediného řádku kódu.
ale možná jste opravdu nastaveni na celou věc HTML (nebo možná jste jen blázen za trest). Ať tak či onak, pokud jste opravdu odhodláni k registračnímu formuláři HTML, můžete vylepšit jeho vzhled pomocí CSS.
Krok 5: Upravte svůj registrační formulář HTML pomocí CSS
CSS je programovací jazyk používaný ke stylu dokumentu HTML. Přizpůsobuje, jak jsou prvky HTML zobrazeny na obrazovce, a umožňuje vám přizpůsobit vše od barev písma a neprůhlednosti po přidání obrázku na pozadí nebo propojení na jinou stránku se značkou <href>.
nyní byste zde byli celý týden, kdybychom uvedli každou vlastnost CSS. Mohli bychom to udělat a pokusit se zvýšit SEO této stránky, ale to není pro nikoho žádná zábava. Pokud jste po obsáhlém seznamu, doporučujeme seznam odkazů CSS W3School.
v zájmu našeho tutoriálu dáme našemu registračnímu formuláři HTML rychlý makeover s CSS. Přizpůsobíme barvu textu, styl písma a vyladíme okraje pro všestranný (mírně) lepší vzhled.
Tip Tip: nejběžnějším způsobem přidání CSS na stránku HTML je externí soubor stylů propojený s prvkem. Tento styl list je vytvořen ve stejném textovém editoru a uložen s“.css “ rozšíření.
zde je kód, který použijeme:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }a s touto stylingovou magií bude vaše forma vypadat jako ta níže. Je to trochu jako plácat rtěnku na prase, ale je to lepší do určité míry.
proč registrační formulář HTML není nejlepším řešením
při učení, jak kódovat a vytvářet základní registrační formuláře, je zábavná dovednost vyzvednout, měli byste vážně přehodnotit jejich použití pro jakýkoli důležitý účel. Nesnažte se to bootstrap, prostě to nestojí za čas, úsilí a frustraci.
ať už potřebujete kontaktní formulář pro své klienty, přihlašovací formulář pro vaši firmu nebo registrační formulář pro studenty pro nový školní rok, jakékoli řešení lepící pásky spolu s HTML a CSS skončí vypadat neleštěné a neprofesionální—zejména pokud nemáte žádné předchozí dovednosti v kódování.
naštěstí existuje další způsob, jak vytvořit registrační formuláře, který je mnohem jednodušší, rychlejší a intuitivnější: online tvůrce formulářů, jako je Paperform. S naší jednoduchou platformou můžete být v provozu s krásnou, značkovou formou během několika minut.
s Paperform nemáte jen získat základní HTML formulář. Získáte dynamický zážitek, který vám umožní shromažďovat jakýkoli typ dat, které potřebujete – od jednoduchých kontaktních údajů až po složité výpočty a dokonce i přijímání plateb. Nejsou potřeba žádné odborné znalosti.
navíc je přizpůsobení snadné. Upravte barvy a písma a upravte uživatelské rozhraní formuláře pomocí několika kliknutí. Poté, jakmile budete spokojeni se svým novým vytvořením, můžete formulář vložit na svůj web, hostit jej online zdarma nebo jej vložit na svůj web WordPress pomocí našeho pluginu WordPress.
Chcete-li ukázat, jak je to snadné, jsme šlehačkou up snazzy vypadající registrační formulář:
nemáte pocit, že budování vlastní tvorbu? K tomu slouží naše knihovna 600 + šablon formulářů. Vyberte jednu z našich registračních šablon, přidejte ji do svého účtu jedním kliknutím, a vstaňte a běžte rychleji, než můžete pít ranní espresso.
registrační formulář je jen začátek toho, co můžete dělat s Paperform. Vyzkoušejte si to sami s naší 14denní bezplatnou zkušební verzí-není nutná kreditní karta.
registrační formulář v HTML FAQ
mohu vytvořit HTML registrační formulář bez CSS?
Ano, ale nebylo by to hezké. Ve skutečnosti by to vypadalo jako něco z počátků společnosti Microsoft. Vůbec ne Hezká.
Jak vytvořím registrační formulář HTML s nahráním obrázků?
Chcete-li přidat pole pro nahrávání obrázku, Použijte typ vstupu „soubor“.
mohu vytvořit HTML formulář bez použití tabulky?
zatímco příkaz tabulky pomáhá s zarovnáním, je snadné vytvořit formulář bez něj. Jednoduše zadejte své vstupy bez příkazů “ tr „nebo “ td“.
je možné použít registrační formulář HTML pro online nakupování
Ano. Chcete-li vytvořit online nákupní formulář, uveďte pole pro kontaktní informace, dodací adresu, ID produktu a místo dodání. Při výběru plateb se věci zkomplikují,proto doporučujeme jednoduché platební formuláře Paperform.
Jak vytvořím přihlašovací a registrační stránku?
jsme se zabývali tím, jak je vytvořit, ale odpověď je se spoustou kódu a ladění. Je mnohem snazší použít vyhrazený online tvůrce formulářů, jako je Paperform.