HTML ja CSS algajatele

HTML ja CSS algajatele (Osa 13): Vormid (1)

Kõik õpetuse videod HTML ja CSS algajatele

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:

HTML ja CSS algajatele (Osa 13): Vormid (1)

Ülimalt spektakulaarne see juba pole. Kuid kui klõpsate tekstiväljal, märkate, et saate juba sisestusi teha.

HTML ja CSS algajatele (Osa 13): Vormid (1)

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.

HTML ja CSS algajatele (Osa 13): Vormid (1)

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.

HTML & CSS algajatele (Osa 13): Vormid (1)

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.

HTML ja CSS algajatele (osa 13): Vormid (1)



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:

HTML ja CSS algajatele (osa 13): Vormid (1)



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).

HTML ja CSS algajatele (Osa 13): Vormid (1)

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.

HTML ja CSS algajatele (osa 13): Vormid (1)



Kui midagi sisestate, teevad brauserid selle sisestamise ajal otse tärnideta.