Ustvarjanje spletnih obrazcev (Vodič)

Jezik: nemščina

Ustvarjanje spletnih obrazcev za spletne strani (praktični vodič)

Kako ustvariti spletna obrazca za svoje spletne strani - korak za korakom razloženo! Ali želite zbirati imena, e-naslove, gesla, oznake za potrditev, datume, sezname ali spustne sezname: V tem praktičnem priročniku se naučite, kako priti od prvega HTML obrazca do popolnoma funkcionalnega spletne obrazca.

Ustvarjanje spletnih obrazcev - od osnov do funkcionalnih obrazcev
Pravilno ustvarite in preberite polja za vnos e-pošte, gesla in drugo
Izbirni okenci, radijski gumbi, spustni meniji, večvrstični tekstovni vnosi in več ustvarjanje
Obsežen, šesturni praktični priročnik razvijalca Stefana Haewßa
Z datotekami projekta za ponovno ustvarjanje prikazanih vsebin
Optimalno za spletnega razvijalca, spletnega oblikovalca in frontend razvijalca

Od preprostega povpraševanja po imenu in e-pošti do kompleksnejšega kontaktnega obrazca s funkcijo nalaganja datotek: Tukaj se naučiš, kako ustvariti celovite spletne obrazce za svoje spletne strani!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

podrobnosti

Vsebina: 6 h Video vadničenje
Licenca: zasebna in komercialna Pravice uporabe
Dodatno: vključuje delovni material

Kategorije

Spletno oblikovanje, CMS in razvoj

Z ljubeznijo ustvarjeno od:

Stephan Haewß

Ustvarjanje spletnih obrazcev - Uvod

Brezplačno

Ustvarjanje spletnih obrazcev: 1.1 | Uvod in pregled

Tukaj boš izvedel, o čem gre v tečaju in kaj lahko pričakuješ.

Ustvarjanje spletnih obrazcev: 1.2 | HTML-obrazci - zakaj in kako jih uporabljati?

Zakaj bi sploh uporabljali obrazce HTML in kako se to nasploh izvede?

Ustvarjanje spletnih obrazcev: 1.3 | Ustvarjanje prvega projekta

Tukaj bo ustvarjen projekt, v katerega bo vključen prvi obrazec.

Ustvarjanje spletnih obrazcev: 1.4 | Prvi obrazec v HTML-u

Ustvarjanje spletnih obrazcev: 1.4 | Prvi obrazec HTML

Ustvariš svoj prvi preprosti obrazec in spoznaš osnovno strukturo.

Obrazci

Ustvarjanje spletnih obrazcev: 2.1 | Zakaj uporabljati obrazce oziroma oznako obrazca?

Ustvarjanje spletnih obrazcev: 2.1 | Zakaj uporabljati obrazce oziroma oznako Form?

Raziskali bomo različne možnosti uporabe HTML obrazcev v spletnih aplikacijah.

Prenesi projekt datoteke

Ustvarjanje spletnih obrazcev: 2.2 | Branje podatkov obrazca z JavaScriptom

Ustvari spletne obrazce: 2.2 | Branje podatkov obrazca z JavaScriptom

Naučili se boste, kako z JavaScriptom preberete in obdelate podatke, ki jih uporabniki vpišejo.

Ustvarjanje spletnih obrazcev: 2.3 | Oblikovanje obrazcev in dodatne vrste vnosov

Ustvarjanje spletnih obrazcev: 2.3 | Polepšanje obrazca in dodatni tipi vnosov

Predstavil vam bom možnosti oblikovanja obrazcev in vam predstavil različna polja za vnos.

Preverjanje veljavnosti vnosov in obdelava dogodkov za obrazce

Ustvarjanje spletnih obrazcev: 3.1 | Prva validacija z vnosom e-pošte

Ustvarjanje spletnih obrazcev: 3.1 | Prva validacija s vnosom e-pošte

Implementirate preprosto preverjanje veljavnosti e-pošte, da se prepričate, da vnosi ustrezajo formatu e-pošte.

Ustvarjanje spletnih obrazcev: 3.2 | Vhodni tip število in atributi

Ustvarjanje spletnih obrazcev: 3.2 | Vrsta vnosa številka in atributi

Ukvarjamo se z numeričnimi vnosi in pripadajočimi atributi za omejitev možnih vrednosti.

Ustvarjanje spletnih obrazcev: 3.3 | Odzivanje na spremembe v vhodnem elementu

Ustvarjanje spletnih obrazcev: 3.3 | Odziv na spremembe v elementu za vnos

Učite se, kako v JS prestreči dogodke, ki se pojavijo ob spreminjanju vsebine polja za vnos.

Ustvarjanje spletnih obrazcev: 3.4 | Odzivanje na spremembe z addEventListener

Ustvarjanje spletnih obrazcev: 3.4 | Odziv na spremembe z addEventListener

Poglobili se bomo v obdelavo dogodkov in uporabili addEventListener za bolj prilagodljive odzive.

Ustvarjanje spletnih obrazcev: 3.5 | Pregled: Element za vnos podatkov

Obsežen povzetek različnih vrst input-ov in njihovih lastnosti.

Ustvarjanje spletnih obrazcev: 3.6 | Atributi: readonly, disabled, placeholder, minlength, maxlength

Razložili bomo najpomembnejše atribute za nadzorovanje obnašanja polj za vnos.

Ustvarjanje spletnih obrazcev: 3.7 | Atributi: vzorec in zahtevano

Naučili se boste, kako izvajati kompleksne validacije z reguljarnimi izrazi in required-atributom.

Ustvarjanje spletnih obrazcev: 3.8 | Atribut za preverjanje črkovanja

Prikažemo vam, kako lahko omogočite ali onemogočite preverjanje črkovanja v svojih obrazcih.

Ustvarjanje spletnih obrazcev: 3.9 | Tip vnosa geslo

Ustvarjanje spletnih obrazcev: 3.9 | Vrsta vnosa geslo

Spoznali boste, kako ustvarite polja za geslo.

Potrditvena polja

Ustvarjanje spletnih obrazcev: 4.1 | Polje za označevanje - Osnove

Ustvarjanje spletnih obrazcev: 4.1 | Potrditveno polje - Osnove

Začenjamo z osnovami potrditvenih polj in njihovimi možnostmi uporabe.

Ustvarjanje spletnih obrazcev: 4.2 | Uporaba potrditvenega polja v JS

Ustvarjanje spletnih obrazcev: 4.2 | Uporaba potrditvenih polj v JS

Naučil se boš, kako s pomočjo JavaScripta prebereš in nastaviš stanje potrditvenih okenc.

Ustvarjanje spletnih obrazcev: 4.3 | Oblikovanje potrditvenega okna

Ustvarjanje spletnih obrazcev: 4.3 | Oblikovanje potrditvenih polj

Predstavil vam bom različne načine prilagajanja izgleda potrditvenih polj.

Vrste vnosnih polj in razširjena polja

Ustvarjanje spletnih obrazcev: 5.1 | Izbirni gumbi

Ustvarjanje spletnih obrazcev: 5.1 | Radijski gumbi

Obrazložim delovanje izbirnih gumbov in kako jih uporabiti v svojih obrazcih.

Ustvarjanje spletnih obrazcev: 5.2 | Nalaganje datotek

Naučili se boste, kako omogočiti uporabnikom nalaganje datotek.

Ustvarjanje spletnih obrazcev: 5.3 | Vnos datoteke z JS

Ustvarjanje spletnih obrazcev: 5.3 | File Input z JS

Poglobili se boste v znanje prenosa datotek in se naučili, kako lahko izbrano datoteko obdelate s pomočjo JavaScripta.

Ustvarjanje spletnih obrazcev: 5.4 | Skrita polja za vnos

Govorim o uporabi skritih polj za posredovanje dodatnih informacij.

Ustvarjanje spletnih obrazcev: 5.5 | Vnos številk

Združili bomo različne možnosti vnašanja številk.

Ustvarjanje spletnih obrazcev: 5.6 | Razpon drsnika

Naučili se boste, kako z drsniki območja izbirati določen nabor vrednosti in kako implementirati drsnik.

Ustvarjanje spletnih obrazcev: 5.7 | Vnos datuma in časa

Pokažem ti, kako v svojih obrazcih vnašaš datum in čas.

Ustvarjanje spletnih obrazcev: 5.8 | E-pošta in URL

Osredotočamo se na posebna polja za vnos e-poštnih naslovov in URL-jev.

Ustvarjanje spletnih obrazcev: 5.9 | Barva

Naučili se boste, kako omogočiti izbiro barv prek barvnega polja za izbiro barv.

Ustvarjanje spletnih obrazcev: 5.10 | Vrste iskanja in telefona

Ustvarjanje spletnih obrazcev: 5.10 | Vrste search in tel

Predstavljam vam polja za vnos iskalnih poizvedb in telefonskih številk.

Ustvarjanje spletnih obrazcev: 5.11 | Večvrstični vnosi s poljem textarea

Ustvarjanje spletnih obrazcev: 5.11 | Večvrstični besedilni vnosi z textarea

Pojasnil se boš, kako realizirati večvrstične vnosna polja z elementom textarea.

Ustvarjanje spletnih obrazcev: 5.12 | Seznami z izbiro

Ustvarjanje spletnih obrazcev: 5.12 | Seznami s select

Podrobno bom pojasnil, kako ustvariti izbirne sezname s pomočjo elementa select.

Razširjena oblika obrazca in preverjanje pravilnosti s pomočjo JavaScripta in ogrodij

Ustvarjanje spletnih obrazcev: 6.1 | Združevanje možnosti

Ustvarjanje spletnih obrazcev: 6.1 | Skupina možnosti

Naučili se boste, kako lahko možnosti v spustnem seznamu združite v skupine.

Ustvarjanje spletnih obrazcev: 6.2 | Seznami predlogov z datalistami

Ustvarjanje spletnih obrazcev: 6.2 | Predlogi seznama z datalist

Pokažem ti, kako ustvariš predloge za polja vnosov.

Ustvarjanje spletnih obrazcev: 6.3 | Atribut samodokončanje

Ustvarjanje spletnih obrazcev: 6.3 | Atribut za samodejno izpolnjevanje

Naučili se boste, kako omogočiti samodejno dokončanje vnosov.

Ustvarjanje spletnih obrazcev: 6.4 | Sekcije obrazca z uporabo "Fieldset"ov

Ustvarjanje spletnih obrazcev: 6.4 | Seznami obrazcev s polji

Pojasnim, kako strukturirate svoje obrazce z elementi fieldset.

Ustvarjanje spletnih obrazcev: 6.5 | Preverjanje veljavnosti prek JavaScripta

Ustvarjanje spletnih obrazcev: 6.5 | Validacija prek JavaScripta

Celovit uvod v klient-side preverjanje obrazcev z JavaScriptom.

Ustvarjanje spletnih obrazcev: 6.6 | Strežniška obdelava z Node.JS in Express

Ustvarjanje spletnih obrazcev: 6.6 | Obdelava na strežniku z Node.JS in Express

Prikazal vam bom, kako sprejemati poslane obrazce na strežniku z uporabo Node.js in Express .

Prenesi projekt datoteke

Ustvarjanje spletnih obrazcev: 6.7 | Prejem obrazcev s podatki prek GET-ročnika

Ustvarjanje spletnih obrazcev: 6.7 | Prejemanje obrazcev s podatki s pomočjo GET-obdelovalca

Naučil se boš, kako prejemati podatke obrazca z metodo GET.

Ustvarjanje spletnih obrazcev: 6.8 | Prejemanje obrazcev s POST-obdelovalcem

Ustvarjanje spletnih obrazcev: 6.8 | Prejemanje obrazca podatkov z uporabo POST-obdelovalnika

Jaz bom pojasnil, kako sprejmeš podatke obrazca z metodo POST.

Ustvarjanje spletnih obrazcev: 6.9 | Obrazci in obrazčki v React - Ustvarjanje projekta

Ustvarjanje spletnih obrazcev: 6.9 | Obrazci in obrazčki v Reactu - Ustvarjanje projekta

Začnemo z ustvarjanjem projekta React in integracijo obrazcev.

Prenesi projekt datoteke

Ustvarjanje spletnih obrazcev: 6.10| Vhodni elementi v React-u

Naučil se boš, kako uporabljati različne vhodne elemente v Reactu.

Ustvarjanje spletnih obrazcev: 6.11 | Izbor in TextArea elementi v React-u

Ustvarjanje spletnih obrazcev: 6.11 | Elementi Select in Textarea v Reactu

Se lotimo elementov select in textarea v Reactu.

Ustvarjanje spletnih obrazcev: 6.12 | Obrazci z Alpine.js

Prikažem, kako obdelati obrazce z JavaScript ogrodjem Alpine.js.

Prenesi projekt datoteke

Ustvarjanje spletnih obrazcev: 6.13 | Obrazci s VueJs

Ustvarjanje spletnih obrazcev: 6.13 | Obrazci s programom VueJs

Expliciram, kako integrirati obrazce v Vue.js aplikacije.

Prenesi projekt datoteke

Podrobnosti vsebine

Spletni obrazci in njihova polja vnosov – korak za korakom pojasnjeno
Želiš razširiti svoje znanje pri razvijanju spletnih obrazcev? V tem vodiču se boš naučil/-a, kako ustvarjati funkcionalne obrazce z uporabo HTML, JavaScripta ter strežniških skriptov in knjižnic. Naj gre za preprosto spraševanje po imenih in e-poštnih naslovih ali kompleksni obrazec za stik – po tem tečaju boš sposoben/-na programirati lastne spletne obrazce z zahtevanimi polji vnosov ter jih vključiti v svoje spletne strani.
Več kot šest ur video-vodiča, ki ga je pripravil programer in učitelj Stephan Haewß, je namenjen vsem, ki želijo ustvarjati spletne obrazce, razvijalcem, ki uporabljajo obrazce v JS-UI-okvirjih, ter spletnim razvijalcem, ki želijo z minimalno količino JavaScripta pridobiti vhodne podatke uporabnikov. Optimalno za spletna razvijalce, spletna oblikovalce, front-end razvijalce, za začetnike in napredne – in povsem razumljivo že z osnovnim znanjem HTML.

HTML osnove za obrazce na tvojih spletnih straneh

Če do sedaj nimaš nobenega ali le malo znanja s področja spletnih obrazcev, začni ta tečaj z osnovami. Izvedel/-a boš vse pomembno o zgradbi in o različnih elementih HTML-obrazca. Spoznaj različna vnosna polja, kot so potrditvena polja, radijski gumbi, nalaganje datotek, polja za gesla in besedilo ter njihove atribute in možnosti preverjanja veljavnosti. Nauči se, kako ustvariti uporabnikom prijazne in dostopne obrazce z raznolikimi elementi obrazcev.

Interaktivni spletni obrazci, strežniška obdelava & obrazci v sodobnih JavaScript-okvirjih

Interakcijo z elementi obrazcev je mogoče usmerjati z JavaScriptom, da se ustvari dinamična in uporabnikom prijazna izkušnja. Tako se lahko prebere, uredi in po potrebi avtomatsko preveri vhode. S preverjanjem na klientovi strani je mogoče napačne ali nepopolne podatke neposredno prestreči pri uporabniku, preden se pošljejo na strežnik. To izboljša kakovost podatkov in zmanjša možnost napak. Drug pomemben vidik je dinamično prilagajanje obrazcev vhodom in interakcijam uporabnikov. Na vsa ta vprašanja se osredotoča video-vodič.

Poleg tega se boš ukvarjal/-a s pošiljanjem in prejemanjem podatkov iz obrazcev na strežnik ter s strežniško obdelavo na primeru Node.js in Express. Prav tako boš obravnaval/-a uporabo spletnih obrazcev v sodobnih JavaScript-okvirjih, kot je na primer integracija obrazcev v React-aplikacije in ustvarjanje reaktivnih obrazcev z React-Hooks in komponentami. Pridobi si ključne nasvete za oblikovanje obrazcev in oblikovalskih elementov ter za varnost podatkov.

To se boš naučil/-a v tem praktičnem vodiču

Izkoristi tečaj, da pridobiš obsežno znanje pri razvijanju HTML-obrazcev. Spoznaj različna vnosna polja in njihove posebnosti. Ugotovi, kako kontrolirati elemente obrazcev z JavaScriptom in kako uporabljati atribute in preverjanja. Poleg tega si oglej, kako vključiti obrazce v moderne JavaScript-okvirje, kot so React, VueJs in AlpineJs.