furnizarea clienților dvs. cu formulare simple de înscriere și înregistrare pe site-ul dvs. web este esențială pentru captarea clienților potențiali, creșterea listei de e-mailuri și creșterea vânzărilor globale.
există o singură problemă: HTML.
HTML5 este codul standard utilizat pentru a face majoritatea paginilor web să funcționeze. Este limba internetului. Dar, ca orice limbaj de programare—de la Javascript și jquery la PHP și CSS3—există o curbă de învățare abruptă, mai ales dacă nu ați atins niciodată niciun cod.
nu te teme. Suntem aici pentru a ajuta. S-ar putea să vă putem transforma în Bill Gates peste noapte, dar cu ajutorul unor exemple utile, până la sfârșitul acestui tutorial, veți fi gata să creați un formular de înregistrare de bază folosind HTML în cel mai scurt timp.
inqu înainte de a începe: doriți să evitați hassle de a folosi HTML? Cu un constructor de formulare precum Paperform, puteți economisi timp și puteți crea un formular de înregistrare profesional puternic în câteva minute.
5 pași pentru crearea unui formular de înregistrare HTML
sunteți ocupat, știm. Sunt un trilion de articole de citit. Filme Netflix pentru a viziona. Emisiuni TV la chef. Așadar, să intrăm direct în ghidul în cinci pași pentru crearea unui formular de înregistrare în HTML.
Pasul 1. Alegeți un editor HTML
la fel cum aveți nevoie de un procesor de text pentru a crea un document text, aveți nevoie de un editor de text pentru a crea cod HTML. Aceste instrumente de dezvoltare convertesc codul ciudat și minunat pe care îl tastați într-un formular de înregistrare.
există zeci (dacă nu sute) de editori HTML pe piață, dintre care majoritatea tind să ofere funcții similare. Nu vă vom plictisi cu detaliile, dar există câteva lucruri cheie care vă vor ușura viața:
detectarea erorilor: Evidențiați automat erorile de sintaxă pentru a ușura corecțiile.
Auto-completare: sugerează elemente HTML relevante bazate pe modificările anterioare (vă economisește o grămadă de timp cu cod lung).
repere de sintaxă: aplică culori la diferite etichete HTML bazate pe anumite categorii pentru a facilita citirea și sortarea codului.
căutare și înlocuire: Localizați și suprascrieți toate instanțele unui anumit cod, în loc să le editați individual.
dacă într-adevăr intrați în codificare, există mai multe funcții de care să vă faceți griji, dar asta ar trebui să vă acopere mai mult decât acest formular simplu de înregistrare.
care app Selectați este o chestiune de preferință personală. Vrei ceva pe care le puteți utiliza în browser-ul? Încearcă Codepen. Barebones? Notepad++. Un UI minimalist și câmp de intrare intuitiv? Text sublim până la capăt.
co-fondatorul și Codul nostru rezident-geek, Dean, jură pe VS Code.
„din punct de vedere tocilar vs cod se potrivește snuggly în stiva tech Paperform lui și are plugin-uri de dezvoltare de la distanță mari pe care le iubesc. Este minunat și pentru chestii HTML și super personalizabil dacă vă place ca instrumentele dvs. să arate frumos, având în același timp toate funcționalitățile de care aveți nevoie.
nu este nevoie să se fixeze pe acest lucru prea mult. Din păcate, nu există nici un editor HTML care va genera un formular de înregistrare pentru tine, indiferent cât de mare poate fi. Această parte este tot pe tine.
Pasul 2. Creați fișierul HTML
următorul pas este să spuneți editorului de text că intenționați să creați un fișier HTML. Faceți acest lucru creând un fișier nou și apoi salvându-l cu „.html” extensie.
de exemplu, „myform.html”. După ce ați semnalizat editorului că creați cod HTML, acesta ar trebui să genereze automat următorul cod pentru dvs:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 sfat: unii editori nu se vor completa automat. E în regulă. Doar copiați și lipiți acest cod de mai sus și va avea același efect.
Pasul 3. Adăugați câmpuri de text și creați formularul
bine. Este timpul să începeți să adăugați codul relevant și să transformați HTML-ul barebones într-un formular de înregistrare.
acum, dacă sunteți aici doar pentru codul pe care îl înțelegem. Veți găsi tot ce aveți nevoie de un paragraf sau două mai jos. Simțiți-vă liber pentru a sări înainte.
dar dacă sunteți interesat în procesul de învățare un pic despre ceea ce intri de fapt înseamnă, să ne permită un interludiu Tutorial HTML quick-fire.
un formular HTML este format din „elemente de formular”. Acestea sunt lucruri precum casetele de text, butoanele radio, casetele de selectare și meniurile derulante care fac posibil ca oamenii să interacționeze cu formularul dvs. live.
fiecare element are propria etichetă specifică. De exemplu, eticheta HTML <form> definește codul dvs. ca formular, în timp ce <textarea> poate fi utilizată pentru a colecta intrări de utilizator.
aceste elemente sunt ca pantofii: vin întotdeauna în perechi. Toate etichetele pe care doriți să le includeți în formular trebuie inserate între etichetele open <form> și closed </form>.
bine, asta e Sparknotes. Acum, pentru codul pe care trebuie să îl introduceți. Aici:
<!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>acest cod HTML (de bază) va afișa ceva care arată astfel:
nu este chiar cel mai frumos lucru din lume, nu-i așa? Dar hei, ați întrebat cum să creați un formular de înregistrare HTML. Nu împușca mesagerul.
eticheta< tr >îi spune să aranjeze răspunsurile într-un rând, în timp ce< td > (care înseamnă date de tabel) indică faptul că doriți să capturați orice tip de respondenți. În acest caz, am adăugat două câmpuri de dragul simplității:
- introduceți adresa de e-mail
- introduceți parolele
nimic nu vă împiedică să adăugați câmpuri suplimentare. Tipurile de intrare variază de la numere și date la culori sau chiar imagini. Doar copiați codul de mai jos și introduceți tipul de intrare dorit. W3Schools are o listă mare pentru a vă ghida.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Sfat: Selectarea tipului corect de intrare este crucială. Acesta spune forma modul în care textul ar trebui să fie afișat pe ecran. De exemplu, ultimul lucru pe care îl dorim este ca parola cuiva să fie vizibilă atunci când o tastează, așa că folosim tipul de intrare „parolă” pentru a o ascunde.
Pasul 4. Adăugați substituenți
un substituent este text în câmpurile formularului care solicită respondenților să răspundă într-un anumit mod. Este folosit în principal ca un ghiont în direcția corectă, dar este, de asemenea, o strategie utilă pentru a face formularele mai atractive.
de exemplu, să presupunem că adăugați un câmp de nume simplu la formularul dvs. Ai putea Tip „inserați numele” și să fie făcut cu ea, sau ai putea molid lucrurile scriind „Bruce Wayne” pentru un pic de fler.
indiferent de strategia pe care o alegeți, este destul de simplu să adăugați substituenți la formularul de înregistrare HTML. După tipul de intrare, introduceți” substituent= ” cu textul pe care doriți să îl afișați.
<!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>introducerea acestui cod va produce un formular ca acesta:
destul de barebones. Dar funcționează. Puteți crea opțiuni suplimentare pentru ca clienții să își selecteze datele demografice, cum ar fi vârsta sau sexul, folosind un cod similar cu cel de mai sus.
pentru a crea un câmp gen, introduceți următoarele valori în codul dvs. (chiar deasupra ultimei etichete </tabel>). Vom adăuga, de asemenea, un număr de telefon și drop-down ‘subiect’ opțiune.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>aceasta va transforma câmpul de date în casete de selectare—una pentru bărbat și una pentru femeie. Acum, iată cum va arăta iterația finală a formularului dvs. de înregistrare HTML:
nu este exact Marea dezvăluire pe care o așteptați, nu? Vă puteți imagina pe cineva care vă caută afacerea pe Google și este întâlnit cu această pagină? Sau partajarea acest lucru pe social media?
este sigur să spunem că acest tip de formular de conectare HTML nu ar încuraja pe nimeni să se înscrie pentru afacerea dvs. Ar fi o întrebare copleșitoare în mintea lor, care este probabil aceeași pe care o ai. . .
de ce este formularul meu de înregistrare HTML atât de urât?
deoarece nu puteți vedea formularul HTML nu este deosebit de atractiv. Este un pic de o rățușca cea urâtă. Ceea ce este bine—nu putem fi cu toții Margot Robbie—dar nu îi atrage pe oameni să o completeze.
și asta e problema. Formele HTML tind să fie:
- plictisitor
- plictisitor
- dificil de personalizat
- greoi pentru a gestiona
acest lucru se datorează naturii simple a HTML. Este un cadru care ajută la completarea acțiunilor de formular necesare, cu toate acestea, cu siguranță nu va câștiga niciun premiu de design.
soluția ușoară la această problemă este utilizarea unui constructor de formulare online dedicat, cum ar fi Paperform, pentru a evita ridicarea grea a HTML sau CSS. Puteți construi înregistrări frumoase, formulare de contact și pagini de destinație complete—printre sute de alte creații—în câteva minute fără o singură linie de cod.
dar poate că ești într-adevăr setat pe întregul lucru HTML (sau poate că ești doar un fraier pentru pedeapsă). Oricum, dacă sunteți într-adevăr angajat la formularul de înregistrare HTML vă puteți îmbunătăți aspectul său prin utilizarea CSS.
Pasul 5: Editați formularul de înregistrare HTML cu CSS
CSS este un limbaj de programare folosit pentru a stiliza un document HTML. Acesta personalizează modul în care elementele HTML sunt afișate pe ecran și vă permite să personalizați totul, de la culorile fontului și opacitatea la adăugarea unei imagini de fundal sau conectarea la o altă pagină cu o etichetă <href>.
acum, ați fi aici toată săptămâna dacă am enumera fiecare proprietate CSS. Am putea face asta și să încercăm să stimulăm SEO – ul acestei pagini, dar asta nu este distractiv pentru nimeni. Dacă sunteți după o listă completă, vă recomandăm lista de referință CSS W3School lui.
de dragul tutorialului nostru, vom oferi formularului nostru de înregistrare HTML un makeover rapid cu CSS. Vom personaliza culoarea textului, stilul fontului și vom ajusta marginile pentru un aspect complet (ușor) mai bun.
sfat: cel mai comun mod de a adăuga CSS la o pagină HTML este cu un fișier foaie de stil extern legat cu elementul. Această foaie de stil este creată în același editor de text și salvată cu „.css ” extensie.
Iată codul pe care îl vom folosi:
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 }și cu acea magie de stil, forma ta va ajunge să arate ca cea de mai jos. Este un pic ca un ruj pe un porc, dar este mai bine într-o mică măsură.
de ce un formular de înregistrare HTML nu este cea mai bună soluție
în timp ce învățați cum să codificați și să creați formulare de înregistrare de bază este o abilitate distractivă de ridicat, ar trebui să reconsiderați serios utilizarea lor în orice scop important. Nu încercați să-l bootstrap, este pur și simplu nu merită timp, efort și frustrare.
fie că aveți nevoie de un formular de contact pentru clienții dvs., un formular de conectare pentru afacerea dvs. sau un formular de înregistrare a studenților pentru noul an școlar, orice soluție lipicioasă împreună cu HTML și CSS va ajunge să pară nepoluată și neprofesională-mai ales dacă nu aveți abilități de codificare anterioare.
din fericire, există un alt mod de a construi formulare de înregistrare, care este mult mai ușor, mai rapid și mai intuitiv: un constructor de formulare online, cum ar fi Paperform. Cu platforma noastră ușoară, puteți fi în funcțiune cu o formă frumoasă, de marcă, în câteva minute.
cu Paperform nu obțineți doar un formular HTML de bază. Obțineți o experiență dinamică care vă permite să colectați orice tip de date de care aveți nevoie—de la detalii de contact simple la calcule complexe și chiar la efectuarea plăților. Nu este nevoie de expertiză în proiectare.
în plus, personalizarea este fără efort. Tweak culori și fonturi și ajusta UI formularul cu câteva clicuri. Apoi, odată ce sunteți mulțumit de noua dvs. creație, puteți încorpora formularul pe site-ul dvs. web, îl puteți găzdui online gratuit sau îl puteți încorpora pe site-ul dvs.
pentru a arăta cât de ușor este, am bătut un formular de înregistrare în căutarea snazzy:
nu simt ca construirea propria creație? Pentru asta este biblioteca noastră de peste 600 de șabloane de formular. Selectați unul dintre șabloanele noastre de înregistrare, adăugați-l în contul dvs. cu un singur clic și ridicați-vă mai repede decât puteți bea espresso-ul de dimineață.
un formular de înregistrare este doar începutul a ceea ce puteți face cu Paperform. Încercați-l singur cu încercarea noastră gratuită de 14 zile—nu este necesar un card de credit.
formular de înregistrare în HTML Întrebări frecvente
pot crea un formular de înregistrare HTML fără CSS?
Da, dar nu ar fi frumos. De fapt, ar arăta ca ceva din primele zile ale Microsoft. Deloc frumos.
Cum creez un formular de înregistrare HTML cu încărcarea imaginilor?
pentru a adăuga un câmp de încărcare a imaginii, utilizați tipul de intrare” fișier”.
pot face un formular HTML fără a utiliza un tabel?
în timp ce comanda table ajută la aliniere, este ușor să faceți un formular fără ea. Doar introduceți direct intrările dvs. fără comenzile ‘ tr ‘ sau ‘td’.
este posibil să utilizați un formular de înregistrare HTML pentru cumpărături online
Da. Pentru a crea un formular de cumpărături online, includeți câmpuri pentru informații de contact, adresa de expediere, ID-ul produsului și punctul de livrare. Lucrurile devin dificile atunci când colectați plăți, motiv pentru care vă recomandăm formularele simple de plată Paperform.
Cum creez o pagină de conectare și înregistrare?
am acoperit modul de a crea aceste, dar răspunsul este cu o mulțime de cod și tweaking. Este mult mai ușor să utilizați un constructor de formulare online dedicat, cum ar fi Paperform.