Selles õpetuses õpid, kuidas luua oma esimene lihtne vorm HTML-is. Vormid on veebirakenduste oluline osa ja võimaldavad kasutajatel sisestada teavet ja saata selle serverisse. Selles samm-sammult juhendis saate põhjaliku ülevaate HTML-vormi põhielementidest ja sellest, kuidas erinevad elemendid koostööd teevad andmete edastamiseks.
Olulisemad teadmised
- HTML-vorm määratletakse
<form>-sildiga. - Attribuudid action ja method määravad, kuhu andmed saadetakse ja millist meetodit kasutatakse.
- Vormiväljad määratletakse tavaliselt
<input>, <label>ja<button>-ga. - Andmeid saab serverisse saata kas GET või POST kaudu.
Samm-sammult juhend
1. Loo HTML põhistruktuur
Esiteks vajad lihtsat HTML-dokumenti põhistruktuurina. Veendu, et sul on HTML-dokumendi põhielemendid olemas:
2. Lisa vormi silt
Järgmine samm on vormi määratlemine. Sa lisad <form>-sildi ning vajad atribuute action ja method. Siin on lihtne näide, kus action määrab URL-i, kuhu andmed saadetakse, ja method on seatud GET, et andmeid edastada URL-i kaudu.
3. Lisa silt ja sisestusväli
Vormis soovid luua märgistatud sisestusvälja. Selleks kasuta <label>-silti märgistamiseks ja <input>-silti tegeliku sisestusvälja loomiseks. Kindlasti veendu, et märgise for-atribuut vastab sisestusvälja id-le.
4. Lisa Saada-nupp
Vormi andmete saatmiseks vajad nuppu. See on realiseeritud <button>-sildiga ja peaks olema tüübilt submit, et vorm saaks nupule klõpsamisel saata
5. Testi vormi
Pärast vormi loomist on aeg seda brauseris testida. Sisesta näide sisestusväljale ja klõpsa Saada-nupul. Sa peaksid nägema, et vormi edastamisel saadetakse sisestatud andmed URL-i määratud action-i kaudu.
6. Muuda sisestusatribuute
Sisestusväljade muutuste nägemiseks saad kohandada <input>-sildi atribuute. Näiteks muuda nime-atribuuti, et eristada edastatud andmeid. Näiteks muuda sisestusvälja nimi nimest eesnimi.
7. Andmete edastamine ja päringu tüüp
Enne täiendavaid teste on oluline teada, et meetod GET saadab andmed URL-i kaudu, samal ajal kui POST saadab andmed HTTP-päringu kehasse. Saad päringutüüpi muuta, muutes <form>-sildi method-attribuudi.
8. Simuleeri serverireaktsiooni
Kuna tõenäoliselt pole sul vormi testimisel reaalset serverit, saad muuta action-URL-i, et simuleerida teist HTML-lehte, kuhu kasutajad pärast vormi edastamist suunatakse. Tee uus HTML-fail, mis sisaldab näiteks tänulehte.
9. Veakontroll ja veaotsing
Kui vormi edastamisel ilmnevad vead, kontrolli brauseri Network-Tools-i. Seal näed, kas vorm saadeti edukalt ja milliseid andmeid edastati. Pööra tähelepanu ka võimalikele 404-veadele, mis viitavad, et siht-URL-i ei leitud.
10. Lõpetamine ja eelvaade
Nüüd on sul põhiline arusaam HTML-vormide loomisest. Saad seda tehnikat laiendada, et luua keerukamaid vorme, mis hõlmavad erinevaid sisestustüüpe ja valideerimist. Järgmises juhendis saad teada, kuidas JavaScript reageerib vormi sisestustele ja viib läbi asünkroonse andmeedastuse.
Kokkuvõte
Selles õpetuses oled tutvunud oma esimese HTML-vormi struktuuri ja toimimisega. Nüüd tead, kuidas luua sisestusvälju, silte ja nuppe ning kuidas saadetud andmed edastatakse URL-i kaudu või POST-päringu kehas.
Korduma Kippuvad Küsimused
Mis vahe on GET-il ja POST-il?GET edastab andmed URL-i kaudu, samas kui POST saadab andmed päringu kehas.
Mida peaksin action-atribuudis märkima?Action-atribuudis märkige URL, kuhu soovite vormiandmed saata.
Kuidas ma saan veenduda, et minu vorm töötab?Testige vormi brauseris ja kontrollige saadetud andmeid võrgutoodetes.
Kuidas luua vormis mitu sisestusvälja?Lisage esimese -märgi alla rohkem -märke ja veenduge, et igal neist oleks unikaalne name-atribuut.
Mis juhtub pärast vormi saatmist?Kui saadetakse GET-päring, laaditakse leht uuesti ja andmed ilmuvad URL-ile. POST-päringu korral sõltub reaktsioon samast serverist.
