Vormid määratakse form
-elemendi abil. Kõik elemendid, mis on form
sees, kuuluvad seejärel vastavasse vormi.
<form> … </form>
Vormi alguses oodatakse action
-atribuuti. Selle kaudu määratakse lõpuks, mis vormiandmetega juhtuma peaks. Tavaliselt on tegemist PHP rakendusega.
<form method="post" action="form.php"> … </form>
Veenduge, et märgitud fail oleks tegelikult leitav. Seega peate määrama õige tee.
Skripti asemel võite määrata ka e-posti aadressi.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
Antud juhul saadetakse vormiandmed e-postiga. See ei pruugi olla elegantne, seetõttu kasutatakse peaaegu alati skripti varianti. Kuid kui teil hetkel pole käepärast skripti, saate vajadusel vormi saatmise teha ka e-posti teel.
Veel üks oluline atribuut vormi elemendi jaoks on method
. Sellega määratakse vormiandmete edastamiseks HTTP edastusmeetod. Selleks on saadaval kaks erinevat varianti.
• post
= Vormiandmed saadetakse siin kahte sammu mööda määratud aadressile. Kõigepealt pöördub brauser määratud aadressile. Kui see lõppeb edukalt, edastatakse vormiandmed skriptile.
• get
= Sel viisil lisatakse vormiandmed vormi action
atribuudile määratud URL-i lõppu. Seega on vormiandmed muu hulgas nähtavad ka brauseri aadressireal.
Muidugi tekib küsimus, millist neist kahest variandist vormiandmete edastamiseks kasutada. Põhimõtteliselt võite mõlemad kasutusele võtta. Eriti siis, kui tegemist on suurte andmekogumite ja failide üleslaadimisega serverisse, peaksite aga kindlasti kasutama varianti post
.
Lihtsad vormiväljad
Seni on vormi välimus ainult määratletud. Brauseris ei ole vorm ise siiski veel nähtav.
<form method="post" action="form.php"> … </form>
Nüüd on aeg vorm täita/elu sisse puhuda.
Tõenäoliselt kõige rohkem vaja minev väljatüüp on üherealine sisestusväli. Neid kasutatakse näiteks nime, eesnime ja e-posti aadressi küsimiseks. Üherealisi sisestusvälju määratletakse järgmiselt:
<input type="text" name="vorname" />
input
-elemendile määratakse atribuut-väärtus kombinatsioon type="text"
. Lisaks peaksite andma iga sisestusvälja kohta sisemise märgendi. See märgend peab dokumendis olema üheselt mõistetav. See on eriti huvitav siis, kui tegemist on vormiandmete töötlemisega skripti abil. Märgendis ärge kasutage tühikuid ja erimärke.
Kui vaatate tulemust brauseris, saate järgmise pildi:
Ülimalt spektakulaarne see juba pole. Kuid kui klõpsate tekstiväljal, märkate, et saate juba sisestusi teha.
Et külastajad teaksid, mida sisestusväljale sisestada, on muidugi vaja veel märgistust.
Eesnimi: <input type="text" name="vorname" />
Siin näete brauseris vaadates jälle soovitud tulemust.
Atribuuti size
kasutades saate määrata välja laiuse.
Eesnimi: <input type="text" name="vorname" size="30" /> <br /> Postiindeks: <input type="text" name="plz" size="5" />
size
-atribuudile määratakse soovitud välja laius.
Siin vastab 5
täpselt viiele märgile. Selles kontekstis on huvitav ka atribuut maxlength
. Selle abil määratakse maksimaalne lubatud märkide arv, mida väljale võib sisestada. Siin on jälle üks näide:
Eesnimi: <input type="text" name="vorname" size="30" maxlength="40" />
Kui määratud väärtus maxlength
-il on suurem kui väärtus size
juures, siis pikemate sisestuste korral keritakse väljal automaatselt.
Atribuudi value
abil saate väljale eelvaikimise määrata.
Eesnimi: <input type="text" name="nimi" value="Sinu nimi" />
Omistatud väärtus
on vaikimisi väljale eelnevalt sisestatud.
Kasutajad saavad selle vaikimisi väärtuse kustutada.
Te võite takistada väärtuste kustutamist väljadest. Selleks määratakse sisendväli, mis tegelikult polegi sisendväli. Tegelikult kasutatakse selliseid välju sageli väljundiks. See võib olla huvitav näiteks skriptiga määratud väärtuste kuvamiseks. Mõelge näiteks taskuarvutile. Samuti saab käsitsi täita välja tekstiga, mida külastajad enam muuta ei saa. (Märkus: Euro märki PDF-vaates kahjuks õigesti ei kuvata).
<input name="hind" type="text" value="€ 699.-" readonly />
Välja muutmiseks ainult-lugemiseks määratakse sellele atribuut readonly
. Ka siin vaadake tulemust:
Eeldefineeritud tekst on kohe nähtav. Siiski seda kustutada ei saa.
Salasõnavälja määratlemine
Ilmselgelt teate salasõnavälju. Kõikjal, kus registreerute, peate määrama salasõna. (Tavaliselt peab seda isegi kaks korda sisestama).
Sisestatud andmed sisendväljal pole nähtavad, vaid brauser asendab need automaatselt tärnide/punktidega. Selle variandi eelis: inimesed, kes võivad teie salasõna sisestamise ajal heita pilgu üle õla, ei saa parooli dešifreerida. Siiski on eksiarvamus, et salasõnaväljad on automaatselt turvalised. Tegelikult saadetakse paroolid tavalise HTTP korral selgelt tekstina vormi edastamisel.
Salasõnaväljad määratakse järgmiselt:
<input type="password" name="parool" />
Atribuudile tüüp
määratakse väärtuseks password
. Ka siin vaadake tulemust.
Kui midagi sisestate, teevad brauserid selle sisestamise ajal otse tärnideta.