Class Web Technologies Bootstrap + Forms + Responsivity
Zadanie cvičenia: Vytvorte váš vlastný zmysluplný formulár. Zameranie formuláru si môžete určiť sami, musia však byť splnené nasledovné požiadavky: vo formulári bude potrebné odosielať položky dátum narodenia a vek. Skontrolujte, či zadanému dátumu narodenia zodpovedá zadaný vek. V prípade, že tieto dva údaje nie sú navzájom prepojené, zabezpečte, aby formulár nebolo možné odoslať.
pri realizácii zaškrtávacieho poľa (cez checkbox) dajte užívateľovi aj možnosť, aby si svoju odpoveď dodefinoval sám. Vo formulári sa napríklad môže nachádzať otázka (dúfam, že vymyslíte niečo iné) "akú farbu máte najradšej" s odpoveďami "biela", "modrá", "červená". Do odpovedí je potrebné pridať aj možnosť typu "iná, uveďte aká". Po zakliknutí tejto alternatívy sa užívateľovi zobrazí dovtedy nezobrazené textové pole, do ktorého vloží svoju odpoveď.
vo formulári budú minimálne 3 navzájom prepojené rozbaľovacie zoznamy, t.j. obsah druhého rozbaľovacieho zoznamu bude závisieť od výberu položky v prvom rozbaľovacom zozname a obsah tretieho rozbaľovacieho zoznamu bude závisieť od výberu položky v druhom rozbaľovacom zozname.
časť formuláru sa prispôsobí podľa toho, akú položku si užívateľ zvolí v prepínači (realizovanom cez radio button), t.j. buď sa mu zmení odokryje alebo zakryje časť formulára alebo sa minimálne jedna položka zmení (napr. muža sa spýtate koľko váži a ženy, či je spokojná so svojou váhou - znova, dúfam, že vymyslíte niečo iné).
v jednom jednoriadkovom textovom poli musí byť mailová adresa, ktorá bude obsahovať zavináč, minimálne 2 domény, pričom vrcholová doména bude mať 2-4 znaky. Pred zavináčom musia byť minimálne 3 znaky.
formulár bude obsahovať minimálne jedno viacriadkové textové pole (textarea) a skryté textové pole, do ktorého vložíte svoje meno.
minimálne štyri povinné položky formulára musia byť vyznačené.
pri jednotlivých položkách formulára poskytnite užívateľovi nápovedu, ako má danú položku vyplniť. Pri zlom vyplnení položky je treba dať užívateľovi hneď po jej opustení vedieť (t.j. nie až pri odosielaní formulára), v čom presne spočíva chyba, pre ktorú sa formulár nedá odoslať (aj v prípade previazanosti položiek).
Pri vytváraní formuláru využite css knižnicu Bootstrap a jej preddefinované triedy. Základnú Bootstrap grafiku stránky vrátane formulára rozšírte a doštýlujte o vlastné css triedy tak, aby bol dizajn Vášho webu jedinečný.
Stránka bude responzívna t.j. prispôsobená rôznym veľkostiam obrazovky (desktop, tablet, mobil). Pri veľkosti obrazovky medium (od 768px) a väčšej, bude mať stránka najmenej dva stĺpce (použite Bootstrap triedu col-... napr. Obr.1). Pre menšie zobrazenia budú stĺpce umiestnené pod sebou. (Nápoveda: Bootstrap Grid). Dbajte na to, aby sa stránka zobrazila korektne pri akejkoľvek veľkosti okna prehliadača.
Obr. 1. Bootstrap col-4
Formulár musí mať prijateľný vzhľad (t.j. jednotlivé položky v ňom nemôžu byť len "nahádzané", ale musia byť pekne sformátované a zarovnané). Hodnotí sa aj grafický dojem. Odovzdanie zadania bude spočívať v troch bodoch (všetky tri budú súčasťou bodovania): Vytvorený formulár vyplníte (nezabudnite vyplniť a vyznačiť všetky položky) a odošlete na mail jedným z nasledujúcich spôsobov: pomocou metódy mailto. pomocou niektorej z voľne dostupných služieb na Internete. Môžete využiť službu spomenutú na prednáške, resp. môžete využiť našu službu, ktorá je momentálne k dispozícii na adrese http://iolab.sk/form2mail/. V oboch prípadoch v subjekte správy vyznačte svoje meno a odosielanie formuláru adresujte na mailovú adresu, ktorá je uvedená pri mene osoby, ktorá vám hodnoti zadania: Bisták - [email protected] Kocúr - [email protected] Matišák - [email protected] Rábek - [email protected] Vyhotovenú stránku s formulárom vložíte do Google Classroom systému.
Funkčnú web stránku umiestnite na školský server, ktorý máte k dispozícii.