HTMLi kursus #7 – Formid

HTMLi kursus #7 – Formid

Eelmine osa: HTMLi kursus #6.3 – RWD meediafailid

Tänaseks teemaks on formid ja nende alamelemendid.

Formide põhiline ülesanne on kasutajalt infot vastu võtta (nt. pakisaatmisaadress jne) ja see edasi saata serverisse.

Edasi saatmist serverisse küll täna kahjuks ei tee (ei puuduta HTMLi), küll aga kasutame Formspreed, et saata formi sisestatud info sinu e-mailile – esimest korda ka midagi realset praktilist HTMLi kursuses.

Näidislehe võib leida siit ja selle interaktiivse näite siit. Konspekti aga siit ja interaktiivse näite siit.

 

Formi elemendid seletatult

<form></form> – defineerib veebilehte uue formi. Kasutatakse tihti selleks, et kasutaja peab järjest sisestama mingid andmed (nt. ostuankeet jms). <form> endasse ei saa sisestada infot, seda tuleb teha läbi tema lapselementide (nagu nt. <input> ja <textaera>). Sõna form tuleb ingliskeelest ja tähendab eesti keeles ankeeti.

<form> elemendil on üsnagi palju atribuute:

  • accept-charset="märgistiku_kood" – defineerib sobivad tähemärgid (nt. täpitähed jne), mida <form> sisestada lubab. Enamus märgistikest võib leida siit, kuid kasutatum on koodiga UTF-8, mis toetab ka täpitähti
  • action="URL" – määrab ära kuhu saadetakse formi sisestatud info.
  • autocomplete="on | off" – paneb paika, kas form peaks kasutama formi kiirtäitmist (kasutajale pakutakse form täitmisel info brauseri ajaloo põhjal ette).
  • enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain" – määrab, kuidas formi sisestatud andmed ära kodeeritakse.
    • enctype="application/x-www-form-urlencoded" – vaikimisi väärtus; kõik (tähe)märgid kodeeritakse ümber märgistikku.
    • enctype="multipart/form-data" – ühtegi (tähe)märki ei kodeerita ümber märgistikku. Kohustuslik kui formi kasutatakse mingi faili üles laadimiseks.
    • enctype="text/plain" – tühikud kodeeritakse ainult ümber (plussmärgiks “+”), teised tähemärgid jäetakse samaks.
  • method="get | post" – paneb paika, kuidas sisestatud info serverisse saadetakse.
    • method="get" – tegemist on vähem turvalisema ja limiteeritud moodusega kui post meetodiga. Nimelt info saatmisel serverisse saadetakse info läbi URLi ja kuna URLi näevad kõik, siis seda on ka kergem häkkida. Seda soovitaks kasutada ainult siis, kui edastakse infot, mis ei ole tähtis.
    • method="post" – turvalisem ja ilma piiranguteta moodus infot serverisse saatmiseks. Kasuta seda kindlasti siis kui edastad midagi, mis on privaatne.
  • name="tekst" – nimi formile.
  • novalidate="novalidate" – kahendloogika atribuut; määrab ära, kas formi sisestatud info peab paika eeldatava info vormiga (nt. ei sisestata teksti sisestuskasti, kus eeldatakse sisetustüübiks numbrit). Kui atribuut novalidate on olemas, siis form ei kontrolli sisestust.
  • target="_blank | _self | _parent | _top" – paneb paika, kuidas näidatakse andmeid, kui form on täidetud. Tegin sellest parameetrist pikemalt juttu HTMLi kursuse kolmandas osas <a> elemendi juures.

Enda veebilehes kasutasin <form> elementi loomulikult uue formi defineerimiseks veebilehes, kus kasutaja saab sisestada oma andmeid.

 

<input /> – defineerib HTMLi ära kasutaja sisestuse võimaluse. Just võimaluse, sest <input> elemendi välja nägemine ja funktsionaalsus sõltub väga palju tema parameetritest. Ma arvan, et <input> on kõige rohkem atribuute üldse. Nii et hoia ennast kui atribuute õppima hakkad 😀 ! <input> elementi kasutatakse tihti formi sees, kuid seda võib ka täiesti eraldi kasutada. Sõna input tuleb ingliskeelest ja tähendab eesti keeles sisestust.

<input> elemendi atribuudid:

  • type="väärtus" – määrab ära, mis liiki <input> elemendiga on tegemist (nagu nt. failiüleslaadija, tavaline teksti sisestuskast, numbrite sisestuskast, nupp, salasõna sisestuskast jne).
    • type="text"<input> on tavaline teksti sisestuskast. Vaikimisi väärtus.
    • type="button"<input> on tavaline nupp.
    • type="hidden"<input> on varjatud (kasutajale mitte nähtav).
    • type="color"<input> on värvivalija.
    • type="checkbox" – linnukese kast (nagu on/off lüliti).
    • type="radio" – linnukese kast, aga mitme valiku jaoks. Kasutatakse siis kui on võimalik valida kahe võimaluse vahel, aga mõlemat ei saa valida. Checkbox‘iga (vt. ülemist atribuuti) aga saab seda teha.
    • type="range" – liugurkontroll (nullist kuni sajani).
    • type="date" – kuupäevavalija.
    • type="datetime-local" – kuupäevavalija koos ajavalijaga.
    • type="month" – kuuvalija koos aastaga.
    • type="week" – nädalavalija koos aastaga.
    • type="time" – kellaaja valija.
    • type="number" – numbri sisestuskast.
    • type="tel" – telefoninumbri sisestuskast.
    • type="url" – URLi sisestuskast.
    • type="password" – salasõna sisestuskast (sissetrükitavad tähed on varjatud).
    • type="email" – e-maili sisestuskast.
    • type="file" – failiüleslaadija.
    • type="search" – otsingukast.
    • type="submit" – nupp, mis saadab formi sisestatud andmed serverisse.
    • type="image"submit nupp (vt. ülemist atribuuti), kuid mida näidatakse kasutajale kui pilti. Põhiliselt submit nupp pildi kujul.
    • type="reset" – nupp, mis lähtestab/kustutab kõik formi sisestatud andmed.
  • alt="tekst" – defineerib ära alternatiivse teksti/kirjelduse pildi joaks. Toimib ainult, siis kui type väärtuseks on "image".
  • accept="faili_laiend | audio/* | video/* | image/* | MIME-type" – defineerib ära, mis faile <input> saab vastu võtta (aktsepteerib). On korralikult funktsionaalne ainult siis kui type väärtuseks on "file". Kui on soovi, et <input> aktsepteeriks mitut failitüüpi, nt. videofaile ning audiofaile, siis tuleb lihtsalt väärtused komakohtadega eraldada.
    • accept="faili_laiend" – paneb faililaiendusega paika, mis faile <input> sisestada lubab.
    • accept="audio/*"<input>  aksepteerib kõiki audiofaile.
    • accept="video/*" – <input>  aksepteerib kõiki videofaile.
    • accept="video/*" – <input>  aksepteerib kõiki pildifaile.
    • accept="MIME-type"<input> võtab vastu meediatüübiga paika pandud faile. Kõik MIME tüübid võib leida siit.
  • autocomplete="on | off" – paneb paika, kas <input> peaks kasutama <input> elemendi kiirtäitmist. Vahel antakse kiirtäitmise väärtused ette elemendiga <datalist> (loe sellest allpool).
  • autofocus="autofocus" – kahendloogika atribuut; määrab ära, kas <input> elemendil peaks olema automaatselt fookus (<input> on aktiivne, et sinna saaks andmeid sisestada).
  • checked="checked" – kahendloogika atribuut; paneb paika, kas <input> element peaks olema koheselt valitud. <input> elemendil saaab checked atribuut olla siis, kui type väärtuseks on "checkbox" või "radio".
  • disabled="disabled" – kahendloogika atribuut; määrab ära, kas <input> on keelatud (ei saa andmeid sisestada).
  • name="tekst" – annab <input> elemendile nime (mida saab kasutada ära erinevates teistes parameetrites ja ka serveri funktsioonides – name on tavaliselt serveris muutuja nimeks/kohakandjaks)
  • dirname="input_name.dir" – saadab serverisse edasi teksti suuna. Selle suund sõltub fondist ja kasutaja klaviatuurist (nt. Araabia maades loetakse teksti paremalt vasakule ja selle tõttu on ka sisestusviis selline). Väärtuseks on <input> elemendi name atribuudi väärtus, millele järgneb alati ".dir"dirname töötab ainult siis korralikult kui type väärtuseks on "text", kuigi brauseri toetus dirname on üsnagi halb.
  • form="form_id" – paneb paika, millise formi juurde kuulub <input>, isegi siis kui <input> ei ole formi lapselement. Selleks kasutab <input> formi id, mis on HTMLi globaalne atribuut (seda saab lisada igale elemendile). Kui on soovi, et <input> kuuluks mitme formi alla, siis tuleb erinevad id lihtsalt tühikuga eraldada form atribuudis.
  • formaction="URL" – määrab ära, kuhu saadetakse formi sisestatud andmed. Seda tihti kasutatakse andmete edastamiseks teisele leheküljele, mis formil on ära defineeritud (vaata formi action parameetrit). Parameeter töötab ainult siis, kui <input> type väärtuseks on "submit" või "image".
  • formenctype="väärtused" – paneb paika, kuidas formi sisestatud andmed ära kodeeritakse. Jällegi nagu eelneva parameetriga kasutatakse seda lihtsalt alternatiiviks, et oleks võimalik andmeid mitut moodi edasi saata. Parameeter töötab ainult siis, kui <input> type väärtuseks on "submit" või "image". formenctype võimalikke väärtusi vaata formi enctype parameetrit.
  • formmethod="get | post" – defineerib, kuidas sisestatud info serverisse saadetakse. Tegemist on jälle alternatiiviga formi enda method atribuudile. Siingi peab <input> type väärtuseks olema "sumbit" või "image". formmethod väärtuste täpse kirjelduse leiad formi method parameetri kirjeldusest.
  • formnovalidate="formnovalidate" – kahendloogika atribuut; paneb paika, et formi sisestatud andmeid ei kontrollita (vaata formi enda novalidate atribuuti täpsemaks selgituseks). See atribuut töötab ainult, siis kui <input> type väärtuseks on "submit". Alternatiiv formi novalidate atribuudile.
  • formtarget="väärtused" – määrab, kuidas näidatakse andmeid, kui form on täidetud. See atribuut töötab ainult siis, kui <input> type väärtuseks on "submit". Alternatiiv formi target atribuudile.
  • width="väärtus pikslites" – <input> laius (pikslistes). Kehtib ainult siis kui type väärtuseks on "image".
  • height="väärtus pikslites"<input> kõrgus (pikslistes). Kehtib ainult siis kui type väärtuseks on "image".
  • min="number | kuupäev" – defineerib minimaalse väärtuse <input> elemendil. Siinkohal peaks olema type väärtuseks olema midagi seotud numbritega.
  • max="number | kuupäev" – defineerib maksimaalse väärtuse <input> elemendil. Siinkohal ka peaks olema type väärtuseks olema midagi seotud numbritega.
  • maxlength="number" – määrab, mis on maksimaalne lubatud tähemärkide arv <input> elemendis.
  • size="number" – defineerib, mitu tähemärki mahub laiuselt sisestuskasti. Kui maxlength ei luba rohkem <input>  sisestada kui tema väärtus, siis size seda lubab – esimesi tähemärke ei ole lihtsalt näha. size töötab ainult korralikult siis, kui type väärtuseks on midagi tekstiga seotud.
  • multiple="multiple" – kahendloogika atribuut; lubab kasutajal sisestada mitu väärtust <input>. Töötab ainult siis kui type väärtuseks on "email" või "file".
  • placeholder="tekst" – defineerib teksti, mida näidatakse kasutajale enne andmete sisetamist. Tavaliselt on see sisestuskasti selgitamiseks. Näiteks kui soovitakse, et kasutaja sisestaks e-maili, siis kirjutatakse placeholder väärtuseks "Teie email" vms. Realseks näiteks võib tuua AnsiVeebi kodulehe, kus alamlehel “Kontakt” on välja toodud sisestuskastide kirjeldused. Korralikuks placeholder töötamiseks peab type väärtuseks olema midagi tekstiga seotud.
  • readonly="readonly" – kahendloogika atribuut; määrab, et sisestuskasti ei saa midagi sisestada (on ainult mõeldud lugemiseks).
  • required="required" – kahendloogika atribuut; paneb paika, et sisestuskasti peab täitma (formi andmeid ei saa ära saata ilma selle väärtuseta). required töötab korralikult ainult siis kui type väärtuseks on midagi, kus kasutaja saab sisestada (nt. kui type väärtuseks on "hidden", siis kasutaja midagi ei saa sisetada).
  • src="URL" – defineerib <input> pildi allika. Loomulikult peab <input> type väärtuseks olema "image".
  • value="tekst" – annab sisestuskastile eeldefineeritud sisu (value väärtus on sisu). Server kasutab value, et defineerida erinevate muutujate väärtusi (muutuja nimeks on tavaliselt atribuut name). Seda ei saa kasutada kui type väärtuseks on "file".
  • step="number" – sisestuskasti sisu võib olla ainult iga step väärtuse tagant. Näiteks kui step väärtuseks on 3, siis iga lubatud väärtus on iga kolme tagant (-3, 0, 3, 6 jne). Selle atribuudi toimimiseks peab type väärtuseks olema midagi numbritega seotud (k. a. kuupäevad).
  • pattern="regexp" – paneb paika, mis tähemärgid on <input> elemendis lubatud. Väärtuseks on Regular Expression’i mustrid. Põhilise õpetuse Regular Expression’i peale võib leida siit. pattern on täielikult funktsionaalne kui type väärtuseks on midagi seotud kirjaga/tekstiga.

Enda veebilehes kasutasin <input> elementi mitmes kohas. Tegelikkuses kogu form sellest põhiliselt koosnebki. <input> on nii nime, soo, tänase kuupäeva, riigi, linna, praeguse HTML kursuse osa, lemmikvärvi kui ka kodulehe sisestamiskast. Nagu näha võib terve formi valmis teha ainult ühe elemendiga ja see on <input>.

 

<button></button> – defineerib tavalise nupu. Teksti kui ka pilti võib nupuna esitada. <button> kasutatakse erinevate nuppude loomiseks. Nupu kasutajale nähtav osa defineeritakse nupu sees (ehk lapselemendina/-osana; <button>See on elemendi sisu</button>) – siin võibki olla nii pilt kui ka tekst. Sõna button tuleb inglise keelest ja tähendab eesti keeles nuppu.

<button> elemendil on üsnagi palju atribuute, aga õnneks olen ma enamus nendest juba ära seletanud <input> elemendi juures (<button> ja <input> jagavad palju samasuguseid ja ka samasuguste väärtustega parameetreid). Nendel atribuutidel, millel ei ole taga kirjeldust, on seletus olemas <input> elemendi atribuutide kirjelduses (nende parameetrite väärtused ja funktsioonid on ühed).

NB! Kui <input> elemendi juures on välja toodud, et <input> atribuut type peab olema mingi kindla väärtusega, siis nendel elementidel, millel on samad atribuudid kui <input> elemendil, ei pea olema type atribuut kindla väärtusega (kui üldse see neil olemas on).

<button> elemendi atribuudid:

  • autofocus="autofocus"
  • disabled="disabled"
  • form="form_id"
  • formaction="URL"
  • formenctype="väärtused"
  • formmethod="get | post"
  • formnovalidate="formnovalidate"
  • formtarget="väärtused"
  • name="tekst"
  • value="tekst"
  • type="button | submit | reset" – defineerib täpselt ära, mis nupuga on tegemist. Seda on soovituslik kasutada, sest erinevates brauserites on tavalised nuputüübid erinevad.
    • type="button"<button> on täiesti tavaline nupp.
    • type="reset"<button> on formi andmete lähtestaja (kustutab kõik formi sisestud andmed).
    • type="submit"<button> on formi sisestatud andmete edasi saatja serverisse.

Nagu arvata võid, saad sa luua HTMLis nuppu mitut moodi. Üheks võimaluseks on kasutada <input> elementi koos type="button" või <button> elementi.

Isiklikult soovitaksin ma kasutada <input> võimalust seespool formi ja väljaspool <button> varianti.

Näidises kasutasin <button> elementi defineerimaks näitliku submit nuppu, kuid päriselt on see lihtsalt nupp, kuna ma näitan kasutaja tulemusi JavaScriptiga ning ei saada andmeid tegelikult edasi serverisse (submit saadab alati andmed serverisse).

 

<select></select> – tähistab HTMLis valikuvõimalustega rippmenüü. Kasutatakse selleks, et kasutajale anda mingid kindlad võimalused, mille hulgast valida. <select> on ka üks kohustuslik lapselement ja see on <option> (räägin sellest allpool). Sõna select tuleb inglise keelest ja tähendab eesti keeles valikut.

Siin on atribuutidega peaaegu sama olukord, mis <button> elemendil. Osi parameetreid jätan jälle tühjaks (nende seletusi võib näha <input> elemendi juures), kuid osad seletan siiski “uuesti” lahti, sest need erinevad natukene <input> omadest.

<select> atribuudid:

  • autofocus="autofocus"
  • disabled="disabled"
  • form="form_id"
  • name="tekst"
  • multiple="multiple" – kahendloogika atribuut; lubab kasutajal sisestada/valida mitu <option> elementi (kui väärtusena – <select> väärtused on <option> elemendid).
  • required="required" – kahendloogika atribuut; kasutaja peab valima ühe <option> elemenditest.
  • size="number" – väärtus paneb paika, mitut <option> elementi kasutaja näeb (ei vaja kerimist).

Enda veebilehes kasutasin <select> elementi defineerimaks valikut lemmiktehiskeele juures. Otsustasin seekord, et luban kasutajal ainult valida ühe tehiskeele.

 

<datalist></datalist> – defineerib HTMLis ära mingite andmete nimekirja. Seda kasutatakse tavaliselt formis, et <input> atribuudil autocomplete oleks juba olemas kindlad kiirtäitmise väärtused. <datalist> elementi ei ole kasutajale näha – on mõeldud ainult mingite olemasolevate andmete kirja panemiseks. Nagu <select> elemendil, on erinevate väärtuste esindajateks <option> elemendid ehk need on põhimõtteliselt <datalist> kohustuslikud lapselemendid. Sõna data list tuleb inglise keelest ja tähendab eesti keeles andmete nimekirja.

<datalist> endal ei ole ühtegi temale omast atribuuti, kuid <input> elemendil on üks atribuut, mis on just mõeldud <datalist> elemendile.

See on list="datalist_id" – väärtuseks on sellel <datalist> elemendi parameeter id väärtus (globaalne atribuut). Parameeter list annab <input> elemendile võimaluse saada infot kiirtäitmiseks kätte <datalist>.

Näidises kasutasingi <datalist> elementi riigi ja linna kiirtäitmise jaoks (kasutaja saab valida koheselt väärtuse).

 

<option></option> – defineerib ühe võimalikku väärtuse, kas <select> või <datalist> elemendis. <option> sees käib tavaliselt võimaluse kasutaja sõbralik nimi (tavaline tekst). Kasutataksegi ühe väärtuse loomiseks eelnimetatud elemendites. Ingliskeelest tulev sõna option tähendab eesti keeles valikut/võimalust.

Atribuute <option> on kokku neli (tühjade seletus ikka <input>):

  • disabled="disabled"
  • value="tekst" – väärtus, mis saadetakse serverisse. <option> sees on lihtsalt selle väärtuse kasutajasõbralik nimi.
  • selected="selected" – kahendloogika atribuut; paneb paika, et see <option> on juba algselt valitud ehk on vaikimisi rippmenüüs.
  • label="tekst" – annab <option> lühikese vormi. Kui kasutajasõobralik nimi on liiga pikk, siis kasutatakse seda.

Elementi <option> kasutasin enda veebilehes kahes kohas. Esimeses (riigi ja linna sisestamisel) <datalist> elemendis ja teises (lemmiktehiskeele juures) kui valikuna <select> elemendis.

 

<optgroup></optgroup> – defineerib <select> elemendis ära ühte kategooriasse kuuluvad <option>. Kasutatakse selleks, et muuta <select> valikud rohkem selgemaks ja hoomamaks. <optgroup> sisse käivadki sarnased/ühe tüübiga <option> elemendid. Lühend optgroup tuleb ingliskeelest ja on pikalt option group, mis tähendab eesti keeles valikute gruppi.

Näiteks kui on kasutajal võimalus valida sõidukivahend siis <optgroup>, mis tähistab autosid alla käivad <option> elemendid, mis esindavad erinevaid automarke.

<optgroup> on üks atribuut – label="tekst", mis tähistab <optgroup> pealkirja (väärtuseks on tekst).

<select> element koos ja ilma <optgroup>

Näidises kasutasin <optgroup> elementi sarnaselt ülemisele näitele. Jagasingi lemmiktehiskeelte osa kaheks grupiks, kus ühes on veebikeeled ja teises programmeerimisekeeled.

 

<textarea></textarea> – defineerib HTMLi tekstikasti. Seda kasutatakse siis, kui tahetakse, et kasutaja sisestaks teksti, mis ei mahuks <input> elementi. Nimelt mahub tekstikasti piiramatul arvul tähti. Kui on soovi, et <textarea> oleks vaikimisi väärtus, siis tuleb soovitatud (tavaline) tekst lihtsalt kirjutada <textarea> elemendi sisse. Sõna textarea tuleb inglise keelest ja tähendab eesti keeles tekstiala, kuid mõistlikum oleks sellest mõelda kui tekstikasti.

Tühjad atribuudid leiad nagu ikka <input> elemendi juurest.

<textarea> elemendi atribuudid:

  • autofocus="autofocus"
  • dirname="input_name.dir"
  • disabled="disabled"
  • form="form_id"
  • maxlength="number"
  • name="tekst"
  • maxlength="number"
  • readonly="readonly"
  • required="required"
  • placeholder="tekst"
  • cols="number" – defineerib ära algse nähtava laiuse (ehk tekstikasti laiuse). Vaikimisi väärtuseks on 20.
  • rows="number" – defineerib ära algse nähtava kõrguse (ehk tekstikasti kõrguse). Vaikimisi väärtuseks on 2.

Näidises kasutasin <textarea> elementi, et saada arvamust kasutajalt mingi asja kohta. Paremat mõtet mul pähe ei tulnud 😀 !

 

<label></label> – defineerib ära sisestust nõudva elemendi kirjelduse kasutaja joaks. Kasutatakse täpsema info edasi andmiseks mingi kontrolli kohta. Sõna label tuleb ingliskeelest ja tähendab eesti keeles silti.

<label> on kaks atribuuti:

  • form="form_id"
  • for="sisestus_id" – seob <label> elemendi sisestuselemendiga, et ühendada kirjeldus ja realne element. Väärtuseks on sisestuselemendi (globaalne) atribuut id. Kui on soovit, et <label> oleks seotud mitme elemendiga, siis tuleb erinevad id eraldada üksteisest tühikuga for atribuudis.

Enda veebilehes kasutasin <label> elementi kõikide sisestus nõudvate elementide juures (mida kasutajalt oodetakse).

 

<fieldset></fieldset> – tegemist on tegelikult sketsioonielemendiga, aga kuna see käib ainult formi alla, siis otsustasin, et seletan selle lahti siin, mitte Sektsioonielementide osas. Nimelt defineerib <fieldset> ära sektsiooni/grupi sarnastest formi elementidest. Kasutatakse selleks, et muuta formi väljanägemine selgemaks ja korralikumaks. <fieldset> sees käivad erinevad formi elemendid, millel on ühine kategooria (nt. elukoha alla võib käia linn, vald, riik jne). <fieldset> on ka pealkirja element <legend> (räägin sellest allpool). Sõnad field set tulevad inglise keelest ja tähendavad eesti keeles (otsetõlkes) valdkonna komplekti, kuid lihtsam oleks sellest mõelda kui ühte formi alamosa.

<fieldset> on kolm temale omast atribuuti:

  • name="tekst"
  • form="form_id"
  • disabled="disabled" – kahendloogika atribuut; muudab kogu sektsiooni (ehk tema lapselemendid) keelatuks (ei luba andmeid sisestada)

Enda veebilehes kasutasin <fieldset> elementi formi jagamiseks erinevateks sektsioonideks.

 

<legend></legend> – defineerib pealkirja <fieldset> elemendile. Kasutatakse, et formile lisada selgust. Sõna legend tuleb inglise keelest ja tähendab eesti keeles legendi.

Näidises kasutasin <legend> elementi, et anda esimesele neljale formi sektsioonidele vastav pealkiri.

Sama form esitatud mitut moodi

 

<output></output> – defineerib ära mingi matemaatilise või kasutaja poolt sisestatud andmete tulemuse. Seda elementi kasutataksegi kasutajale lõpptulemuse näitamiseks ning tihti aitab lõpptulemuse saada JavaScript. Sõna output tuleb ingliskeelest ja tähendab eesti keeles väljastust/väljundid.

<output> elemendil on kolm temale omast atribuuti:

  • form="form_id"
  • name="tekst"
  • for="element_id" – seob <output> elemendi mingi teise elemendiga, et ühendada väljastus ja realne sisestuselement (realsed sisestuselemendid). Väärtuseks on ükskõik, mis (sisestus)elemendi (globaalne) atribuut id.

Nädises kasutasin <output>, et väljastada (kasutades JavaScripti) kasutaja poolt sisestatud andmed .

Formi tegemine koos Formspreega

Mis asi on Formspree?

Formspree on automaatne formi andmete edasi saatja e-maili peale – selle kasutamiseks pole vaja teadmisi JavaScriptist ega PHPest.

Lisaks sellele ei vaja Formspree mingit registeerimist. Vaja on ainult oma e-mail ära kinnitada.

Kuidas formspreed kasutada?

Noh kuna me oleme läbi võtnud formi elemendid, siis selle kasutamine ei ole keeruline.

Kõigpealt tuleb luua <form>, millel on kaks atribuuti: action ning method. Nende väärtused peavad olema järgmised:

  • action="https://formspree.io/sinu.email@email.com" – nt. minul oleks väärtuseks “https://formspree.io/oliver.paljak@gmail.com” vms.
  • method="post" – väärtuseks on “post” sellepärast, et see on “get” väärtusest tunduvalt parem (vt. formi atribuutide seletust)

Järgmisena tuleb luua formi sisu.

Formspree kasutab saatmiseks  name atribuuti, nii et kõikidel sisestuselementidel, mida soovitakse edasi saata, peab see kindlasti esindatud olema koos väärtusega! Formspreel on ka olemas name atribuudi kindlad väärtused erinevatele sisestuselementidele, kuid võib kasutada ka endapoolt välja mõeldud väärtusi ehk nimesid.

Oletame, et tahame luua formi, kus inimene saab sisestada nime, elukoha (linn ja riik), soo ja oma mõtted.

Et küsida kasutaja käest nime, linna ning riiki tuleb luua 3 <input> elementi vähemalt koos järgmiste atribuuditega:

  • name="meelepärane_nimi"
  • type="text"

Lisaks võib ka kasutada teisi atribuute nagu näiteks:

  • placeholder
  • required

Veel võib lisada <datalist> erinevatele tekstisisestuskastidele.

Soo küsimiseks tuleb luua kaks valikukasti, millel on üks ja sama nimi (name atribuudi väärtus peab olema sama). Nõnda saab ainult valida ühe nendest.

Veel peab olema järgmised atribuudid esindatud:

  • type="radio"
  • value="sulle meelepärane väärtus" – selle järgi saadab Formspree andmed edasi emailile. Väärtuseks olen ma näiteks pannud ühele “female” ja teisel “male”.

Kasutaja huvide mugavuses võib ka ühel valikukastil olemas olla atribuut checked , et automaatselt oleks valitult üks kahest, kuigi soo teatud juhtudel juures võib see muutuda solvavaks.

Mõtete küsimiseks tuleks kautada <textarea>, sest me ei oska öelda, mida ja kui pikalt kasutaja tahab kirjutada.

<textarea> peab olema atribuut name nagu ka teistel elementidel, mida soovitakse Formspreega edasi saata.

Formi lõpus peaks olema submit nupp, et anda käsk edastamiseks. Selleks peab <input> elemendi atribuudi type väärtuseks olema "submit". Kui on soovi muuta submit nupu teksti, siis peaks olema ka esindatud atribuut value koos soovitud väärtusega.

Lisaks võib formi kujundada ja täiestuda juba siin postituses kirjeldatud elementidega.

Näiteks lõin mina sellise formi

<form action="https://formspree.io/sinu.email@email.com" method="post">
    <h2>Formspree imeline form</h2>
    <fieldset>
        <legend>Algandmed</legend>
        <input name="full_name" required="required" type="text" placeholder="Täisnimi" />
        <br />
        Sugu: 
        <br />
        M <input value="male" name="sex" type="radio" checked="checked" />
        <br />
        N <input value="female" name="sex" type="radio" />
    </fieldset>
    <fieldset>
        <legend>Elukoht</legend>
        <input name="country" required="required" type="text" placeholder="Riik" list="autocomplete_countries" autocomplete="on" /><br />
        <input name="city" required="required" type="text" placeholder="Linn" />

        <datalist id="autocomplete_countries">
            <option>Eesti</option>
            <option>Soome</option>
            <option>Läti</option>
            <option>Leedu</option>
        </datalist>
    </fieldset>
    <fieldset>
        <textarea name="comment" placeholder="Teie mõtted, ettepanekud" rows="10" cols="100"></textarea>

    </fieldset>
    <input type="submit" value="Saada e-mailile" />
</form>

Et seda formi kasutada, muuda “sinu.email@email.com” enda emaili aadressiks.

Nagu näha võid olen kasutanud lihtsalt teksti formis. See annab formile selgust. Samas võib ka kasutada <label> elementi.

Kui oled oma formi valmis saanud, siis sisesta korra ise andmed ära ja saada. Ette tuleb kiri, et sa pead oma emaili aadressi kinnitama. Mine oma emaili ja ava Formspree poolt saadetud kiri ja klikka “confirm”. Kui see tehtud, siis edaspidi tulevad kõik formi andmed sinu emailile.

Formspree erilised elemendid

Formspreel on mitmeid erilisi elemente (õigemini <input> elementide atribuutide väärtused defineerivad, kuidas mingit elementi koheldakse), mis aidatavad võidelda spämmi, muuta emaili pealkirja jms.

Kui <input> atribuudi(d)

  • type="text" ja name="_replyto" – annab emailis võimaluse vastata koheselt emailile (läbi reply nupu). Siin sisestuskastis peaks kasutaja sisestama oma emaili.
  • type="hidden", name="_next" ja value="//sinusait.com/andmed_lisatud.html"value väärtus määrab ära, mis internetileheküljele suunakse kasutaja pärast formi andemete sisestamist. Tavaliselt suunatakse kasutaja edasi “tänamise” lehele.
  • type="hidden", name="_subject" ja value="emaili_pealkiri" – value väärtus paneb paika, milline on saadetava emaili pealkiri. Näiteks võib see olla “Tellimus!”, “Tagaside” vms.
  • type="hidden", name="_cc" ja value="lisa_email"value väärtus defineerib, kuhu saadetakse email peale formi action atribuudis. Siin ei pea alustama emaili “https://formspree.io/”, vaid võib lihtsalt väärtuseks anda emaili aadressi. Kui on soovi, et see edastaks mitmele aadressile, siis tuleks lihtsalt erinevad emaili aadressid eraldada komadega (value="lisa_email_1, lisa_email_2").
  • type="hidden", name="_format" ja value="plain" – määrab ära, et email saadetakse ilma stiilideta (lihtsa tekstina). Vähendab emaili mahtu.
  • type="text", name="_gotcha" ja style="display: none;" – takistab spämmereid. Kui väärtus on antud (ehk value atribuut ei ole tühi) ei saadeta formi andmeid edasi (bot‘id saavad seda täita, aga kasutajad mitte).

Spämmi kohapealt veel niipalju, et Formspreel on ka olemas reCAPTCHA.

Kui tahad, et näiteks oleks olemas (Formspree enda) spämmikaitse ja sinu poolt väljamõeldud emaili pealkiri, siis tuleb lihtsalt formi panna kaks <input> elementi koos vastavate atribuutidega.

<input type="hidden" name="_subject" value="Sinu emaili pealkiri!" />
<input type="text" name="_gotcha" style="display:none" />

Rääkides formidest…

Sooviksin ma, et sa täidaks ära alumise formi, et ma saaksin tagasisidet selle HTMLi kursuse kohta.

Mis on hästi? Mis on halvasti? Mis võiks olla teisiti? Pane oma mõtted lihtsalt kirja.

Sa võid seda teha täiesti anonüümselt (lihtsalt täida ainult ära “Mõtted ja ettepanekud” lahter).

 

Ongi kõik selleks korraks.

Koduseks ülesandeks annaksin ma sulle luua enda form ja hea oleks, kui see töötaks koos Formspreega. Proovi kasutada võimalikult palju elemente. Läbi praktika õpid alati kõige rohkem!

 

Järgmine osa: HTMLi kursus #8 – Back-end

Kui tekkis küsimusi, siis küsi neid julgelt kommenteerides 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *