Formulár a základné spracovanie údajov z neho pomocou JavaScript (Úloha 3)

Postup

1. Úloha: Na vhodnom mieste úvodnej stránky vášho blogu (index.html), ktorý ste tvorili na predchádzajúcich cvičeniach, vytvorte formulár pomocou ktorého budú návštevníci môcť vyjadriť názor o vašej stránke.

   Formulár má obsahovať nasledujúce riadiace elementy:

   • jednoduché textové pole (input typu text) pre meno návštevníka,
   • textové pole (input typu email) pre e-mail návštevníka,
   • textové pole (input typu url), pre URL obrázka ktorým môže návštevník doplniť svoj príspevok,
   • Skupina aspoň dvoch zaškrtávacích polí typu radio button.
   • Aspoň jedno zaškrtávacie pole typu checkbox.
   • veľké viacriadkové textové pole (textarea) pre text názoru návštevníka.
   • tlačidlá pre odoslanie (button type='submit') a zresetovanie (button type='reset') obsahu formulára.

   Riadiace elementy prepojte s vhodnými popismi pomocou elementov label . Význam zaškrtávacích polí zvoľte sami, tak aby súviseli s témou vašej stránky.
   
   Povinné polia nech sú

   • meno návštevníka,
   • e-mail návštevníka a
   • text názoru návštevníka.

   Úloha: Doplňte do formulára pole, kde návštevník môže zadať kľúčové slová, ktoré sa podľa neho hodia na vašu stránku. Pole prepojte s vhodným zoznamom hodnôt.

   Pole na zadávanie kľúčových slov nech je input typu text. Zoznam slov nech súvisí z obsahom vašej stránky. Vytvorte ho s použitím elementov datalist a option.

   Poznámka: Ako takýto formulár zakomponovať do vašej stránky, môžete vidieť v príklade 55myTreesFormLStorageConsole.html. Stiahnuteľná verzia tohto príkladu je v archíve 55myTreesFormLStorageConsole.zip, dostupnom na [10]. Sada príkladov rôznych typov formulárov je dostupná na [8].

2. Úloha: CSS štýl vašej stránky doplňte o nastavenie rôzneho zobrazenia pre povinné a nepovinné a validné a nevalidné prvky formulára.

   Poznámka: Štýly pre formulár môžete vidieť v príklade 16formsAttribsCss.html. Stiahnuteľná verzia tohto príkladu je v archíve 16formsAttribsCss.zip, dostupnom na [10].

3. Formulár máte úspešne vytvorený, teraz sa zameriate na jazyk JavaScript, ktorý vám ho umožní oživiť. Najprv si zaexperimentujte s príkladmi ukazujúcimi základy JavaScript-u.

   Úloha: Stiahnite a rozbaľte archív s príkladmi 5jsBasicsDom.zip.

   Úloha: Experimentujte s príkladmi.

   Robte zmeny v kóde a vyskúšajte ich efekt v prehliadači. Viaceré príklady obsahujú zakomentovaný kód s alternatívnymi postupmi. Napríklad

   • 51jsZaklady.html s alternatívnymi zápismi základných príkazov JavaScript-u a
   • 56jsJqDomManip.html s alternatívnymi možnosťami načítania skriptov.

   Komentáre tiež bližšie vysvetľujú kód príkladov.

   Poznámka: Experimentovať môžete aj priamo v prehliadači pomocou vývojárskych nástrojov. Tie umožňujú aj ladenie kódu o čom sa viac dozviete v tutoriáli [7].

4. Teraz si vyskúšate doplniť do formulára v príklade 55myTreesFormLStorageConsole nový riadiaci element a rozšíriť JavaScript kód tohto príkladu tak, aby spracovával údaje aj z neho. Tento príklad je už vlastne web aplikáciou, preto ho tak budeme aj označovať. Samozrejme, ak je táto úloha pre vás triviálnou, môžete ju preskočiť a pokračovať ďalšou.

   Úloha: Do formulára s id="opnFrm" v aplikácii 55myTreesFormLStorageConsole doplňte element input type="checkbox" s id="willReturnElm". V JavaScript kóde doplňte ukladanie obsahu z tohto elementu do vlastnosti willReturn objektov v poli opinions a tiež do localStorage.myTreesComments.

   Úlohu môžete riešiť samostatne. Alebo môžete použiť nasledujúci kompletný postup riešenia:
   
   

   1. Stiahnite si a rozbaľte archív 55myTreesFormLStorageConsole.zip s aplikáciou. Ďalej budete pracovať s touto rozbalenou verziou aplikácie. Všetky zmeny budete robiť v súbore 55myTreesFormLStorageConsole.html.
      
      
   2. Pred element

      <button type="submit">Send</button>

      pridajte nasledujúci kód:

      <input type="checkbox" id="willReturnElm" />
      <label for="willReturnElm">I will definitely return to this page.</label>
      <br><br>

      Teraz máte element s novým zaškrtávacím políčkom v html.
      
      
   3. Do funkcie processOpnFrmData pridajte za príkaz

      const nopOpn = document.getElementById("opnElm").value.trim();

      nasledujúci kód:

      const nopWillReturn = document.getElementById("willReturnElm").checked;

      Takto hodnotu z políčka (true pri zaškrtnutom, false pri nezaškrtnutom) načítame z formulára do konštanty nopWillReturn.
      
      
   4. Vo funkcii processOpnFrmData zmeňte kód

      const newOpinion =
                  {
                      name: nopName,
                      comment: nopOpn,
                      created: new Date()
                  };

      na

      const newOpinion =
                  {
                      name: nopName,
                      comment: nopOpn,
                      willReturn: nopWillReturn,
                      created: new Date()
                  };

      Takto sa hodnota konštanty nopWillReturn zapíše do objektu newOpinion.
      
      

   Zvyšok kódu funkcie, ktorý zabezpečuje pridanie objektu newOpinion do poľa opinions a tiež do localStorage.myTreesComments už nemusíme meniť.
5. Keďže už viete, ako spracovanie v príklade 55myTreesFormLStorageConsole funguje, naprogramujte ho aj pre váš formulár.

   Úloha: Pre formulár vytvorený pri plnení cieľa 1 naprogramujte v JavaScript-e také spracovanie údajov ako v príklade 55myTreesFormLStorageConsole.

   Okrem skupiny zaškrtávacích polí typu radio button nech má údaj z každého riadiaceho elementu formulára samostatnú vlastnosť (položku) v objekte do ktorého sa ukladá (v príklade 55myTreesFormLStorageConsole to bol objekt newOpinion). Skupina zaškrtávacích polí typu radio button bude mať jednu spoločnú položku.

   Poznámka: Pre prístup k skupine zaškrtávacích polí typu radio button je lepšie použiť kolekciu elements a atribút name ako atribúty id a checked. Oba prístupy sú ukázané na nasledujúcom obrázku, kde sa pracuje s príkladom 11formsRadioCheck.html.